@oh-my-pi/pi-tui 18.4.0 → 18.4.1

package/src/prompt/composer.ts

@@ -1,5 +1,8 @@
-import type { EditorTopBorder } from "../components/composer/types";
+import { getComposerStyle } from "../components/composer/registry";
 import { Spacer } from "../components/spacer";
+import type { StatusLineComponent } from "../status-line/component";
+import type { StatusLineSession } from "../status-line/host";
+import { createStartupStatusLine, type StatusLineStartupData } from "../status-line/startup";
 import { isInsideTerminalMultiplexer } from "../terminal-multiplexer";
 import { ProcessTerminal, type Terminal } from "../terminal";
 import {
@@ -12,7 +15,7 @@ import {
 	type TUIOptions,
 	type ViewportSize,
 } from "../tui";
-import { sliceWithWidth, truncateToWidth, visibleWidth } from "../utils";
+import { sliceWithWidth, visibleWidth } from "../utils";
 import { postmortem } from "@oh-my-pi/pi-utils";
 import { CustomEditor } from "./custom-editor";
 import type { WordCompletionMethod } from "./word-completion";
@@ -56,28 +59,22 @@ export interface ComposerWelcomeUpdate {
 	readonly modelName?: string;
 	readonly providerName?: string;
 	readonly recentSessions?: readonly RecentSession[];
-	readonly lspServers?: readonly LspServerInfo[];
+	/** Detected project servers; `null` means LSP is disabled and hides the welcome section. */
+	readonly lspServers?: readonly LspServerInfo[] | null;
 }
 
 /**
- * Placeholder-only status chrome replayed on the next first frame so the
- * status band/border exists before the session-aware status line attaches.
- * Bound to the composer shape it was rendered for; a different shape drops it.
+ * Status-bar inputs persisted by the last session. The first frame renders
+ * them through a startup {@link StatusLineComponent} at the live width until
+ * the session-aware status line attaches.
  */
-export interface ComposerStatusSnapshot {
-	readonly shape: string;
-	/** ANSI wrapper of the editor border at snapshot time (session accent or thinking color). */
+export interface ComposerStatusCache {
+	/** ANSI wrapper of the editor border when persisted (session accent or thinking color). */
 	readonly borderColor?: {
 		readonly prefix: string;
 		readonly suffix: string;
 	};
-	/** Status content embedded in the editor's top chrome (`top-border`, `top-band`, `top-rule-chip`). */
-	readonly topBorder?: {
-		readonly content: string;
-		readonly width: number;
-	};
-	/** Standalone bottom-bar rows (`pi`/`claude` shapes), gap row included. */
-	readonly bottomLines: readonly string[];
+	readonly statusLine: StatusLineStartupData;
 }
 
 /** Optional dependencies and initial state for a standalone composer. */
@@ -87,7 +84,7 @@ export interface ComposerOptions {
 	readonly tuiOptions?: TUIOptions;
 	readonly preferences?: Partial<ComposerPreferences>;
 	readonly welcome?: ComposerWelcomeUpdate;
-	readonly status?: ComposerStatusSnapshot;
+	readonly status?: ComposerStatusCache;
 	readonly exit?: (code: number) => void;
 	readonly now?: () => number;
 }
@@ -117,30 +114,16 @@ export interface ComposerStartOptions {
 	readonly deferInput?: boolean;
 }
 
-/**
- * Mount slot for the session-aware status component below the editor. Shows
- * placeholder rows during startup until the real component mounts.
- */
+/** Mount slot below the editor: the startup status line, then the session-aware one. */
 class StatusHost implements Component {
-	#lines: readonly string[] = [];
 	#component: Component | undefined;
 
-	get mounted(): boolean {
-		return this.#component !== undefined;
-	}
-
-	setLines(lines: readonly string[]): void {
-		this.#lines = lines;
-	}
-
 	setComponent(component: Component): void {
 		this.#component = component;
-		this.#lines = [];
 	}
 
 	render(width: number): readonly string[] {
-		if (this.#component) return this.#component.render(width);
-		return this.#lines.map(line => truncateToWidth(line, width));
+		return this.#component?.render(width) ?? [];
 	}
 }
 
@@ -220,11 +203,12 @@ export class Composer implements TerminalFrameProvider {
 	#modelName = "";
 	#providerName = "";
 	#recentSessions: RecentSession[] = [];
-	#lspServers: LspServerInfo[] = [];
+	#lspServers: LspServerInfo[] | null = [];
 	#headerBefore: readonly Component[] = [];
 	#headerAfter: readonly Component[] = [];
 	#runtimeChildren: readonly Component[] = [];
-	#statusSnapshot: ComposerStatusSnapshot | undefined;
+	/** Cache-driven status line shown until {@link setStatusComponent} mounts the session's. */
+	#startupStatus: StatusLineComponent | undefined;
 	#runtimeMounted = false;
 	// Composer-owned history id space. Transcript batch ids restart across
 	// container clears/swaps; the composer translates them into one monotonic
@@ -291,7 +275,6 @@ export class Composer implements TerminalFrameProvider {
 		this.#exit = options.exit ?? (code => postmortem.exitProcess(code));
 		this.#now = options.now ?? Date.now;
 		this.#preferences = { ...COMPOSER_DEFAULTS, ...options.preferences };
-		this.#statusSnapshot = options.status;
 		this.#applyWelcomeUpdate(options.welcome ?? {});
 
 		this.ui = new TUI(
@@ -318,7 +301,13 @@ export class Composer implements TerminalFrameProvider {
 		} catch {
 			// Extension-defined styles arrive with the session; InteractiveMode reapplies them.
 		}
-		this.#applyStatusSnapshot();
+		if (options.status) {
+			const { borderColor, statusLine } = options.status;
+			if (borderColor) this.editor.borderColor = text => `${borderColor.prefix}${text}${borderColor.suffix}`;
+			this.#startupStatus = createStartupStatusLine(statusLine);
+			this.#statusHost.setComponent(this.#startupStatus);
+			this.#startupStatus.attachToEditor(this.editor, getComposerStyle(this.#preferences.composerShape));
+		}
 		// Emergency controls stay active until InteractiveMode installs configured bindings.
 		// They deliberately mirror the interactive editor's contract so a stalled startup
 		// never behaves differently from a healthy one: Ctrl+C clears the draft and a second
@@ -635,7 +624,9 @@ export class Composer implements TerminalFrameProvider {
 			// retires first so transcript prefixes can follow in order.
 			const renderedHeader = this.#header.render(width);
 			if (renderedHeader.length > 0) {
-				const liveRows = transcript.liveRowCount(width);
+				// Only the comparison below reads the height, so the walk stops at
+				// the budget instead of rendering every replayed block (#12933).
+				const liveRows = transcript.liveRowCount(width, Math.max(0, rows - renderedHeader.length - chromeRows));
 				if (!this.#historyFlush && renderedHeader.length + chromeRows + liveRows <= rows) return undefined;
 				this.#offeredHistory = {
 					id: this.#nextHistoryId++,
@@ -789,7 +780,7 @@ export class Composer implements TerminalFrameProvider {
 			autocomplete: this.#preferences.spellingAutocomplete,
 			autocorrect: this.#preferences.spellingAutocorrect,
 		});
-		this.#applyStatusSnapshot();
+		this.#startupStatus?.attachToEditor(this.editor, getComposerStyle(this.#preferences.composerShape));
 		if (this.#preferences.quiet) {
 			this.#welcome?.stopIntro();
 			this.#welcome = undefined;
@@ -834,42 +825,20 @@ export class Composer implements TerminalFrameProvider {
 	}
 
 	/**
-	 * Mount the session-aware status component into the slot below the editor.
-	 * Drops the speculative snapshot; the caller installs the real top-border
+	 * Mount the session-aware status component into the slot below the editor,
+	 * retiring the startup status line; the caller installs the real top-border
 	 * provider through its composer-shape sync.
 	 */
-	setStatusComponent(component: Component): void {
+	setStatusComponent<TSession extends StatusLineSession>(component: StatusLineComponent<TSession>): void {
+		if (this.#startupStatus) component.adoptGitStatus(this.#startupStatus);
+		this.#disposeStartupStatus();
 		this.#statusHost.setComponent(component);
-		this.#statusSnapshot = undefined;
 		this.editor.setTopBorderProvider(undefined);
 	}
 
-	/** Cached placeholder top-border content fitted to the current editor width. */
-	#speculativeTopBorder(availableWidth: number): EditorTopBorder | undefined {
-		const border = this.#statusSnapshot?.topBorder;
-		if (!border) return undefined;
-		if (border.width <= availableWidth) return { content: border.content, width: border.width };
-		const content = truncateToWidth(border.content, availableWidth);
-		return { content, width: visibleWidth(content) };
-	}
-
-	/** Install the cached chrome for the current shape; a shape mismatch clears it. */
-	#applyStatusSnapshot(): void {
-		if (this.#statusHost.mounted) return;
-		const snapshot = this.#statusSnapshot;
-		if (!snapshot || snapshot.shape !== this.#preferences.composerShape) {
-			this.editor.setTopBorderProvider(undefined);
-			this.#statusHost.setLines([]);
-			return;
-		}
-		if (snapshot.borderColor) {
-			const { prefix, suffix } = snapshot.borderColor;
-			this.editor.borderColor = text => `${prefix}${text}${suffix}`;
-		}
-		this.editor.setTopBorderProvider(
-			snapshot.topBorder ? availableWidth => this.#speculativeTopBorder(availableWidth) : undefined,
-		);
-		this.#statusHost.setLines(snapshot.bottomLines);
+	#disposeStartupStatus(): void {
+		this.#startupStatus?.dispose();
+		this.#startupStatus = undefined;
 	}
 
 	/** Mount or replace session-aware root children while preserving the header and status hosts. */
@@ -908,6 +877,7 @@ export class Composer implements TerminalFrameProvider {
 	stop(): void {
 		if (!this.#started || this.#stopped || this.#transferred) return;
 		this.#welcome?.stopIntro();
+		this.#disposeStartupStatus();
 		this.ui.stop();
 		this.#stopped = true;
 	}
@@ -917,7 +887,7 @@ export class Composer implements TerminalFrameProvider {
 		if (update.modelName !== undefined) this.#modelName = update.modelName;
 		if (update.providerName !== undefined) this.#providerName = update.providerName;
 		if (update.recentSessions !== undefined) this.#recentSessions = [...update.recentSessions];
-		if (update.lspServers !== undefined) this.#lspServers = [...update.lspServers];
+		if (update.lspServers !== undefined) this.#lspServers = update.lspServers && [...update.lspServers];
 	}
 
 	#ensureWelcome(): void {

package/src/prompt/welcome.ts

@@ -186,7 +186,8 @@ export class WelcomeComponent implements Component {
 		private modelName: string,
 		private providerName: string,
 		private recentSessions: RecentSession[] = [],
-		private lspServers: LspServerInfo[] = [],
+		/** Detected project servers; `null` means LSP is disabled and hides the section. */
+		private lspServers: LspServerInfo[] | null = [],
 	) {}
 	get tip(): string | undefined {
 		this.#nagRoll ??= Math.random();
@@ -272,7 +273,7 @@ export class WelcomeComponent implements Component {
 		this.invalidate();
 	}
 
-	setLspServers(servers: LspServerInfo[]): void {
+	setLspServers(servers: LspServerInfo[] | null): void {
 		this.lspServers = servers;
 		this.invalidate();
 	}
@@ -365,29 +366,6 @@ export class WelcomeComponent implements Component {
 			sessionLines.push("");
 		}
 
-		// LSP servers content
-		const lspLines: string[] = [];
-		if (this.lspServers.length === 0) {
-			lspLines.push(` ${theme.fg("dim", "No LSP servers")}`);
-		} else {
-			for (const server of this.lspServers.slice(0, WELCOME_LSP_SLOTS)) {
-				const icon =
-					server.status === "ready"
-						? theme.styledSymbol("status.enabled", "success")
-						: server.status === "available"
-							? theme.styledSymbol("status.enabled", "dim")
-							: server.status === "connecting"
-								? theme.styledSymbol("status.pending", "muted")
-								: theme.styledSymbol("status.error", "error");
-				const exts = server.fileTypes.slice(0, 3).join(" ");
-				lspLines.push(` ${icon} ${theme.fg("muted", server.name)} ${theme.fg("dim", exts)}`);
-			}
-		}
-		// Pad to the fixed slot count so the box height doesn't depend on server count.
-		while (lspLines.length < WELCOME_LSP_SLOTS) {
-			lspLines.push("");
-		}
-
 		// Right column
 		const rightLines = [
 			` ${theme.bold(theme.fg("accent", "Tips"))}`,
@@ -395,9 +373,7 @@ export class WelcomeComponent implements Component {
 			` ${theme.fg("dim", "/")}${theme.fg("muted", " for commands")}`,
 			` ${theme.fg("dim", "!")}${theme.fg("muted", " to run bash")}`,
 			` ${theme.fg("dim", "$")}${theme.fg("muted", " to run python")}`,
-			separator,
-			` ${theme.bold(theme.fg("accent", "LSP Servers"))}`,
-			...lspLines,
+			...this.#renderLspSection(separator),
 			separator,
 			` ${theme.bold(theme.fg("accent", "Recent sessions"))}`,
 			...sessionLines,
@@ -452,6 +428,33 @@ export class WelcomeComponent implements Component {
 		return lines;
 	}
 
+	/** Right-column LSP rows padded to a fixed height; empty when LSP is disabled. */
+	#renderLspSection(separator: string): string[] {
+		if (this.lspServers === null) return [];
+		const lspLines: string[] = [];
+		if (this.lspServers.length === 0) {
+			lspLines.push(` ${theme.fg("dim", "No LSP servers")}`);
+		} else {
+			for (const server of this.lspServers.slice(0, WELCOME_LSP_SLOTS)) {
+				const icon =
+					server.status === "ready"
+						? theme.styledSymbol("status.enabled", "success")
+						: server.status === "available"
+							? theme.styledSymbol("status.enabled", "dim")
+							: server.status === "connecting"
+								? theme.styledSymbol("status.pending", "muted")
+								: theme.styledSymbol("status.error", "error");
+				const exts = server.fileTypes.slice(0, 3).join(" ");
+				lspLines.push(` ${icon} ${theme.fg("muted", server.name)} ${theme.fg("dim", exts)}`);
+			}
+		}
+		// Pad to the fixed slot count so the box height doesn't depend on server count.
+		while (lspLines.length < WELCOME_LSP_SLOTS) {
+			lspLines.push("");
+		}
+		return [separator, ` ${theme.bold(theme.fg("accent", "LSP Servers"))}`, ...lspLines];
+	}
+
 	/**
 	 * Render the per-instance tip line: the `customMessageLabel`-themed `Tip:`
 	 * label followed by a `muted` body, the whole line italicized. Returns `[]`

package/src/status-line/component.ts

@@ -25,6 +25,7 @@ import type {
 	StatusLineHost,
 	StatusLineSession,
 } from "./host";
+import type { Editor } from "../components/editor";
 import { getSessionAccentAnsi, getSessionAccentHex } from "../theme/session-color";
 import { sanitizeStatusText } from "../chrome/shared";
 import { getThemeEpoch, theme } from "../theme";
@@ -247,6 +248,8 @@ interface ContextUsageMemo {
 	tokenizerRef: unknown;
 	usedTokens: number;
 	contextWindow: number;
+	/** The session reported `percent: null`: usage is unknown, so no percent is shown. */
+	percentUnknown: boolean;
 	systemPromptRef: readonly string[] | undefined;
 	toolsRef: readonly any[] | undefined;
 	skillsRef: readonly any[] | undefined;
@@ -312,7 +315,6 @@ interface CachedStatusLine {
 	availableWidth: number;
 	renderRevision: number;
 	inputRevision: number;
-	placeholders: boolean;
 	previewTitle: string | undefined;
 	externalInputs: StatusLineExternalInputs;
 }
@@ -420,8 +422,10 @@ function formatEmbeddedContextPercent(percent: number): string {
 	return `${percent > 0 && percent < 1 ? percent.toFixed(1) : Math.round(percent)}%`;
 }
 
-function embeddedContextGaugeMinWidth(percent: number, contextWindow: number): number {
-	return formatEmbeddedContextPercent(percent).length + formatNumber(contextWindow).length + 4;
+/** Gap width the embedded gauge needs for its labels; an unknown percent (`null`) shows the window label alone. */
+function embeddedContextGaugeMinWidth(percent: number | null, contextWindow: number): number {
+	const percentWidth = percent === null ? 0 : formatEmbeddedContextPercent(percent).length + 2;
+	return percentWidth + formatNumber(contextWindow).length + 2;
 }
 
 function hasGitSegment(segments: readonly StatusLineSegmentId[]): boolean {
@@ -1483,6 +1487,24 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		return this.#cachedGitStatusCwd === gitCwd ? this.#cachedGitStatus : null;
 	}
 
+	/**
+	 * Seed working-tree status from the status line this one replaces (the
+	 * startup bar), so the dirty counts stay on screen instead of blanking until
+	 * this instance's first fetch lands. Normal TTL refreshes follow.
+	 */
+	adoptGitStatus(source: StatusLineComponent): void {
+		if (this.#cachedGitStatusCwd === undefined && source.#cachedGitStatusCwd !== undefined) {
+			this.#cachedGitStatus = source.#cachedGitStatus;
+			this.#cachedGitStatusCwd = source.#cachedGitStatusCwd;
+			this.#gitStatusLastFetch = source.#gitStatusLastFetch;
+		}
+		if (this.#jjStatusLastFetch === 0 && source.#jjStatusLastFetch !== 0) {
+			this.#cachedJjStatus = source.#cachedJjStatus;
+			this.#jjStatusLastFetch = source.#jjStatusLastFetch;
+		}
+		this.#invalidateStatusLineRenderCache();
+	}
+
 	#lookupPr(activeRepoCache: ActiveRepoCache = this.#resolveActiveRepoCache()): {
 		number: number;
 		url: string;
@@ -2088,6 +2110,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		const usedTokens = usage?.tokens ?? 0;
 		const contextWindow = usage?.contextWindow ?? modelContextWindow;
 		this.#contextUsageCache = {
+			percentUnknown: usage?.percent === null,
 			messagesRef: messages,
 			length,
 			lastFingerprint,
@@ -2141,7 +2164,10 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		const breakdown = this.getCachedContextBreakdown();
 		let contextTokens = breakdown.usedTokens;
 		contextWindow = breakdown.contextWindow || contextWindow;
-		let contextPercent: number | null = contextWindow > 0 ? (breakdown.usedTokens / contextWindow) * 100 : null;
+		let contextPercent: number | null =
+			contextWindow > 0 && !this.#contextUsageCache?.percentUnknown
+				? (breakdown.usedTokens / contextWindow) * 100
+				: null;
 		// Collab guest: context comes from the host's state frames — the local
 		// replica does no accounting of its own.
 		const collabState = this.#collabStatus?.stateOverride;
@@ -2439,8 +2465,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 	 * clocks, countdowns, and VCS fallback polling advance only at their own
 	 * display/probe cadence.
 	 */
-	#statusLineClock(nowMs: number, effectiveSettings: EffectiveStatusLineSettings, placeholders: boolean): number {
-		if (placeholders) return 0;
+	#statusLineClock(nowMs: number, effectiveSettings: EffectiveStatusLineSettings): number {
 		const leftSegments = effectiveSettings.leftSegments;
 		const rightSegments = effectiveSettings.rightSegments;
 		const meter = this.#meter();
@@ -2469,17 +2494,11 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		return 0;
 	}
 
-	#buildStatusLine(
-		width: number,
-		layout: StatusLineLayout = "box",
-		previewTitle?: string,
-		options?: { readonly placeholders?: boolean },
-	): CachedStatusLine {
+	#buildStatusLine(width: number, layout: StatusLineLayout = "box", previewTitle?: string): CachedStatusLine {
 		const effectiveSettings = this.#resolveSettings();
-		const placeholders = options?.placeholders === true;
 		const externalInputs = this.#readStatusLineExternalInputs();
 		const nowMs = Date.now();
-		const clockTick = this.#statusLineClock(nowMs, effectiveSettings, placeholders);
+		const clockTick = this.#statusLineClock(nowMs, effectiveSettings);
 		if (clockTick !== this.#statusLineClockTick) {
 			this.#statusLineClockTick = clockTick;
 			this.#invalidateStatusLineRenderCache();
@@ -2491,14 +2510,13 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 			cached.availableWidth === width &&
 			cached.renderRevision === this.#renderRevision &&
 			cached.inputRevision === this.#statusLineInputRevision &&
-			cached.placeholders === placeholders &&
 			cached.previewTitle === previewTitle &&
 			this.#sameStatusLineExternalInputs(cached.externalInputs, externalInputs)
 		) {
 			return cached;
 		}
 
-		const content = this.#renderStatusLine(width, layout, previewTitle, options, nowMs);
+		const content = this.#renderStatusLine(width, layout, previewTitle, nowMs);
 		const result = {
 			content,
 			dimmedContent: this.#dimWhileFocusProxied(content),
@@ -2506,7 +2524,6 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 			availableWidth: width,
 			renderRevision: this.#renderRevision,
 			inputRevision: this.#statusLineInputRevision,
-			placeholders,
 			previewTitle,
 			externalInputs,
 		};
@@ -2529,16 +2546,9 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 	 * `previewTitle` is a stand-in session title for composer previews; the
 	 * `session_name` segment renders it when the session is unnamed.
 	 */
-	#renderStatusLine(
-		width: number,
-		layout: StatusLineLayout,
-		previewTitle: string | undefined,
-		options: { readonly placeholders?: boolean } | undefined,
-		nowMs: number,
-	): string {
+	#renderStatusLine(width: number, layout: StatusLineLayout, previewTitle: string | undefined, nowMs: number): string {
 		const effectiveSettings = this.#resolveSettings();
 		this.#syncPricingTimer();
-		const placeholders = options?.placeholders === true;
 		const plain = layout !== "box" && layout !== "band";
 		const includePath =
 			hasPathSegment(effectiveSettings.leftSegments) || hasPathSegment(effectiveSettings.rightSegments);
@@ -2548,7 +2558,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 			(hasGitSegment(effectiveSettings.leftSegments) || hasGitSegment(effectiveSettings.rightSegments));
 		const includePr =
 			gitEnabled && (hasPrSegment(effectiveSettings.leftSegments) || hasPrSegment(effectiveSettings.rightSegments));
-		const liveCtx = this.#buildSegmentContext(
+		const ctx = this.#buildSegmentContext(
 			width,
 			effectiveSettings.segmentOptions,
 			includePath,
@@ -2557,7 +2567,6 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 			nowMs,
 			previewTitle,
 		);
-		const ctx: SegmentContext = placeholders ? { ...liveCtx, startupPlaceholder: true } : liveCtx;
 		const separatorDef = plain
 			? { left: "·", right: "·" }
 			: getSeparator(effectiveSettings.separator ?? "powerline-thin", theme);
@@ -2609,8 +2618,6 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		const embedContext =
 			!plain &&
 			effectiveSettings.contextLine === "embedded" &&
-			ctx.contextPercent !== null &&
-			ctx.contextPercent !== undefined &&
 			ctx.contextWindow > 0 &&
 			(hasContextSegment(leftSegIds) || hasContextSegment(rightSegIds)) &&
 			(hasNonContextSegment(leftSegIds) || hasNonContextSegment(rightSegIds));
@@ -2630,13 +2637,9 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 						job => job.type !== "task" || job.agentId === undefined || !this.#runningSubagentIds.has(job.agentId),
 					).length ?? 0;
 			if (runningBackgroundJobs > 0) {
-				const count = placeholders ? "…" : `${runningBackgroundJobs}`;
-				rightParts.unshift(theme.fg("statusLineSubagents", `${theme.icon.job} ${count}`));
-			}
-			if (subagentBadge) {
-				const content = placeholders ? [theme.icon.agents, "…"].filter(Boolean).join(" ") : subagentBadge;
-				rightParts.unshift(placeholders ? theme.fg("statusLineSubagents", content) : content);
+				rightParts.unshift(theme.fg("statusLineSubagents", `${theme.icon.job} ${runningBackgroundJobs}`));
 			}
+			if (subagentBadge) rightParts.unshift(subagentBadge);
 		}
 		const topFillWidth = Math.max(0, width);
 		const left = [...leftParts];
@@ -2668,9 +2671,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		// this budget a long path/session title can leave a one-cell gap: the
 		// context segment is gone, and the gauge silently omits its labels too.
 		const embeddedContextWidth = embedContext
-			? ctx.startupPlaceholder
-				? "…%".length + "…".length + 4
-				: embeddedContextGaugeMinWidth(ctx.contextPercent ?? 0, ctx.contextWindow)
+			? embeddedContextGaugeMinWidth(ctx.contextPercent, ctx.contextWindow)
 			: 0;
 		const minimumGapWidth = (): number => {
 			if (!embeddedContextWidth) return left.length > 0 && right.length > 0 ? 1 : 0;
@@ -2824,11 +2825,13 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		const horizontal = theme.boxRound.horizontal;
 		const mode = effectiveSettings.contextLine ?? "embedded";
 		const pct = ctx.contextPercent;
-		if (mode === "off" || pct === null || pct === undefined) {
+		if (mode === "off" || (pct === null && ctx.contextWindow <= 0)) {
 			return `\x1b[49m${usedColor}${horizontal.repeat(gapWidth)}\x1b[39m`;
 		}
 
-		const clampedPct = Math.min(100, Math.max(0, pct));
+		// Unknown usage against a known window (startup prepaint) draws the fresh-session
+		// gauge: one lit cell and the window label, no percent.
+		const clampedPct = pct === null ? 0 : Math.min(100, Math.max(0, pct));
 		let percentLabel = "";
 		let windowLabel = "";
 		let percentStart = -1;
@@ -2837,14 +2840,11 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		// >100%: usage anchored past the active window (e.g. model switch to a
 		// smaller window). The bar clamps full, but the embedded label breaks
 		// past the window label — `──200K─120%` with the percent in error color.
-		const percentOverflow = pct > 100;
+		const percentOverflow = pct !== null && pct > 100;
 		if (embedContext) {
-			const candidatePercent = ctx.startupPlaceholder
-				? "…%"
-				: formatEmbeddedContextPercent(percentOverflow ? pct : clampedPct);
-			const candidateWindow = ctx.startupPlaceholder ? "…" : formatNumber(ctx.contextWindow);
-			const minimumLabelWidth = candidatePercent.length + candidateWindow.length + 4;
-			if (gapWidth >= minimumLabelWidth) {
+			const candidatePercent = pct === null ? "" : formatEmbeddedContextPercent(percentOverflow ? pct : clampedPct);
+			const candidateWindow = formatNumber(ctx.contextWindow);
+			if (gapWidth >= embeddedContextGaugeMinWidth(pct, ctx.contextWindow)) {
 				percentLabel = candidatePercent;
 				windowLabel = candidateWindow;
 				if (percentOverflow) {
@@ -2946,9 +2946,32 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		}
 	}
 
-	/** Render startup ellipses inside each segment's normal icon, color, and static chrome. */
-	renderStartupPlaceholder(width: number, layout: StatusLineLayout): string {
-		return this.#buildStatusLine(width, layout, undefined, { placeholders: true }).content;
+	/**
+	 * Wire this bar into `editor` for a composer layout: the matching top-border
+	 * provider, the autocomplete probe, and the standalone bottom-bar placement.
+	 * Callers re-run it whenever the composer shape changes.
+	 */
+	attachToEditor(
+		editor: Pick<Editor, "isAutocompleteActive" | "setTopBorderProvider" | "setTopBorder">,
+		style: Pick<ComposerStyle, "statusAttachment" | "bottomBar" | "bottomBarGap">,
+	): void {
+		this.setAutocompleteActiveProbe(() => editor.isAutocompleteActive());
+		switch (style.statusAttachment) {
+			case "top-border":
+				editor.setTopBorderProvider(availableWidth => this.getTopBorder(availableWidth));
+				break;
+			case "top-band":
+				editor.setTopBorderProvider(availableWidth => this.getBandTopBorder(availableWidth));
+				break;
+			case "top-rule-chip":
+				editor.setTopBorderProvider(availableWidth => this.getStandaloneTopBorder(availableWidth));
+				break;
+			case "none":
+				editor.setTopBorderProvider(undefined);
+				editor.setTopBorder(undefined);
+				break;
+		}
+		this.setComposerStyle(style);
 	}
 
 	getTopBorder(width: number, previewTitle?: string): { content: string; width: number; revision: number } {

package/src/status-line/metrics.ts

@@ -7,7 +7,6 @@ export interface BillingSummaryOptions {
 	readonly usingSubscription: boolean;
 	readonly premiumRequests: number;
 	readonly fractionDigits: number;
-	readonly startupPlaceholder?: boolean;
 	readonly pricingPeriod?: "peak" | "off-peak";
 	readonly advisor?: {
 		readonly cost: number;
@@ -30,24 +29,13 @@ function formatSpend(amount: number, usingSubscription: boolean, fractionDigits:
 	return `S${formatted}`;
 }
 
-function formatSpendPlaceholder(usingSubscription: boolean, uiTheme: Theme): string {
-	if (!usingSubscription) return "$…";
-	if (uiTheme.getSymbolPreset() === "nerd" && uiTheme.icon.subscription) {
-		return `${uiTheme.icon.subscription} …`;
-	}
-	return "S…";
-}
-
 function formatAdvisorSpend(
 	amount: number,
 	usingSubscription: boolean,
 	fractionDigits: number,
-	placeholder: boolean,
 	uiTheme: Theme,
 ): string {
-	const spend = placeholder
-		? formatSpendPlaceholder(usingSubscription, uiTheme)
-		: formatSpend(amount, usingSubscription, fractionDigits, uiTheme);
+	const spend = formatSpend(amount, usingSubscription, fractionDigits, uiTheme);
 	const icon = uiTheme.icon.advisor;
 	return icon && icon !== "(adv)" ? `${icon} ${spend}` : `${spend} (adv)`;
 }
@@ -63,21 +51,16 @@ export function formatBillingSummary(options: BillingSummaryOptions, uiTheme: Th
 		return undefined;
 	}
 
-	const placeholder = options.startupPlaceholder === true;
 	const parts: string[] = [];
 	if (options.cost || options.pricingPeriod) {
-		parts.push(
-			placeholder
-				? formatSpendPlaceholder(options.usingSubscription, uiTheme)
-				: formatSpend(options.cost, options.usingSubscription, options.fractionDigits, uiTheme),
-		);
+		parts.push(formatSpend(options.cost, options.usingSubscription, options.fractionDigits, uiTheme));
 	} else if (options.usingSubscription) {
 		parts.push(
 			uiTheme.getSymbolPreset() === "nerd" && uiTheme.icon.subscription ? uiTheme.icon.subscription : "(sub)",
 		);
 	}
 	if (options.pricingPeriod) parts.push(options.pricingPeriod === "peak" ? "↑" : "↓");
-	if (premiumRequests) parts.push(`★ ${placeholder ? "…" : formatNumber(premiumRequests)}`);
+	if (premiumRequests) parts.push(`★ ${formatNumber(premiumRequests)}`);
 	if (advisorCost && options.advisor) {
 		const prefix = parts.length > 0 ? "+ " : "";
 		parts.push(
@@ -85,7 +68,6 @@ export function formatBillingSummary(options: BillingSummaryOptions, uiTheme: Th
 				advisorCost,
 				options.advisor.usingSubscription,
 				options.fractionDigits,
-				placeholder,
 				uiTheme,
 			)}`,
 		);