@underactive/pi-topping-statusline 0.2.0 → 0.2.2

package/src/tests/working.test.ts

@@ -1,19 +1,22 @@
 /**
- * Contracts for the opt-in embedded working indicator: the `working` segment
- * passes pi's pre-rendered status through verbatim, the top-left group swaps
- * everything but the Pi symbol for it while a stream is live, and the layout
- * truncates it (no ellipsis) before any other left segment is dropped.
+ * Contracts for the opt-in embedded status indicator: the `working` segment
+ * passes pi's pre-rendered status through verbatim, the top-left group keeps
+ * the Pi symbol and configured model details while a stream is live, and the
+ * layout truncates it before any other left segment is dropped. The caller
+ * chooses whether truncated status text uses an ellipsis, and how far an
+ * appearing status has slid out ahead of the model details.
  */
 import assert from "node:assert/strict";
 import test from "node:test";
 import { visibleWidth } from "@earendil-works/pi-tui";
+import { stripAnsi } from "../footer.ts";
 import { buildStatusLine } from "../layout.ts";
 import { SEGMENTS } from "../segments.ts";
+import { getSeparator } from "../separators.ts";
 import { resolveEffectiveSettings, topLeftSegments } from "../settings.ts";
 import { easeFade, theme } from "../theme.ts";
 import type { SegmentContext, StatusLineSegmentId } from "../types.ts";
 
