@underactive/pi-topping-statusline 0.1.4 → 0.2.0

package/README.md

@@ -42,6 +42,7 @@ and apply live.
 ║    Border style                                   ‹ rounded ›  ║
 ║    [■] Rainbow border on max thinking                      ON  ║
 ║    [■] Animate rainbow border                              ON  ║
+║    [ ] Embed 'Working' indicator                           OFF ║
 ║                                                                ║
 ╟─ Top Left Segment Group ───────────────────────────────────────╢
 ║    [■] Pi symbol                                           ON  ║
@@ -66,18 +67,18 @@ and apply live.
 ║    + add feed                                                  ║
 ║                                                                ║
 ║  ↑↓ move  ←→ cycle  ␣ toggle  ⏎ apply/edit  esc cancel         ║
-╚════════════════════════════════════════════════════════[ 1/29 ]╝
+╚════════════════════════════════════════════════════════[ 1/30 ]╝
 ```
 
 | Section | Settings |
 | --- | --- |
-| Global | Transparent Segments · Separator (`powerline` `powerline-thin` `slash` `pipe` `ascii`) · Symbols (`nerdfont` `unicode` `ascii` — stored in settings.json as `nerd`/`unicode`/`ascii`) · Border style (`rounded` `heavy` `double` `single`) · Rainbow border on max thinking · Animate rainbow border |
+| Global | Transparent Segments · Separator (`powerline` `powerline-thin` `slash` `pipe` `ascii`) · Symbols (`nerdfont` `unicode` `ascii` — stored in settings.json as `nerd`/`unicode`/`ascii`) · Border style (`rounded` `heavy` `double` `single`) · Rainbow border on max thinking · Animate rainbow border · Embed 'Working' indicator |
 | Top Left Segment Group | Pi symbol · Model · Provider · Thinking level · Path · Git · PR |
 | Top Right Segment Group | Token rate · Session name |
 | Bottom Right Segment Group | Feeds · Token rate · Pi stats · Context bar · Context stats |
 | Bottom Left Segment Group | Scroll hint · Feeds · Token rate |
 | Feeds | One subscription per row: type · field · prefix · format, plus add/remove |
-| Defaults | Transparent on · Separator `powerline-thin` · Symbols `nerdfont` · Border style `rounded` · Rainbow border on · Animate rainbow border on |
+| Defaults | Transparent on · Separator `powerline-thin` · Symbols `nerdfont` · Border style `rounded` · Rainbow border on · Animate rainbow border on · Embed 'Working' indicator off |
 
 With **Rainbow border on max thinking** on (the default), cycling the thinking level to `max`
 replaces the border's fixed theme color with a rainbow: a full hue cycle distributed around the
@@ -87,6 +88,17 @@ the rainbow at a fixed color phase without its repaint timer; the settings previ
 phase too. Any other thinking level keeps the normal theme border color. Disable animation over
 slow SSH links or in terminals with expensive redraws while retaining the rainbow border.
 
+**Embed 'Working' indicator** (off by default) moves pi's streaming status — spinner, message,
+and any loader text a topping such as pi-topping supplies — out of its own row and into the
+top-left group, right after the Pi symbol and its chevron. The remaining left segments (model,
+path, git, PR) step aside while a response streams and return when it ends; the Pi symbol never
+moves. The status appears instantly when a stream starts; when it ends, the swap back
+cross-fades over 750ms (the status sinks into the bar background, then the user's segments
+rise out of it) rather than cutting. A status too long for the bar is truncated without an ellipsis, as pi's own border does.
+Requires pi 0.85 or later. Toggling the setting reinstalls the editor through pi, so it applies
+immediately, even mid-response. Only the statusline's own editor opts in: when another
+extension owns the editor slot and is wrapped, pi keeps its standalone working row.
+
 ## Segments
 
 Ported with pi data: `pi`, `model` (model · provider · thinking level), `path`

package/index.ts

@@ -37,11 +37,16 @@ import {
 import { buildStatusLine } from "./src/layout.js";
 import { RAINBOW_DEG_PER_FRAME, RAINBOW_FRAME_MS, RainbowBorder } from "./src/rainbow.js";
 import { registerSettingsCommand } from "./src/settings-menu.js";
-import { createSettingsState } from "./src/settings.js";
+import { createSettingsState, topLeftSegments } from "./src/settings.js";
+import { easeFade } from "./src/theme.js";
 import { theme } from "./src/theme.js";
 import { TokenRateMonitor } from "./src/token-rate.js";
 type EditorFactory = NonNullable<ReturnType<ExtensionContext["ui"]["getEditorComponent"]>>;
 
+/** Cross-fade budget when the embedded working status disappears: half out, half in. */
+const WORKING_FADE_MS = 750;
+const WORKING_FADE_FRAME_MS = 15;
+
 export default function (pi: ExtensionAPI) {
 	const state = createSettingsState();
 	const builder = new SegmentContextBuilder(pi);
@@ -54,9 +59,77 @@ export default function (pi: ExtensionAPI) {
 	let patchedFooter: Component | undefined;
 	let footerRenderOriginal: ((width: number) => string[]) | undefined;
 	let restoreFooterLayout: (() => void) | undefined;
+	// The CustomEditor this extension constructed itself (undefined when it wraps
+	// another extension's editor), and the host's working indicator captured
+	// from that editor while a response streams.
+	let activeEditor: CustomEditor | undefined;
+	let embeddedWorkingStatus: ((width: number) => string) | undefined;
+	// Fade from the working status back to the user's left segments when a
+	// stream ends. The last status text is kept so the outgoing half still has
+	// something to fade after pi has cleared its indicator.
+	let workingShown = false;
+	let lastWorkingText: string | undefined;
+	let workingFade: { start: number } | undefined;
+	let workingFadeTimer: ReturnType<typeof setInterval> | undefined;
+	const stopWorkingFadeTimer = (): void => {
+		if (workingFadeTimer) clearInterval(workingFadeTimer);
+		workingFadeTimer = undefined;
+	};
+
+	const syncEmbed = (): void => {
+		const ctx = activeCtx;
+		const factory = ourFactory;
+		if (!activeEditor || !ctx || !factory) return;
+		const next = state.effective.embedWorkingStatus;
+		if (activeEditor.embedWorkingStatus === next) return;
+		ctx.ui.setEditorComponent(factory);
+	};
 
 	const requestRender = () => activeTui?.requestRender();
 	builder.setRequestRender(requestRender);
+	const startWorkingFadeTimer = (): void => {
+		if (workingFadeTimer) return;
+		workingFadeTimer = setInterval(() => {
+			if (!workingFade || Date.now() - workingFade.start >= WORKING_FADE_MS) {
+				workingFade = undefined;
+				stopWorkingFadeTimer();
+			}
+			requestRender();
+		}, WORKING_FADE_FRAME_MS);
+		workingFadeTimer.unref?.();
+	};
+
+	/**
+	 * Which left group this frame shows and how far it has faded. A stream
+	 * starting shows the working status at once. A stream ending starts a
+	 * 750ms clock: the status sinks into the bar background for the first
+	 * half, then the user's segments rise out of it.
+	 */
+	const resolveWorkingFrame = (live: string | undefined): { working: string | undefined; leftFade?: number } => {
+		const now = Date.now();
+		const liveShown = live !== undefined;
+		if (liveShown) lastWorkingText = live;
+		if (liveShown !== workingShown) {
+			workingShown = liveShown;
+			if (liveShown) {
+				// Instant cut in, and it cancels any fade-out still running.
+				workingFade = undefined;
+			} else {
+				workingFade = { start: now };
+				startWorkingFadeTimer();
+			}
+		}
+		if (!workingFade) return { working: live };
+		const half = WORKING_FADE_MS / 2;
+		const elapsed = now - workingFade.start;
+		if (elapsed >= WORKING_FADE_MS) {
+			workingFade = undefined;
+			return { working: live };
+		}
+		const outgoing = elapsed < half;
+		const leftFade = easeFade(outgoing ? 1 - elapsed / half : (elapsed - half) / half);
+		return { working: outgoing ? lastWorkingText : undefined, leftFade };
+	};
 
 	const rateMonitor = new TokenRateMonitor(requestRender);
 	rateMonitor.attach(pi);
@@ -90,6 +163,7 @@ export default function (pi: ExtensionAPI) {
 
 	registerSettingsCommand(pi, state, builder, () => {
 		syncRainbow();
+		syncEmbed();
 		requestRender();
 	});
 
@@ -127,16 +201,20 @@ export default function (pi: ExtensionAPI) {
 		const rainbowOn = rainbowActive();
 		const box = theme.getBox(effective.borderStyle);
 		const painters = makeBoxPainters({ rainbowOn, rainbow, box, width, bottomIdx, flat: border });
+		// The layout truncates the status to fit, so it is rendered at full width here.
+		const live = effective.embedWorkingStatus ? embeddedWorkingStatus?.(innerWidth) || undefined : undefined;
+		const { working, leftFade } = resolveWorkingFrame(live);
 		const bar = buildStatusLine(
 			innerWidth,
-			segCtx,
+			{ ...segCtx, workingStatus: working },
 			effective,
 			painters.gapColor,
 			{
-				left: effective.leftSegments,
+				left: topLeftSegments(effective, working !== undefined),
 				right: effective.rightSegments,
 			},
 			{ col: 3, row: 0 },
+			{ leftFade },
 		);
 		// Leading spacer row: keeps the transcript from sitting flush on the box.
 		const out: string[] = ["", renderBoxRow(painters, bar, 0, width, box.topLeft, box.topRight)];
@@ -166,9 +244,29 @@ export default function (pi: ExtensionAPI) {
 	const wrapFactory = (inner: EditorFactory | undefined): EditorFactory => {
 		return (tui, editorTheme, keybindings) => {
 			activeTui = tui;
-			const editor = inner
-				? inner(tui, editorTheme, keybindings)
-				: new CustomEditor(tui, editorTheme, keybindings);
+			let editor: ReturnType<EditorFactory>;
+			if (inner) {
+				// A wrapped third-party editor is not opted in: pi keeps its
+				// standalone working row for it.
+				editor = inner(tui, editorTheme, keybindings);
+				activeEditor = undefined;
+				embeddedWorkingStatus = undefined;
+			} else {
+				const own = new CustomEditor(tui, editorTheme, keybindings, {
+					embedWorkingStatus: state.effective.embedWorkingStatus,
+				});
+				// Capture the host's indicator on its way in; renderBoxed draws it
+				// into the top bar since the inner top border (lines[0]) is discarded.
+				if (typeof own.setWorkingStatusIndicator === "function") {
+					const setIndicator = own.setWorkingStatusIndicator.bind(own);
+					own.setWorkingStatusIndicator = indicator => {
+						embeddedWorkingStatus = indicator ? width => indicator.renderInBorder(width) : undefined;
+						setIndicator(indicator);
+					};
+				}
+				activeEditor = own;
+				editor = own;
+			}
 			const innerRender = editor.render.bind(editor);
 			let boxRenderFailed = false;
 			editor.render = width => {
@@ -266,6 +364,7 @@ export default function (pi: ExtensionAPI) {
 		rateMonitor.enable();
 		syncRainbow();
 		ensureInstalled();
+		syncEmbed();
 		ensureFooterPatched();
 		ensureTimer ??= setInterval(() => {
 			ensureInstalled();
@@ -300,6 +399,12 @@ export default function (pi: ExtensionAPI) {
 		restoreFooterLayout = undefined;
 		ourFactory = undefined;
 		wrappedFactory = undefined;
+		activeEditor = undefined;
+		embeddedWorkingStatus = undefined;
+		stopWorkingFadeTimer();
+		workingFade = undefined;
+		workingShown = false;
+		lastWorkingText = undefined;
 		activeTui = undefined;
 		activeCtx = undefined;
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@underactive/pi-topping-statusline",
-	"version": "0.1.4",
+	"version": "0.2.0",
 	"description": "oh-my-pi's powerline statusline as a pi extension with some customizations",
 	"keywords": [
 		"pi-package",
@@ -45,9 +45,10 @@
 		"@earendil-works/pi-tui": "*"
 	},
 	"devDependencies": {
-		"@earendil-works/pi-ai": "0.84.4",
-		"@earendil-works/pi-coding-agent": "0.84.4",
-		"@earendil-works/pi-tui": "0.84.4",
+		"@earendil-works/pi-ai": "0.85.0",
+		"@earendil-works/pi-coding-agent": "0.85.0",
+		"@earendil-works/pi-server": "0.85.0",
+		"@earendil-works/pi-tui": "0.85.0",
 		"@types/node": "^22.0.0",
 		"typescript": "^5.7.0"
 	}

package/src/context.ts

@@ -63,7 +63,7 @@ function deriveContextUsage(ctx: ExtensionContext | undefined): {
 	const usage = ctx?.getContextUsage();
 	const contextWindow = usage?.contextWindow ?? ctx?.model?.contextWindow ?? 0;
 	const tokens = usage?.tokens ?? undefined;
-	const percent = usage ? usage.percent : contextWindow > 0 && tokens != null ? (tokens / contextWindow) * 100 : null;
+	const percent = usage ? usage.percent : null;
 	return { contextWindow, tokens, percent };
 }
 

package/src/layout.ts

@@ -1,15 +1,20 @@
 /**
  * The bar layout engine, ported from oh-my-pi component.ts #buildStatusLine.
  *
- * Overflow strategy (in order): drop right segments right-to-left, shrink the
- * elastic `path` segment down to ~8 cells, drop left segments end-first while
- * protecting `path`. The gap between the two groups is filled with the
+ * 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
  * 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.
  */
-import { visibleWidth } from "@earendil-works/pi-tui";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { renderSegment } from "./segments.js";
 import { getSeparator } from "./separators.js";
 import { theme } from "./theme.js";
@@ -58,6 +63,7 @@ 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 } = {},
 ): string {
 	const separatorDef = getSeparator(settings.separator);
 
@@ -112,6 +118,19 @@ export function buildStatusLine(
 			right.pop();
 			rightWidth = rightGroupWidth(right);
 		}
+		// The working status absorbs overflow first so the Pi symbol beside it
+		// survives on narrow terminals.
+		const workingIdx = leftSegIds.indexOf("working");
+		if (workingIdx >= 0 && totalWidth() > width) {
+			const available = visibleWidth(left[workingIdx]) - (totalWidth() - width);
+			if (available >= 1) {
+				left[workingIdx] = truncateToWidth(left[workingIdx], available, "");
+			} else {
+				left.splice(workingIdx, 1);
+				leftSegIds.splice(workingIdx, 1);
+			}
+			leftWidth = leftGroupWidth(left);
+		}
 		// Shrink path before dropping left segments — path is the only elastic segment
 		const pathIdx = leftSegIds.indexOf("path");
 		if (pathIdx >= 0 && totalWidth() > width) {
@@ -137,13 +156,25 @@ export function buildStatusLine(
 		}
 	}
 
-	const renderGroup = (parts: string[], direction: "left" | "right"): string => {
+	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);
+		} else {
+			body = parts.join(sepText);
+		}
 		let content = bgAnsi + fgAnsi;
-		content += ` ${parts.join(` ${sepAnsi}${sep}${fgAnsi} `)} `;
+		content += ` ${body} `;
 		content += "\x1b[0m";
 
 		if (capLeft) content = `${capPrefix}${capLeft}\x1b[0m${content}`;
@@ -151,7 +182,7 @@ export function buildStatusLine(
 		return content;
 	};
 
-	const leftGroup = renderGroup(left, "left");
+	const leftGroup = renderGroup(left, "left", leftSegIds[0] === "pi" ? 1 : 0);
 	const rightGroup = renderGroup(right, "right");
 	if (!leftGroup && !rightGroup) return "";
 

package/src/segments.ts

@@ -295,6 +295,20 @@ const scrollHintSegment: StatusLineSegment = {
 	},
 };
 
+/**
+ * Pi's embedded working indicator (spinner + message), already colored by the
+ * host, so it is passed through verbatim. The layout truncates it, without an
+ * ellipsis, when it overflows, mirroring pi's own border rendering.
+ */
+const workingSegment: StatusLineSegment = {
+	id: "working",
+	render(ctx) {
+		const status = ctx.workingStatus;
+		if (!status) return INVISIBLE;
+		return { content: status, visible: true };
+	},
+};
+
 /** Context bar + stats — related parts joined by a space, not the group separator. */
 const contextGraphSegment: StatusLineSegment = {
 	id: "context_graph",
@@ -351,6 +365,7 @@ export const SEGMENTS: Record<StatusLineSegmentId, StatusLineSegment> = {
 	feeds: feedsSegment,
 	context_graph: contextGraphSegment,
 	scroll_hint: scrollHintSegment,
+	working: workingSegment,
 };
 
 export function renderSegment(id: StatusLineSegmentId, ctx: SegmentContext): RenderedSegment {

package/src/settings-menu.ts

@@ -19,6 +19,7 @@ import {
 	saveSettings,
 	sanitizeFeeds,
 	SEPARATORS,
+	topLeftSegments,
 	type SettingsState,
 } from "./settings.js";
 import { theme, type BorderStyle, type SymbolPreset } from "./theme.js";
@@ -140,6 +141,11 @@ function buildSections(settings: StatusLineSettings): MenuSection[] {
 				label: "Animate rainbow border",
 				value: settings.rainbowAnimation ?? true,
 			},
+			{
+				id: "embedWorkingStatus",
+				label: "Embed 'Working' indicator",
+				value: settings.embedWorkingStatus ?? false,
+			},
 		],
 	};
 	return [
@@ -170,6 +176,7 @@ function valuesToSettings(values: Record<string, MenuValue>): StatusLineSettings
 		feeds: sanitizeFeeds(feedsFromValues(values)),
 		rainbowBorder: values.rainbowBorder === true,
 		rainbowAnimation: values.rainbowAnimation === true,
+		embedWorkingStatus: values.embedWorkingStatus === true,
 	};
 }
 
@@ -184,6 +191,8 @@ const CANNED_STATS = "↑ 12.4K ↓ 3.1K R 148K W 12K 92.3% $0.42";
 const CANNED_GIT = { branch: "main", status: { staged: 1, unstaged: 2, untracked: 3 } };
 const CANNED_PERCENT = 42;
 const CANNED_WINDOW = 200_000;
+/** What pi's border indicator looks like mid-stream with pi-topping's loader installed. */
+const CANNED_WORKING = "⠙ Mulling ⢾⣿⣿⣿⣿⣿⢾⢾  28 tps · 11s · ↓ 316 tokens";
 
 /** Fill any feed the live session has no entry for, so the preview stays legible. */
 function cannedFeedData(
@@ -266,13 +275,14 @@ class StatusLinePreview {
 				bottomIdx,
 				flat: s => this.#uiTheme.fg("border", s),
 			});
+			const embedOn = effective.embedWorkingStatus;
 			const top = buildStatusLine(
 				barWidth,
-				ctx,
+				embedOn ? { ...ctx, workingStatus: this.#uiTheme.fg("border", CANNED_WORKING) } : ctx,
 				effective,
 				painters.gapColor,
 				{
-					left: effective.leftSegments,
+					left: topLeftSegments(effective, embedOn),
 					right: effective.rightSegments,
 				},
 				{ col: 3, row: 0 },
@@ -312,7 +322,7 @@ export function registerSettingsCommand(
 	onChange: () => void,
 ): void {
 	pi.registerCommand("topping-statusline-settings", {
-		description: "Configure transparent segments, statusline segments, separator, symbols, border style, feeds, and rainbow border animation",
+		description: "Configure transparent segments, statusline segments, separator, symbols, border style, feeds, rainbow border animation, and the embedded working indicator",
 		handler: async (_args, ctx: ExtensionCommandContext) => {
 			if (ctx.mode !== "tui") {
 				ctx.ui.notify("/topping-statusline-settings requires TUI mode", "error");

package/src/settings.ts

@@ -93,6 +93,7 @@ function loadSettings(): StatusLineSettings {
 		if (raw.feeds !== undefined) settings.feeds = sanitizeFeeds(raw.feeds);
 		if (typeof raw.rainbowBorder === "boolean") settings.rainbowBorder = raw.rainbowBorder;
 		if (typeof raw.rainbowAnimation === "boolean") settings.rainbowAnimation = raw.rainbowAnimation;
+		if (typeof raw.embedWorkingStatus === "boolean") settings.embedWorkingStatus = raw.embedWorkingStatus;
 		return settings;
 	} catch {
 		// Missing or corrupt settings.json falls back to defaults.
@@ -155,6 +156,7 @@ export function resolveEffectiveSettings(settings: StatusLineSettings): Effectiv
 		bottomRightSegments,
 		rainbowBorder: settings.rainbowBorder ?? true,
 		rainbowAnimation: settings.rainbowAnimation ?? true,
+		embedWorkingStatus: settings.embedWorkingStatus ?? false,
 		includes,
 		segmentOptions: {
 			model: { showModel: seg.model, showProvider: seg.provider, showThinking: seg.thinking },
@@ -165,6 +167,16 @@ export function resolveEffectiveSettings(settings: StatusLineSettings): Effectiv
 	};
 }
 
+/**
+ * The top-left group for one frame. While pi's working status is embedded,
+ * it stands in for every left segment except the leading Pi symbol, so the
+ * symbol and its chevron never move when a stream starts or ends.
+ */
+export function topLeftSegments(effective: EffectiveStatusLineSettings, working: boolean): StatusLineSegmentId[] {
+	if (!working) return effective.leftSegments;
+	return effective.leftSegments[0] === "pi" ? ["pi", "working"] : ["working"];
+}
+
 export interface SettingsState {
 	settings: StatusLineSettings;
 	effective: EffectiveStatusLineSettings;

package/src/tests/working.test.ts

@@ -0,0 +1,140 @@
+/**
+ * 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.
+ */
+import assert from "node:assert/strict";
+import test from "node:test";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { buildStatusLine } from "../layout.ts";
+import { SEGMENTS } from "../segments.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 });
+
+function ctxWith(workingStatus: string | undefined): SegmentContext {
+	return {
+		options: EFFECTIVE.segmentOptions,
+		model: undefined,
+		thinkingLevel: "off",
+		cwd: "/tmp/pi-topping-statusline-tests",
+		sessionName: undefined,
+		contextPercent: null,
+		contextTokens: 0,
+		contextWindow: 0,
+		git: { branch: null, status: null, pr: null },
+		worktree: null,
+		scrollHint: undefined,
+		piStats: undefined,
+		tokenRate: undefined,
+		feedData: undefined,
+		workingStatus,
+	};
+}
+
+test("working segment renders the host text verbatim", () => {
+	const status = "\x1b[36m⠙ Working\x1b[39m";
+	assert.deepEqual(SEGMENTS.working.render(ctxWith(status)), { content: status, visible: true });
+});
+
+test("working segment is invisible when idle", () => {
+	assert.equal(SEGMENTS.working.render(ctxWith(undefined)).visible, false);
+	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"]);
+	assert.deepEqual(topLeftSegments(EFFECTIVE, false), EFFECTIVE.leftSegments);
+	assert.ok(EFFECTIVE.leftSegments.length > 2, "default left group has more than pi + one segment");
+});
+
+test("topLeftSegments yields only working when the pi symbol is off", () => {
+	const noPi = resolveEffectiveSettings({ segments: { pi: false } });
+	assert.deepEqual(topLeftSegments(noPi, true), ["working"]);
+});
+
+test("embedWorkingStatus resolves off by default and on when set", () => {
+	assert.equal(resolveEffectiveSettings({}).embedWorkingStatus, false);
+	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"],
+		right: [],
+	});
+	const plain = stripAnsi(bar);
+	const piAt = plain.indexOf(theme.icon.pi);
+	const statusAt = plain.indexOf("⠙ Mulling 28 tps");
+	assert.ok(piAt >= 0, "pi symbol present");
+	assert.ok(statusAt > piAt, "status follows the pi symbol");
+	assert.equal(visibleWidth(bar), 80);
+});
+
+test("narrow widths truncate the status without an ellipsis and keep the pi symbol", () => {
+	const status = "⠙ Mulling ⣾⣿⣿⣿⣿⣿⣾⣾  28 tps · 11s · ↓ 316 tokens";
+	const bar = buildStatusLine(20, ctxWith(status), EFFECTIVE, noGap, { left: ["pi", "working"], 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("…"), "no ellipsis");
+	assert.ok(!plain.includes("tokens"), "status tail is cut");
+	assert.equal(visibleWidth(bar), 20);
+});
+
+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"],
+			right: [],
+		});
+		assert.equal(visibleWidth(bar), width, `width ${width}`);
+		assert.ok(stripAnsi(bar).includes(theme.icon.pi), `pi symbol at width ${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 plain = stripAnsi(bar);
+	assert.ok(plain.includes(theme.icon.pi));
+	assert.ok(!plain.includes("⠙"));
+});
+
+test("fadeAnsi leaves text untouched at full opacity and sinks colors into the bar at zero", () => {
+	const styled = "\x1b[38;2;254;188;56mA\x1b[39m \x1b[48;5;70mB\x1b[49m";
+	assert.equal(theme.fadeAnsi(styled, 1), styled);
+	const sunk = theme.fadeAnsi(styled, 0);
+	assert.equal(
+		sunk,
+		`${theme.getFgAnsi("statusLineBg")}A${theme.getFgAnsi("statusLineBg")} ${theme.getBgAnsi()}B\x1b[49m`,
+	);
+});
+
+test("easeFade is monotonic and pinned at both ends", () => {
+	assert.equal(easeFade(0), 0);
+	assert.equal(easeFade(1), 1);
+	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", () => {
+	const status = "\x1b[38;2;10;200;30m⠙ Working\x1b[39m";
+	const groups: { left: StatusLineSegmentId[]; right: StatusLineSegmentId[] } = { left: ["pi", "working"], right: [] };
+	const origin = { col: 0, row: 0 };
+	const build = (fade?: number) =>
+		buildStatusLine(60, ctxWith(status), EFFECTIVE, noGap, groups, origin, { leftFade: fade });
+	const solid = build();
+	const faded = build(0.2);
+	assert.equal(visibleWidth(faded), 60);
+	assert.equal(stripAnsi(faded), stripAnsi(solid));
+	assert.ok(!faded.includes("10;200;30"), "status color blended");
+	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);
+});

