gentle-pi 3.7.0 → 4.0.0

package/tests/shell-bar.test.ts

@@ -1,6 +1,7 @@
 import assert from "node:assert/strict";
-import test from "node:test";
+import test, { after, before, type TestContext } from "node:test";
 import { visibleWidth } from "@earendil-works/pi-tui";
+import { DEFAULT_VISUAL_SETTINGS } from "../lib/visual-customization-policy.ts";
 import {
 	buildShellHeaderModel,
 	formatCost,
@@ -8,13 +9,20 @@ import {
 	gaugeTone,
 	renderGauge,
 	renderShellBar,
+	renderShellBottomOnlyBar,
+	renderShellBelowInputFloat,
 	renderShellHeaderBar,
+	renderShellHeaderChrome,
 	renderShellHeaderRule,
 	renderShellSidebarBar,
 	shellEnabled,
+	shellHeaderUsageHit,
 	type ShellBarModel,
 	type ShellBarTheme,
 } from "../lib/shell-bar.ts";
+import { REVIEW_SCOPE_UNAVAILABLE } from "../lib/review-sidebar-state.ts";
+import { stripAnsi } from "../lib/terminal-theme.ts";
+import { CARD_STYLE, cardStyle, setCardStyle, type CardStyle } from "../lib/shell-card.ts";
 
 // The Gentle Shell bar replaces pi's three-line footer with one line of
 // segments. Rendering is pure so it can be verified without a TUI.
@@ -37,6 +45,42 @@ const plainTheme: ShellBarTheme = {
 	},
 };
 