-const stripAnsi = (text: string) => text.replace(/\x1b\[[0-9;]*m/g, "");
 const noGap = (s: string) => s;
 
 const EFFECTIVE = resolveEffectiveSettings({ transparent: true });
@@ -48,15 +51,20 @@ test("working segment is invisible when idle", () => {
 	assert.equal(SEGMENTS.working.render(ctxWith("")).visible, false);
 });
 
-test("topLeftSegments keeps pi first and swaps the rest while streaming", () => {
-	assert.deepEqual(topLeftSegments(EFFECTIVE, true), ["pi", "working"]);
+test("topLeftSegments keeps pi and model details around the working status", () => {
+	assert.deepEqual(topLeftSegments(EFFECTIVE, true), ["pi", "working", "model"]);
 	assert.deepEqual(topLeftSegments(EFFECTIVE, false), EFFECTIVE.leftSegments);
-	assert.ok(EFFECTIVE.leftSegments.length > 2, "default left group has more than pi + one segment");
+	assert.ok(EFFECTIVE.leftSegments.includes("path"), "default path segment is suppressed while working");
 });
 
-test("topLeftSegments yields only working when the pi symbol is off", () => {
+test("topLeftSegments respects disabled pi and model details", () => {
 	const noPi = resolveEffectiveSettings({ segments: { pi: false } });
-	assert.deepEqual(topLeftSegments(noPi, true), ["working"]);
+	assert.deepEqual(topLeftSegments(noPi, true), ["working", "model"]);
+
+	const noModelDetails = resolveEffectiveSettings({
+		segments: { model: false, provider: false, thinking: false },
+	});
+	assert.deepEqual(topLeftSegments(noModelDetails, true), ["pi", "working"]);
 });
 
 test("embedWorkingStatus resolves off by default and on when set", () => {
@@ -64,35 +72,114 @@ test("embedWorkingStatus resolves off by default and on when set", () => {
 	assert.equal(resolveEffectiveSettings({ embedWorkingStatus: true }).embedWorkingStatus, true);
 });
 
-test("top bar renders pi symbol, separator, then the status", () => {
-	const bar = buildStatusLine(80, ctxWith("⠙ Mulling 28 tps"), EFFECTIVE, noGap, {
-		left: ["pi", "working"],
+test("top bar renders pi symbol, status, then model details", () => {
+	const ctx = ctxWith("⠙ Mulling 28 tps");
+	ctx.model = { name: "GPT-5.6 Luna", id: "gpt-5.6", provider: "openai-codex", reasoning: true };
+	ctx.thinkingLevel = "max";
+	const effective = resolveEffectiveSettings({
+		transparent: true,
+		segments: { model: true, provider: true, thinking: true },
+	});
+	ctx.options = effective.segmentOptions;
+	const bar = buildStatusLine(120, ctx, effective, noGap, {
+		left: topLeftSegments(effective, true),
 		right: [],
 	});
 	const plain = stripAnsi(bar);
 	const piAt = plain.indexOf(theme.icon.pi);
 	const statusAt = plain.indexOf("⠙ Mulling 28 tps");
+	const modelAt = plain.indexOf("GPT-5.6 Luna");
 	assert.ok(piAt >= 0, "pi symbol present");
 	assert.ok(statusAt > piAt, "status follows the pi symbol");
-	assert.equal(visibleWidth(bar), 80);
+	assert.ok(modelAt > statusAt, "model details follow the status");
+	assert.ok(plain.includes("openai-codex"), "provider remains visible");
+	assert.ok(plain.includes("max"), "thinking level remains visible");
+	assert.equal(visibleWidth(bar), 120);
 });
 
-test("narrow widths truncate the status without an ellipsis and keep the pi symbol", () => {
+test("narrow widths truncate the status before dropping model details", () => {
 	const status = "⠙ Mulling ⣾⣿⣿⣿⣿⣿⣾⣾  28 tps · 11s · ↓ 316 tokens";
-	const bar = buildStatusLine(20, ctxWith(status), EFFECTIVE, noGap, { left: ["pi", "working"], right: [] });
+	const ctx = ctxWith(status);
+	ctx.model = { name: "Luna", id: "luna", provider: "openai-codex", reasoning: false };
+	const bar = buildStatusLine(24, ctx, EFFECTIVE, noGap, {
+		left: topLeftSegments(EFFECTIVE, true),
+		right: [],
+	});
 	const plain = stripAnsi(bar);
 	assert.ok(plain.includes(theme.icon.pi), "pi symbol survives");
 	assert.ok(plain.includes("⠙ Mull"), "status head is kept");
+	assert.ok(plain.includes("Luna"), "model details survive");
 	assert.ok(!plain.includes("…"), "no ellipsis");
 	assert.ok(!plain.includes("tokens"), "status tail is cut");
-	assert.equal(visibleWidth(bar), 20);
+	assert.equal(visibleWidth(bar), 24);
+});
+
+test("opaque bars restore the group background after truncating the status", () => {
+	const status = "⠙ Mulling ⣾⣿⣿⣿⣿⣿⣾⣾  28 tps · 11s · ↓ 316 tokens";
+	const ctx = ctxWith(status);
+	ctx.model = { name: "Luna", id: "luna", provider: "openai-codex", reasoning: false };
+	const opaque = resolveEffectiveSettings({ transparent: false });
+	ctx.options = opaque.segmentOptions;
+	const bar = buildStatusLine(24, ctx, opaque, noGap, {
+		left: topLeftSegments(opaque, true),
+		right: [],
+	});
+	const plain = stripAnsi(bar);
+	assert.ok(plain.includes("⠙ Mull"), "status head is kept");
+	assert.ok(!plain.includes("tokens"), "status tail is cut");
+	const reset = theme.getBgAnsi() + theme.getFgAnsi("text");
+	const resetAt = bar.indexOf(reset);
+	const modelAt = bar.indexOf("Luna");
+	assert.ok(resetAt >= 0, "group background and text color are re-asserted after the truncated status");
+	assert.ok(resetAt < modelAt, "the reset lands before the model text");
+});
+
+test("overflow drops trailing model details before touching the live status", () => {
+	const status = "⠙ Working";
+	const ctx = ctxWith(status);
+	ctx.model = { name: "GPT-5.6 Luna", id: "gpt-5.6", provider: "openai-codex", reasoning: true };
+	ctx.thinkingLevel = "max";
+	const effective = resolveEffectiveSettings({
+		transparent: true,
+		segments: { model: true, provider: true, thinking: true },
+	});
+	ctx.options = effective.segmentOptions;
+	const bar = buildStatusLine(34, ctx, effective, noGap, {
+		left: topLeftSegments(effective, true),
+		right: [],
+	});
+	const plain = stripAnsi(bar);
+	assert.ok(plain.includes(theme.icon.pi), "pi symbol survives");
+	assert.ok(plain.includes("⠙ Working"), "the spinner status survives untruncated");
+	assert.ok(!plain.includes("GPT-5.6"), "model details are dropped to protect the live status");
+	assert.equal(visibleWidth(bar), 34);
+});
+
+test("workingEllipsis marks truncated prose without changing the bar width", () => {
+	const status = "⠙ Context overflow detected, Auto-compacting... (esc to cancel)";
+	for (const width of [24, 40, 60]) {
+		const bar = buildStatusLine(
+			width,
+			ctxWith(status),
+			EFFECTIVE,
+			noGap,
+			{ left: topLeftSegments(EFFECTIVE, true), right: [] },
+			{ col: 0, row: 0 },
+			{ workingEllipsis: "…" },
+		);
+		const plain = stripAnsi(bar);
+		assert.ok(plain.includes(theme.icon.pi), `pi symbol survives at width ${width}`);
+		assert.ok(plain.includes("…"), `truncated status ends with an ellipsis at width ${width}`);
+		assert.ok(!plain.includes("cancel"), `status tail is cut at width ${width}`);
+		assert.equal(visibleWidth(bar), width, `width ${width}`);
+	}
 });
 
 test("a long ANSI-styled status never exceeds the bar width", () => {
 	const status = `\x1b[38;2;10;20;30m⠙ ${"Working ".repeat(30)}\x1b[39m`;
 	for (const width of [12, 16, 24, 40, 60]) {
 		const bar = buildStatusLine(width, ctxWith(status), EFFECTIVE, noGap, {
-			left: ["pi", "working"],
+			left: topLeftSegments(EFFECTIVE, true),
 			right: [],
 		});
 		assert.equal(visibleWidth(bar), width, `width ${width}`);
@@ -101,7 +188,10 @@ test("a long ANSI-styled status never exceeds the bar width", () => {
 });
 
 test("the status drops entirely rather than the pi symbol when there is no room", () => {
-	const bar = buildStatusLine(4, ctxWith("⠙ Working"), EFFECTIVE, noGap, { left: ["pi", "working"], right: [] });
+	const bar = buildStatusLine(4, ctxWith("⠙ Working"), EFFECTIVE, noGap, {
+		left: topLeftSegments(EFFECTIVE, true),
+		right: [],
+	});
 	const plain = stripAnsi(bar);
 	assert.ok(plain.includes(theme.icon.pi));
 	assert.ok(!plain.includes("⠙"));
@@ -123,18 +213,144 @@ test("easeFade is monotonic and pinned at both ends", () => {
 	assert.ok(easeFade(0.25) < easeFade(0.5) && easeFade(0.5) < easeFade(0.75));
 });
 
-test("leftFade recolors the tail but not the pi symbol or the bar width", () => {
+test("leftFade recolors the working status but not pi or model details", () => {
 	const status = "\x1b[38;2;10;200;30m⠙ Working\x1b[39m";
-	const groups: { left: StatusLineSegmentId[]; right: StatusLineSegmentId[] } = { left: ["pi", "working"], right: [] };
+	const ctx = ctxWith(status);
+	ctx.model = { name: "Luna", id: "luna", provider: "openai-codex", reasoning: false };
+	const groups: { left: StatusLineSegmentId[]; right: StatusLineSegmentId[] } = {
+		left: topLeftSegments(EFFECTIVE, true),
+		right: [],
+	};
 	const origin = { col: 0, row: 0 };
-	const build = (fade?: number) =>
-		buildStatusLine(60, ctxWith(status), EFFECTIVE, noGap, groups, origin, { leftFade: fade });
+	const build = (fade?: number) => buildStatusLine(60, ctx, EFFECTIVE, noGap, groups, origin, { leftFade: fade });
 	const solid = build();
 	const faded = build(0.2);
+	const renderedModel = SEGMENTS.model.render(ctx);
 	assert.equal(visibleWidth(faded), 60);
 	assert.equal(stripAnsi(faded), stripAnsi(solid));
 	assert.ok(!faded.includes("10;200;30"), "status color blended");
+	assert.ok(renderedModel.visible && faded.includes(renderedModel.content), "model styling untouched");
 	const piPrefix = (bar: string) => bar.slice(0, bar.indexOf(theme.icon.pi));
 	assert.equal(piPrefix(faded), piPrefix(solid), "pi symbol styling untouched");
 	assert.equal(build(1), solid);
 });
+
+test("leftFade does not recolor the right group", () => {
+	const ctx = ctxWith("⠙ Working");
+	ctx.sessionName = "stable-session";
+	const renderedSession = SEGMENTS.session_name.render(ctx);
+	const bar = buildStatusLine(
+		80,
+		ctx,
+		EFFECTIVE,
+		noGap,
+		{ left: topLeftSegments(EFFECTIVE, true), right: ["session_name"] },
+		{ col: 0, row: 0 },
+		{ leftFade: 0.2 },
+	);
+	assert.ok(renderedSession.visible && bar.includes(renderedSession.content), "right group styling untouched");
+});
+
+/** A top bar mid-slide, with the status revealed by `reveal` and Luna as the model. */
+function slidingBar(
+	status: string,
+	reveal: number | undefined,
+	{ width = 60, effective = EFFECTIVE, leftFade }: {
+		width?: number;
+		effective?: ReturnType<typeof resolveEffectiveSettings>;
+		leftFade?: number;
+	} = {},
+): string {
+	const ctx = ctxWith(status);
+	ctx.options = effective.segmentOptions;
+	ctx.model = { name: "Luna", id: "luna", provider: "openai-codex", reasoning: false };
+	ctx.sessionName = "stable-session";
+	return buildStatusLine(
+		width,
+		ctx,
+		effective,
+		noGap,
+		{ left: topLeftSegments(effective, true), right: ["session_name"] },
+		{ col: 0, row: 0 },
+		{ leftFade, workingReveal: reveal },
+	);
+}
+
+test("workingReveal slides the status out behind the pi symbol, pushing model details right", () => {
+	const settled = slidingBar("⠙ Working...", undefined);
+	const piAt = stripAnsi(settled).indexOf(theme.icon.pi);
+	assert.equal(slidingBar("⠙ Working...", 1), settled);
+	assert.ok(!stripAnsi(slidingBar("⠙ Working...", 0)).includes("⠙"), "nothing has emerged at the start");
+
+	let modelAt = -1;
+	for (let step = 0; step <= 30; step++) {
+		const bar = slidingBar("⠙ Working...", step / 30);
+		const plain = stripAnsi(bar);
+		assert.equal(visibleWidth(bar), 60, `width at step ${step}`);
+		assert.equal(plain.indexOf(theme.icon.pi), piAt, `pi symbol stays put at step ${step}`);
+		const at = plain.indexOf("Luna");
+		assert.ok(at >= modelAt, `model details never move left at step ${step}`);
+		modelAt = at;
+	}
+	assert.equal(modelAt, stripAnsi(settled).indexOf("Luna"), "model details end where they settle");
+});
+
+test("the status's tail emerges first, led by its trailing separator", () => {
+	const status = "⠙ Working...";
+	const sep = getSeparator(EFFECTIVE.separator).left;
+	const unitWidth = visibleWidth(status) + visibleWidth(sep) + 2;
+	const frame = (shown: number) => stripAnsi(slidingBar(status, shown / unitWidth));
+	const model = `${theme.icon.model} Luna`;
+	assert.ok(frame(2).includes(`${theme.icon.pi} ${sep} ${sep} ${model}`), "separator first");
+	assert.ok(frame(7).includes(`${theme.icon.pi} ${sep} g... ${sep} ${model}`), "then the status's tail");
+	assert.ok(!frame(7).includes("Workin"), "the head is still hidden");
+});
+
+test("without model details the status slides out alone after the pi separator", () => {
+	const effective = resolveEffectiveSettings({
+		transparent: true,
+		segments: { model: false, provider: false, thinking: false },
+	});
+	const sep = getSeparator(effective.separator).left;
+	assert.ok(!stripAnsi(slidingBar("⠙ Working...", 0, { effective })).includes(sep), "no separator yet");
+	const plain = stripAnsi(slidingBar("⠙ Working...", 4 / 12, { effective }));
+	assert.ok(plain.includes(`${theme.icon.pi} ${sep} g...`), "tail follows the pi separator");
+	assert.ok(!plain.includes("Workin"), "the head is still hidden");
+});
+
+test("the slide keeps the overflow decided for the fully revealed status", () => {
+	// At 40 cells the settled status leaves no room for the session name, even
+	// though a partly revealed one would.
+	assert.ok(!stripAnsi(slidingBar("⠙ Working...", undefined, { width: 40 })).includes("stable-session"));
+	for (let step = 0; step <= 20; step++) {
+		const bar = slidingBar("⠙ Working...", step / 20, { width: 40 });
+		assert.ok(!stripAnsi(bar).includes("stable-session"), `right group stays dropped at step ${step}`);
+	}
+});
+
+test("sliding frames keep the bar width with opaque caps, wide glyphs, and truncation", () => {
+	const opaque = resolveEffectiveSettings({ transparent: false });
+	const statuses = ["⠙ Working...", "🌑 Working", `\x1b[38;2;10;20;30m⠙ ${"Working ".repeat(10)}\x1b[39m`];
+	for (const effective of [EFFECTIVE, opaque]) {
+		for (const status of statuses) {
+			for (const width of [24, 60]) {
+				for (let step = 0; step <= 20; step++) {
+					const bar = slidingBar(status, step / 20, { width, effective });
+					assert.equal(visibleWidth(bar), width, `${JSON.stringify(status)} at width ${width}, step ${step}`);
+				}
+			}
+		}
+	}
+});
+
+test("a status fading mid-slide blends its emerged tail but not model details", () => {
+	const status = "\x1b[38;2;10;200;30m⠙ Working...\x1b[39m";
+	const bar = slidingBar(status, 0.5, { leftFade: 0.2 });
+	const ctx = ctxWith(status);
+	ctx.model = { name: "Luna", id: "luna", provider: "openai-codex", reasoning: false };
+	const renderedModel = SEGMENTS.model.render(ctx);
+	assert.ok(stripAnsi(bar).includes("..."), "part of the status has emerged");
+	assert.ok(!bar.includes("10;200;30"), "emerged status blended");
+	assert.ok(renderedModel.visible && bar.includes(renderedModel.content), "model styling untouched");
+	assert.equal(visibleWidth(bar), 60);
+});

package/src/token-rate.ts

@@ -29,7 +29,7 @@ const EMA_ALPHA = 0.4;
 class StreamingWordCounter {
 	#inWordByStream = new Map<string, boolean>();
 
-	count(text: string, stream = "default"): number {
+	count(text: string, stream: string): number {
 		let inWord = this.#inWordByStream.get(stream) ?? false;
 		let count = 0;
 		for (let i = 0; i < text.length; i++) {

package/src/types.ts

@@ -19,7 +19,9 @@ export type StatusLineSegmentId =
 	| "feeds"
 	| "context_graph"
 	| "scroll_hint"
-	| "working";
+	| "working"
+	| "compaction_info"
+	| "compaction_graph";
 
 /**
  * A feed the statusline subscribes to: custom session entries published by
@@ -74,8 +76,14 @@ export interface StatusLineSettings {
 	rainbowBorder?: boolean;
 	/** Animate the rainbow border when it is visible. */
 	rainbowAnimation?: boolean;
-	/** Render pi's streaming working status in the top bar instead of its own row. */
+	/** NVIDIA-green gradient border while the model provider is Switchyard. */
+	nvidiaGreenBorder?: boolean;
+	/** Animate the Switchyard green border when it is visible. */
+	nvidiaGreenAnimation?: boolean;
+	/** Render pi's status spinners in the top bar instead of their own row. */
 	embedWorkingStatus?: boolean;
+	/** Host pi-topping-compact's compaction progress in the bottom bar while a compaction runs. */
+	embedCompactionProgress?: boolean;
 }
 
 /** Resolved per-segment render options; resolveEffectiveSettings always fills them. */
@@ -108,7 +116,10 @@ export interface EffectiveStatusLineSettings {
 	segmentOptions: StatusLineSegmentOptions;
 	rainbowBorder: boolean;
 	rainbowAnimation: boolean;
+	nvidiaGreenBorder: boolean;
+	nvidiaGreenAnimation: boolean;
 	embedWorkingStatus: boolean;
+	embedCompactionProgress: boolean;
 	includes: SegmentIncludes;
 }
 
@@ -122,10 +133,15 @@ export interface SegmentContext {
 	thinkingLevel: string;
 	cwd: string;
 	sessionName: string | undefined;
-	/** Context usage percent, or null when unknown (e.g. right after compaction). */
+	/** Context usage percent, or null when unknown (no model, or a session pi cannot size). */
 	contextPercent: number | null;
 	contextTokens: number;
 	contextWindow: number;
+	/**
+	 * True while contextPercent and contextTokens are pi's estimate of a freshly
+	 * compacted context, shown until pi measures the next response.
+	 */
+	contextEstimated?: boolean;
 	git: {
 		branch: string | null;
 		status: { staged: number; unstaged: number; untracked: number } | null;
@@ -138,10 +154,15 @@ export interface SegmentContext {
 	/** Pi's own footer stats, when this frame needs them. */
 	piStats: string | undefined;
 	/**
-	 * Pi's embedded working indicator, pre-rendered and pre-colored by the host
-	 * for this frame. Absent while no response is streaming.
+	 * Pi's embedded status spinner, pre-rendered and pre-colored by the host for
+	 * this frame. Absent while no status indicator is active.
 	 */
 	workingStatus?: string;
+	/**
+	 * pi-topping-compact's live compaction progress, while its bar and figures
+	 * stand in for the context graph and pi's stats in the bottom-right group.
+	 */
+	compaction?: CompactionProgressView;
 	/** Live tok/s display state, when this frame needs it. */
 	tokenRate: TokenRateDisplay | undefined;
 	/**
@@ -158,6 +179,17 @@ export interface SegmentContext {
 	feedDisplayState?: Record<string, FeedDisplayState>;
 }
 
+/** One broadcast from pi-topping-compact: its bar, pre-rendered, plus the snapshot it was drawn from. */
+export interface CompactionProgressView {
+	/** The 20-cell bar, pre-rendered and pre-colored by pi-topping-compact with fg-only resets. */
+	bar: string;
+	/** How much of the context has been summarized so far, 0..100. */
+	percent: number;
+	tokensBefore: number;
+	contextWindow: number;
+	elapsedMs: number;
+}
+
 export type FeedPhase = "active" | "fading" | "hidden";
 
 export interface FeedDisplayState {

package/src/working-status-embed.ts

@@ -0,0 +1,15 @@
+import type { CustomEditor } from "@earendil-works/pi-coding-agent";
+
+/**
+ * Event-bus channel on which this extension announces, as `{ embedded: boolean }`,
+ * whether its bar hosts Pi's working status. pi-topping slides its loader's response
+ * model out only while it does. Shared with pi-topping.
+ */
+export const WORKING_STATUS_EMBED_CHANNEL = "pi-topping-statusline:working-status-embedded";
+
+type EmbeddingEditor = Partial<Pick<CustomEditor, "embedWorkingStatus" | "setWorkingStatusIndicator">>;
+
+/** Whether an editor this extension built draws the host's working status in its bar. */
+export function hostsWorkingStatus(editor: EmbeddingEditor | undefined): boolean {
+	return editor?.embedWorkingStatus === true && typeof editor.setWorkingStatusIndicator === "function";
+}

package/src/working-status.ts

@@ -0,0 +1,125 @@
+import type { CustomEditor } from "@earendil-works/pi-coding-agent";
+import { easeFade } from "./theme.js";
+
+export type StatusIndicatorKind = NonNullable<Parameters<CustomEditor["setWorkingStatusIndicator"]>[0]>["kind"];
+
+/** Slide-out time for a status that appears while the top-left group shows none. */
+export const STATUS_SLIDE_MS = 300;
+/** Briefly retain a cleared status so handoffs between host indicators do not flash. */
+export const STATUS_HOLD_MS = 150;
+/** Cross-fade budget when the embedded working status disappears: half out, half in. */
+export const WORKING_FADE_MS = 750;
+
+/** True when a status kind is a message-style indicator rather than the working spinner. */
+export function isMessageKind(kind: StatusIndicatorKind | undefined): boolean {
+	return kind !== undefined && kind !== "working";
+}
+
+/** Which status the top-left group shows this frame and how far it has slid out or faded. */
+export interface StatusFrame {
+	status: string | undefined;
+	leftFade?: number;
+	/** How far the status has slid out (0..1); absent once it is fully out. */
+	reveal?: number;
+	/** Kind of the status this frame shows, for truncation styling. */
+	kind: StatusIndicatorKind | undefined;
+	/** True while a slide, hold, or fade still needs repaints. */
+	pending: boolean;
+}
+
+interface StatusExit {
+	holdUntil: number;
+	fadeMs: number;
+}
+
+/**
+ * Resolve host status-indicator handoffs into stable top-bar frames.
+ *
+ * A status that appears while the top-left group shows none slides out over
+ * STATUS_SLIDE_MS. pi 0.86 routes working, retry, compaction, and
+ * branch-summary indicators through the editor border and may clear the slot
+ * between them. A cleared status is held briefly to bridge that gap, and a
+ * status arriving while the previous one is still drawn takes its place
+ * without sliding again. Only the working indicator — the one that genuinely
+ * ends a stream — then cross-fades back to user segments.
+ */
+export class StatusTransition {
+	#liveShown = false;
+	#lastStatus: string | undefined;
+	#lastKind: StatusIndicatorKind | undefined;
+	#exit: StatusExit | undefined;
+	#slideFrom: number | undefined;
+
+	resolve(live: string | undefined, kind: StatusIndicatorKind | undefined, now: number): StatusFrame {
+		if (live !== undefined) {
+			if (!this.#liveShown && !this.#exitDrawsStatus(now)) this.#slideFrom = now;
+			this.#liveShown = true;
+			this.#lastStatus = live;
+			this.#lastKind = kind;
+			this.#exit = undefined;
+			return this.#withSlide({ status: live, kind, pending: false }, now);
+		}
+
+		if (this.#liveShown) {
+			this.#liveShown = false;
+			this.#exit = {
+				holdUntil: now + STATUS_HOLD_MS,
+				fadeMs: isMessageKind(this.#lastKind) ? 0 : WORKING_FADE_MS,
+			};
+		}
+
+		const exit = this.#exit;
+		if (!exit) return { status: undefined, kind: undefined, pending: false };
+		if (now < exit.holdUntil) {
+			return this.#withSlide({ status: this.#lastStatus, kind: this.#lastKind, pending: true }, now);
+		}
+		const elapsed = now - exit.holdUntil;
+		if (elapsed >= exit.fadeMs) {
+			this.#clearExit();
+			return { status: undefined, kind: undefined, pending: false };
+		}
+		const half = exit.fadeMs / 2;
+		const outgoing = elapsed < half;
+		const leftFade = easeFade(outgoing ? 1 - elapsed / half : (elapsed - half) / half);
+		if (!outgoing) return { status: undefined, kind: undefined, leftFade, pending: true };
+		return this.#withSlide({ status: this.#lastStatus, kind: this.#lastKind, leftFade, pending: true }, now);
+	}
+
+	pending(now: number): boolean {
+		const exit = this.#exit;
+		if (exit) return now < exit.holdUntil + exit.fadeMs;
+		return this.#slideFrom !== undefined && now < this.#slideFrom + STATUS_SLIDE_MS;
+	}
+
+	reset(): void {
+		this.#liveShown = false;
+		this.#clearExit();
+	}
+
+	/** A cleared status is still drawn through its hold and the fade's outgoing half. */
+	#exitDrawsStatus(now: number): boolean {
+		const exit = this.#exit;
+		return exit !== undefined && now < exit.holdUntil + exit.fadeMs / 2;
+	}
+
+	/**
+	 * Add slide-out progress to a frame that draws a status. A status cleared
+	 * mid-slide keeps sliding through its exit rather than snapping to full width.
+	 */
+	#withSlide(frame: StatusFrame, now: number): StatusFrame {
+		if (this.#slideFrom === undefined) return frame;
+		const progress = (now - this.#slideFrom) / STATUS_SLIDE_MS;
+		if (progress >= 1) {
+			this.#slideFrom = undefined;
+			return frame;
+		}
+		return { ...frame, reveal: easeFade(progress), pending: true };
+	}
+
+	#clearExit(): void {
+		this.#lastStatus = undefined;
+		this.#lastKind = undefined;
+		this.#exit = undefined;
+		this.#slideFrom = undefined;
+	}
+}