package/src/theme.ts

@@ -249,6 +249,18 @@ export function parseHex(hex: string): [number, number, number] | undefined {
 /** Number of discrete, eased shades used for the token-rate and feed fades (pi-topping). */
 export const FADE_SHADE_COUNT = 5;
 
+/** Stand-in for the terminal's default foreground when a fade must recolor it. */
+const DEFAULT_FG_RGB: [number, number, number] = [204, 204, 204];
+
+/** Every SGR color the layout or a segment can emit: truecolor, 256-color, or the default-fg reset. */
+const SGR_COLOR_RE = /\x1b\[(38|48);2;(\d+);(\d+);(\d+)m|\x1b\[(38|48);5;(\d+)m|\x1b\[39m/g;
+
+/** Raised-cosine ease shared by the discrete and continuous fades. */
+export function easeFade(progress: number): number {
+	const clamped = Math.max(0, Math.min(1, progress));
+	return 0.5 * (1 - Math.cos(Math.PI * clamped));
+}
+
 /** Resolve an xterm-256 palette index to RGB (16–231 cube, 232–255 grayscale). */
 function xterm256ToRgb(n: number): [number, number, number] {
 	if (n >= 232) {
@@ -358,7 +370,7 @@ class StatusTheme {
 	fadeFg(from: StatusColor, to: StatusColor, shade: number, text: string): string {
 		const clamped = Math.max(0, Math.min(FADE_SHADE_COUNT - 1, Math.floor(shade)));
 		const progress = (clamped + 1) / FADE_SHADE_COUNT;
-		const eased = 0.5 * (1 - Math.cos(Math.PI * progress));
+		const eased = easeFade(progress);
 		const a = colorValueToRgb(FG_COLORS[from]);
 		const b = colorValueToRgb(FG_COLORS[to]);
 		const r = Math.round(a[0] * (1 - eased) + b[0] * eased);
@@ -367,6 +379,35 @@ class StatusTheme {
 		const ansi = rgbToFgAnsi(r, g, bl, this.#mode);
 		return `${ansi}${text}\x1b[39m`;
 	}
+
+	/**
+	 * Blend every color already present in `text` toward the bar background
+	 * by `opacity` (1 = untouched, 0 = fully sunk into the background), so a
+	 * fully styled group can fade as a whole without re-rendering its segments.
+	 * Default-foreground resets are recolored from a neutral stand-in so plain
+	 * labels fade alongside their colored neighbors; background resets (49)
+	 * stay put so transparent bars keep the terminal's own background.
+	 */
+	fadeAnsi(text: string, opacity: number): string {
+		const alpha = Math.max(0, Math.min(1, opacity));
+		if (alpha >= 1) return text;
+		const target = colorValueToRgb(STATUS_LINE_BG);
+		const mode = this.#mode;
+		return text.replace(SGR_COLOR_RE, (_m, tcPlane, r, g, b, ixPlane, index) => {
+			let plane = "38";
+			let rgb: [number, number, number] = DEFAULT_FG_RGB;
+			if (tcPlane) {
+				plane = tcPlane;
+				rgb = [Number(r), Number(g), Number(b)];
+			} else if (ixPlane) {
+				plane = ixPlane;
+				rgb = xterm256ToRgb(Number(index));
+			}
+			const mix = (i: number) => Math.round(rgb[i] * alpha + target[i] * (1 - alpha));
+			const fg = rgbToFgAnsi(mix(0), mix(1), mix(2), mode);
+			return plane === "38" ? fg : fg.replace("\x1b[38;", "\x1b[48;");
+		});
+	}
 }
 
 export const theme = new StatusTheme();

package/src/types.ts

@@ -18,7 +18,8 @@ export type StatusLineSegmentId =
 	| "token_rate"
 	| "feeds"
 	| "context_graph"
-	| "scroll_hint";
+	| "scroll_hint"
+	| "working";
 
 /**
  * A feed the statusline subscribes to: custom session entries published by
@@ -73,6 +74,8 @@ 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. */
+	embedWorkingStatus?: boolean;
 }
 
 /** Resolved per-segment render options; resolveEffectiveSettings always fills them. */
@@ -105,6 +108,7 @@ export interface EffectiveStatusLineSettings {
 	segmentOptions: StatusLineSegmentOptions;
 	rainbowBorder: boolean;
 	rainbowAnimation: boolean;
+	embedWorkingStatus: boolean;
 	includes: SegmentIncludes;
 }
 
@@ -133,6 +137,11 @@ export interface SegmentContext {
 	scrollHint: string | undefined;
 	/** 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.
+	 */
+	workingStatus?: string;
 	/** Live tok/s display state, when this frame needs it. */
 	tokenRate: TokenRateDisplay | undefined;
 	/**