+// The card style defaults to float; these assertions pin the outlined (neon)
+// panels unless a test switches the style itself.
+const initialCardStyle = cardStyle();
+before(() => setCardStyle(CARD_STYLE.NEON));
+after(() => setCardStyle(initialCardStyle));
+
+function useCardStyle(t: TestContext, style: CardStyle): void {
+	const found = cardStyle();
+	t.after(() => setCardStyle(found));
+	setCardStyle(style);
+}
+
+const BG_OPEN = "\x1b[48;5;22m";
+const BG_CLOSE = "\x1b[49m";
+
+/** The same theme with a background, so the float style applies (without one panels keep the frame). */
+function withBackground<T extends object>(theme: T): T & { bg(color: string, text: string): string } {
+	return { ...theme, bg: (_color: string, text: string) => `${BG_OPEN}${text}${BG_CLOSE}` };
+}
+
+/** Float panel rows: a painted panel inside transparent one-column margins, between padding rows that keep the accent bar. */
+function assertFloatRows(lines: readonly string[], width: number): void {
+	for (const line of lines) {
+		assert.equal(visibleWidth(line), width, `"${stripAnsi(line)}" is not ${width} wide`);
+		assert.ok(line.startsWith(` ${BG_OPEN}`) && line.endsWith(`${BG_CLOSE} `), `painted inside the margins: ${JSON.stringify(line)}`);
+	}
+	const padding = ` ▎${" ".repeat(width - 3)} `;
+	assert.equal(stripAnsi(lines[0]!), padding, "a padding row with the accent bar sits above the header");
+	assert.equal(stripAnsi(lines.at(-1)!), padding, "a padding row with the accent bar replaces the bottom rule");
+}
+
+/** The text of a body row, without the neon side rails or the float accent bar. */
+function bodyText(row: string): string {
+	return stripAnsi(row).replace(/^ ?[│▎] /u, "").replace(/ ?│? ?$/u, "").trimEnd();
+}
+
 function model(overrides: Partial<ShellBarModel> = {}): ShellBarModel {
 	return {
 		cwd: "~/work/gentle-pi",
@@ -55,6 +99,53 @@ function model(overrides: Partial<ShellBarModel> = {}): ShellBarModel {
 	};
 }
 
+test("visual visibility hides only selected optional status segments", () => {
+	const settings = { ...DEFAULT_VISUAL_SETTINGS, visibility: { ...DEFAULT_VISUAL_SETTINGS.visibility, changes: false, modelDetails: false, usageCost: false } };
+	const data = model({ changes: { files: 2, added: 1, deleted: 1 } });
+	assert.doesNotMatch(renderShellBar(data, plainTheme, 160, settings).join(""), /gpt-5\.5|ctx|\$9\.49/);
+	assert.doesNotMatch(renderShellSidebarBar(data, plainTheme, 50, settings).join(""), /Changes|2 files/);
+	assert.doesNotMatch(renderShellHeaderBar(buildShellHeaderModel(data), plainTheme, 160, undefined, settings).text, /gpt-5\.5|ctx|\$9\.49|usage/);
+});
+
+test("Status title stays plain without an active review", () => {
+	const lines = renderShellSidebarBar(model(), plainTheme, 60);
+	assert.match(lines[0], /^╭─ ✿ Status ─+╮$/);
+	assert.doesNotMatch(lines.slice(1).join("\n"), /🌹 RDD/);
+});
+
+test("Status title stays plain above the review lifecycle block", () => {
+	const lines = renderShellSidebarBar(model({ review: { state: "reviewing", scope: "first.ts +2 files" } }), plainTheme, 60);
+	assert.match(lines[0], /^╭─ ✿ Status ─+╮$/);
+	assert.match(lines.slice(1).join("\n"), /🌹 RDD[\s\S]*Reviewers running…[\s\S]*first\.ts \+2 files/);
+});
+
+test("review lifecycle block omits the scope line when the candidate scope is unknown", () => {
+	const known = renderShellSidebarBar(model({ review: { state: "checking", scope: "first.ts" } }), plainTheme, 60);
+	const unknown = renderShellSidebarBar(model({ review: { state: "checking", scope: REVIEW_SCOPE_UNAVAILABLE } }), plainTheme, 60);
+	const text = unknown.join("\n");
+	assert.match(text, /🌹 RDD[\s\S]*Updating…/);
+	assert.doesNotMatch(text, /Candidate scope unavailable/);
+	assert.equal(unknown.length, known.length - 1);
+});
+
+test("rdd visibility hides only the review lifecycle block", () => {
+	const data = model({ review: { state: "reviewing", scope: "first.ts +2" }, changes: { files: 2, added: 1, deleted: 1 } });
+	assert.match(renderShellSidebarBar(data, plainTheme, 60, DEFAULT_VISUAL_SETTINGS).join("\n"), /🌹 RDD[\s\S]*Reviewers running…/);
+	const hidden = renderShellSidebarBar(data, plainTheme, 60, { ...DEFAULT_VISUAL_SETTINGS, visibility: { ...DEFAULT_VISUAL_SETTINGS.visibility, rdd: false } }).join("\n");
+	assert.doesNotMatch(hidden, /🌹 RDD|Reviewers running|first\.ts \+2 files/);
+	assert.match(hidden, /Changes[\s\S]*2 files/);
+});
+
+test("Status and review lifecycle block respect terminal width", () => {
+	for (const width of [8, 12, 16, 20, 32, 60]) {
+		for (const review of [undefined, { state: "reviewing" as const, scope: "first.ts +2 files" }, { state: "approved" as const, scope: REVIEW_SCOPE_UNAVAILABLE }]) {
+			const lines = renderShellSidebarBar(model({ review }), plainTheme, width);
+			for (const line of lines) assert.ok(visibleWidth(line) <= width, `${width}: ${line}`);
+			if (width >= 20) assert.match(lines[0], /^╭─ ✿ Status ─+╮$/);
+		}
+	}
+});
+
 test("renderGauge fills cells proportionally to the percentage", () => {
 	assert.equal(renderGauge(45, 8), "▰▰▰▰▱▱▱▱");
 	assert.equal(renderGauge(0, 8), "▱▱▱▱▱▱▱▱");
@@ -435,3 +526,293 @@ test("renderShellHeaderRule paints one full-width line in the editor frame color
 	assert.equal(renderShellHeaderRule(plainTheme, 0), "");
 	assert.equal(renderShellHeaderRule(plainTheme, -3), "", "negative widths clamp to an empty rule");
 });
+
+test("the sidebar Status card in the float style is a float panel two rows taller than neon, with a separator row after the header", (t) => {
+	const theme = withBackground(plainTheme);
+	const neon = renderShellSidebarBar(model({ review: { state: "reviewing", scope: "first.ts +2 files" } }), theme, 60);
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	const float = renderShellSidebarBar(model({ review: { state: "reviewing", scope: "first.ts +2 files" } }), theme, 60);
+	assert.equal(float.length, neon.length + 2);
+	assert.equal(stripAnsi(float[1]!), ` ▎ ✿ Status${" ".repeat(49)}`);
+	assert.equal(stripAnsi(float[2]!), ` ▎${" ".repeat(57)} `, "a blank separator row follows the header");
+	assertFloatRows(float, 60);
+	assert.deepEqual(float.slice(3, -1).map(bodyText), neon.slice(1, -1).map(bodyText));
+});
+
+// The float top bar has full-width painted padding above and below its
+// content, followed by a transparent bottom edge. Neon keeps two rows.
+
+// The left inset before the header content.
+const FLOAT_HEADER_OFFSET = 2;
+// Both insets around the content.
+const FLOAT_HEADER_CHROME = 4;
+
+test("renderShellHeaderBar in the float style is one full-width background row", (t) => {
+	const theme = withBackground(plainTheme);
+	const header = buildShellHeaderModel(model({ usage: USAGE_TWO_WINDOWS }));
+	// Without a background the header keeps the neon cascade, even in the float style.
+	const neonInner = renderShellHeaderBar(header, plainTheme, 140 - FLOAT_HEADER_CHROME, "alt+u");
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	const float = renderShellHeaderBar(header, theme, 140, "alt+u");
+	assert.equal(float.text.split("\n").length, 1, "the header stays one row tall");
+	assert.equal(visibleWidth(float.text), 140);
+	// The background reaches both edges: no side rules and no unpainted cell.
+	assert.ok(float.text.startsWith(`${BG_OPEN}  `) && float.text.endsWith(`${BG_OPEN} ${BG_CLOSE}`), `painted edge to edge: ${JSON.stringify(float.text)}`);
+	assert.equal(stripAnsi(float.text), `  ${neonInner.text}  `);
+});
+
+test("renderShellHeaderBar draws no float side rules", (t) => {
+	const header = buildShellHeaderModel(model({ usage: USAGE_TWO_WINDOWS }));
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	const { text } = renderShellHeaderBar(header, withBackground(taggedTheme), 140, "alt+u");
+	assert.ok(!text.includes("│"), `no side rules: ${JSON.stringify(text.slice(0, 40))}`);
+});
+
+test("renderShellHeaderBar shifts the float usage span past its two-column inset", (t) => {
+	const theme = withBackground(plainTheme);
+	const header = buildShellHeaderModel(model({ usage: USAGE_TWO_WINDOWS }));
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	for (const width of [140, 100, 90]) {
+		const { text, usageSpan } = renderShellHeaderBar(header, theme, width, "alt+u");
+		const neonInner = renderShellHeaderBar(header, plainTheme, width - FLOAT_HEADER_CHROME, "alt+u");
+		assert.deepEqual(usageSpan, neonInner.usageSpan && { start: neonInner.usageSpan.start + FLOAT_HEADER_OFFSET, end: neonInner.usageSpan.end + FLOAT_HEADER_OFFSET });
+		if (!usageSpan) continue;
+		const plain = stripAnsi(text);
+		assert.match(plain.slice(usageSpan.start, usageSpan.end), /^usage/);
+		assert.equal(usageSpan.end, visibleWidth(plain) - FLOAT_HEADER_OFFSET, "the usage segment ends before the right inset");
+	}
+});
+
+test("renderShellHeaderRule in the float style closes the tab with a top-hugging edge line", (t) => {
+	const theme = withBackground(taggedTheme);
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	// `▔` sits at the top of its cell, touching the tab background with no gap and no painted overshoot below it.
+	assert.equal(renderShellHeaderRule(theme, 40), `<border>${"▔".repeat(40)}</border>`);
+	assert.equal(renderShellHeaderRule(theme, 0), renderShellHeaderRule(taggedTheme, 0), "a zero width keeps the neon rule");
+});
+
+test("the float header keeps the neon output below the float minimum width or without a background", (t) => {
+	const header = buildShellHeaderModel(model({ usage: USAGE_TWO_WINDOWS }));
+	const neonNarrow = renderShellHeaderBar(header, withBackground(plainTheme), 9, "alt+u");
+	const neonWide = renderShellHeaderBar(header, plainTheme, 140, "alt+u");
+	const neonRule = renderShellHeaderRule(taggedTheme, 9);
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	assert.deepEqual(renderShellHeaderBar(header, withBackground(plainTheme), 9, "alt+u"), neonNarrow, "width < 10 falls back to neon");
+	assert.deepEqual(renderShellHeaderBar(header, plainTheme, 140, "alt+u"), neonWide, "a theme without bg falls back to neon");
+	assert.equal(renderShellHeaderRule(withBackground(taggedTheme), 9), neonRule);
+	assert.equal(renderShellHeaderRule(taggedTheme, 40), "<border>" + "─".repeat(40) + "</border>");
+});
+
+test("neon header bar and rule are byte-identical with a background-capable theme", () => {
+	const header = buildShellHeaderModel(model({ usage: USAGE_TWO_WINDOWS }));
+	for (const width of [140, 100, 60, 12]) {
+		assert.deepEqual(renderShellHeaderBar(header, withBackground(taggedTheme), width, "alt+u"), renderShellHeaderBar(header, taggedTheme, width, "alt+u"));
+		assert.equal(renderShellHeaderRule(withBackground(taggedTheme), width), "<border>" + "─".repeat(width) + "</border>");
+	}
+});
+
+test("float header chrome shares padded geometry with usage hit-testing", (t) => {
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	const header = buildShellHeaderModel(model({ usage: USAGE_TWO_WINDOWS }));
+	const theme = withBackground(plainTheme);
+	for (const width of [10, 40, 90, 100, 140, 140.9]) {
+		const chrome = renderShellHeaderChrome(header, theme, width, "alt+u");
+		const target = Math.floor(width);
+		assert.equal(chrome.headerRow, 1);
+		assert.equal(chrome.rows.length, 4, "padding, content, padding, transparent edge");
+		assert.equal(chrome.rows[0], `${BG_OPEN}${" ".repeat(target)}${BG_CLOSE}`);
+		assert.equal(chrome.rows[2], chrome.rows[0]);
+		assert.equal(chrome.rows[1], renderShellHeaderBar(header, theme, width, "alt+u").text);
+		assert.equal(chrome.rows[3], "▔".repeat(target));
+		for (const row of chrome.rows) {
+			assert.equal(visibleWidth(row), target);
+			assert.doesNotMatch(stripAnsi(row), /[│▎╭╮╰╯└┘]/u, "no side rules");
+		}
+		const span = chrome.usageSpan;
+		if (!span) {
+			assert.equal(shellHeaderUsageHit(chrome, 0, 1), false, "hidden usage never clicks");
+			continue;
+		}
+		assert.match(stripAnsi(chrome.rows[chrome.headerRow]!).slice(span.start, span.end), /^usage/);
+		for (const y of [-1, 0, 2, 3, 4]) assert.equal(shellHeaderUsageHit(chrome, span.start, y), false, `decorative row ${y}`);
+		assert.equal(shellHeaderUsageHit(chrome, span.start - 1, 1), false);
+		assert.equal(shellHeaderUsageHit(chrome, span.start, 1), true);
+		assert.equal(shellHeaderUsageHit(chrome, span.end - 1, 1), true);
+		assert.equal(shellHeaderUsageHit(chrome, span.end, 1), false, "exclusive end");
+	}
+});
+
+test("float header paints every available cell even after ANSI resets", (t) => {
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	const theme = withBackground({
+		fg: (_color: string, text: string) => `\x1b[31m${text}\x1b[0m`,
+		bold: (text: string) => `\x1b[1m${text}\x1b[m`,
+	});
+	const header = buildShellHeaderModel(model({ cwd: "directory " + "x".repeat(180) }));
+	for (const width of [10, 40, 90, 140]) {
+		const { rows } = renderShellHeaderChrome(header, theme, width, "alt+u");
+		for (const [index, row] of rows.entries()) {
+			let painted = false;
+			let columns = 0;
+			for (const token of row.split(/(\x1b\[[\d;]*m)/u)) {
+				if (token.startsWith("\x1b")) {
+					if (token === BG_OPEN) painted = true;
+					if (/^\x1b\[(?:0|49)?m$/u.test(token)) painted = false;
+				} else if (token) {
+					assert.equal(painted, index !== 3, `row ${index} at width ${width}: ${JSON.stringify(token)}`);
+					columns += visibleWidth(token);
+				}
+			}
+			assert.equal(columns, width, "background reaches both terminal edges");
+		}
+	}
+});
+
+test("float header usage clicks move to row one and reject row zero", (t) => {
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	const chrome = renderShellHeaderChrome(buildShellHeaderModel(model()), withBackground(plainTheme), 140, "alt+u");
+	assert.ok(chrome.usageSpan);
+	assert.equal(shellHeaderUsageHit(chrome, chrome.usageSpan.start, 1), true, "content row is clickable");
+	assert.equal(shellHeaderUsageHit(chrome, chrome.usageSpan.start, 0), false, "top padding is decorative");
+});
+
+test("header chrome preserves neon bytes and row-zero interactions for every fallback", (t) => {
+	const header = buildShellHeaderModel(model());
+	const theme = withBackground(plainTheme);
+	for (const width of [-3, 0, 9, 10, 90, 140]) {
+		setCardStyle(CARD_STYLE.NEON);
+		const neon = renderShellHeaderChrome(header, theme, width, "alt+u");
+		assert.deepEqual(neon.rows, [renderShellHeaderBar(header, plainTheme, width, "alt+u").text, renderShellHeaderRule(plainTheme, width)]);
+		assert.equal(neon.headerRow, 0);
+		if (neon.usageSpan) {
+			assert.equal(shellHeaderUsageHit(neon, neon.usageSpan.start, 0), true);
+			assert.equal(shellHeaderUsageHit(neon, neon.usageSpan.start, 1), false);
+		}
+		useCardStyle(t, CARD_STYLE.FLOAT);
+		for (const fallback of [
+			plainTheme,
+			{ ...plainTheme, bg: (_color: string, text: string) => text },
+			{ ...plainTheme, bg: () => { throw new Error("missing theme token"); } },
+		]) assert.deepEqual(renderShellHeaderChrome(header, fallback, width, "alt+u"), neon, "missing background falls back");
+		if (width < 10) assert.deepEqual(renderShellHeaderChrome(header, theme, width, "alt+u"), neon, "narrow fallback");
+	}
+});
+
+test("below-input float chrome mirrors only the edge and moves usage clicks to row two", (t) => {
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	const header = buildShellHeaderModel(model({ usage: USAGE_TWO_WINDOWS }));
+	const theme = withBackground(plainTheme);
+	const presentation = { ...DEFAULT_VISUAL_SETTINGS, headerPlacement: "below-input" as const };
+	for (const width of [10, 40, 90, 100, 140, 140.9]) {
+		const above = renderShellHeaderChrome(header, theme, width, "alt+u");
+		const below = renderShellHeaderChrome(header, theme, width, "alt+u", presentation);
+		assert.deepEqual(below.rows, ["▁".repeat(Math.floor(width)), ...above.rows.slice(0, 3)]);
+		assert.equal(below.headerRow, 2);
+		assert.deepEqual(below.usageSpan, above.usageSpan);
+		if (!below.usageSpan) {
+			assert.equal(shellHeaderUsageHit(below, 0, 2), false);
+			continue;
+		}
+		const { start, end } = below.usageSpan;
+		for (const y of [-1, 0, 1, 3, 4]) assert.equal(shellHeaderUsageHit(below, start, y), false);
+		assert.equal(shellHeaderUsageHit(below, start, 2), true);
+		assert.equal(shellHeaderUsageHit(below, end - 1, 2), true);
+		assert.equal(shellHeaderUsageHit(below, start - 1, 2), false);
+		assert.equal(shellHeaderUsageHit(below, end, 2), false);
+	}
+});
+
+test("below-input placement preserves neon and float fallback bytes", (t) => {
+	const header = buildShellHeaderModel(model());
+	const presentation = { ...DEFAULT_VISUAL_SETTINGS, headerPlacement: "below-input" as const };
+	useCardStyle(t, CARD_STYLE.NEON);
+	for (const width of [0, 9, 10, 100, 140]) {
+		const theme = withBackground(plainTheme);
+		const neon = renderShellHeaderChrome(header, theme, width, "alt+u");
+		const data = model({ statuses: ["mcp ok"] });
+		const bottom = renderShellBottomOnlyBar(data, theme, width, "alt+u");
+		assert.deepEqual(renderShellHeaderChrome(header, theme, width, "alt+u", presentation), neon);
+		assert.deepEqual(renderShellBottomOnlyBar(data, theme, width, "alt+u", presentation), bottom);
+		setCardStyle(CARD_STYLE.FLOAT);
+		assert.deepEqual(renderShellHeaderChrome(header, plainTheme, width, "alt+u", presentation), neon);
+		assert.deepEqual(renderShellBottomOnlyBar(data, plainTheme, width, "alt+u", presentation), bottom);
+		if (width < 10) {
+			assert.deepEqual(renderShellHeaderChrome(header, theme, width, "alt+u", presentation), neon);
+			assert.deepEqual(renderShellBottomOnlyBar(data, theme, width, "alt+u", presentation), bottom);
+		}
+		setCardStyle(CARD_STYLE.NEON);
+	}
+});
+
+test("below-input bottom-only float bar retains mirrored padding and extension statuses", (t) => {
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	const theme = withBackground(plainTheme);
+	const presentation = { ...DEFAULT_VISUAL_SETTINGS, headerPlacement: "below-input" as const };
+	for (const width of [10, 60, 80, 100]) {
+		for (const statuses of [[], ["mcp ok", "notice\nready"]]) {
+			const data = model({ usage: USAGE_TWO_WINDOWS, statuses });
+			const rows = renderShellBottomOnlyBar(data, theme, width, "alt+u", presentation);
+			const chrome = renderShellHeaderChrome(buildShellHeaderModel(data), theme, width, "alt+u", presentation);
+			assert.deepEqual(rows.slice(0, 3), chrome.rows.slice(0, 3));
+			assert.equal(rows.length, statuses.length ? 5 : 4);
+			assert.equal(rows.at(-1), chrome.rows.at(-1), "padding closes the entire group");
+			if (statuses.length) {
+				assert.match(stripAnsi(rows[3]!), width === 10 ? /^  mcp o…/ : /^  mcp ok/);
+				assert.ok(rows[3]!.startsWith(BG_OPEN), "statuses share the full-width background");
+			}
+			assert.ok(rows.every((row) => visibleWidth(row) <= width));
+		}
+	}
+});
+
+test("unified below-input float includes optional Changes and sanitized statuses inside one painted group", (t) => {
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	const theme = withBackground({ ...plainTheme, fg: (_role: string, text: string) => `\x1b[31m${text}\x1b[0m` });
+	const presentation = { ...DEFAULT_VISUAL_SETTINGS, headerPlacement: "below-input" as const };
+	const changes = { files: [{ path: "lib/live.ts", added: 3, deleted: 1, status: "modified" as const }], added: 3, deleted: 1 };
+	for (const width of [10, 40, 139, 140, 240]) {
+		for (const captured of [undefined, { files: [], added: 0, deleted: 0 }, changes]) {
+			for (const statuses of [[], ["\x1b[31mMCP\x1b[0m\nready\t now", "notice"]]) {
+				const chrome = renderShellBelowInputFloat(model({ statuses }), theme, width, "alt+u", presentation, captured)!;
+				const hasChanges = Boolean(captured?.files.length);
+				assert.equal(chrome.headerRow, hasChanges ? 3 : 2);
+				assert.equal(chrome.rows.length, 4 + Number(hasChanges) + Number(statuses.length > 0));
+				assert.equal(stripAnsi(chrome.rows[0]!), "▁".repeat(width));
+				for (const row of chrome.rows.slice(1)) {
+					let painted = false;
+					for (const token of row.split(/(\x1b\[[\d;]*m)/u)) {
+						if (token === BG_OPEN) painted = true;
+						else if (/^\x1b\[(?:0|49)?m$/u.test(token)) painted = false;
+						else if (token && !token.startsWith("\x1b")) assert.equal(painted, true, JSON.stringify(token));
+					}
+					assert.equal(visibleWidth(row), width);
+				}
+				if (width === 240 && hasChanges) assert.match(stripAnsi(chrome.rows[2]!), /^  .*lib\/live.ts/);
+				if (width >= 40 && statuses.length) assert.match(stripAnsi(chrome.rows.at(-2)!), /^  MCP ready now ⟡ notice/);
+				if (chrome.usageSpan) {
+					assert.equal(shellHeaderUsageHit(chrome, chrome.usageSpan.start, chrome.headerRow), true);
+					for (let y = 0; y < chrome.rows.length; y++) if (y !== chrome.headerRow) assert.equal(shellHeaderUsageHit(chrome, chrome.usageSpan.start, y), false);
+				}
+			}
+		}
+	}
+	const hidden = renderShellBelowInputFloat(model({ statuses: ["secret status"] }), theme, 140, "alt+u", { ...presentation, statusPlacement: "hidden", visibility: { ...presentation.visibility, changes: false } }, changes)!;
+	assert.equal(hidden.rows.length, 4);
+	assert.equal(hidden.headerRow, 2);
+	assert.doesNotMatch(stripAnsi(hidden.rows.join("\n")), /secret status|live.ts/);
+	for (const width of [9, 10]) {
+		assert.equal(renderShellBelowInputFloat(model(), plainTheme, width, "alt+u", presentation, changes), undefined);
+		if (width === 9) assert.equal(renderShellBelowInputFloat(model(), theme, width, "alt+u", presentation, changes), undefined);
+	}
+	assert.equal(renderShellBelowInputFloat(model(), theme, 140, "alt+u", DEFAULT_VISUAL_SETTINGS, changes), undefined);
+	setCardStyle(CARD_STYLE.NEON);
+	assert.equal(renderShellBelowInputFloat(model(), theme, 140, "alt+u", presentation, changes), undefined);
+});
+
+test("the narrow-layout bottom-only bar stays unchanged in the float style", (t) => {
+	const theme = withBackground(taggedTheme);
+	const data = model({ usage: USAGE_TWO_WINDOWS, statuses: ["mcp ok"] });
+	const neon = renderShellBottomOnlyBar(data, theme, 100, "alt+u");
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	assert.deepEqual(renderShellBottomOnlyBar(data, theme, 100, "alt+u"), neon);
+});