gentle-pi 3.7.0 → 4.1.0

package/tests/shell-sidebar-scroll-benchmark.test.ts

@@ -0,0 +1,255 @@
+import assert from "node:assert/strict";
+import { performance } from "node:perf_hooks";
+import test from "node:test";
+import { Container, Markdown, Spacer, TuiAltScreen, wrapTextWithAnsi, type Component, type MarkdownTheme } from "@earendil-works/pi-tui";
+import { createChatViewport } from "../node_modules/@earendil-works/pi-coding-agent/dist/modes/interactive/chat-viewport.js";
+import { installSidebar } from "../lib/shell-sidebar-layout.ts";
+import { sidebarHeader, sidebarPart } from "../lib/shell-sidebar.ts";
+
+// Diagnostic baseline, not a speed gate. Keep the document settled: the same
+// prebuilt lines and component survive every native fullscreen scroll frame.
+const theme = { fg: (_color: string, text: string) => text, bold: (text: string) => text };
+const strip = (text: string) => text.replace(/\x1b\[[0-9;?]*[A-Za-z]/g, "").replace(/\x1b\][^\x07]*\x07/g, "").trimEnd();
+const median = (samples: number[]) => {
+	const ordered = [...samples].sort((a, b) => a - b);
+	return (ordered[Math.floor((ordered.length - 1) / 2)]! + ordered[Math.floor(ordered.length / 2)]!) / 2;
+};
+const leaf = (rows: string[]): Component => ({ render: () => rows, invalidate() {} });
+
+type Fixture = ReturnType<typeof createFixture>;
+type Workload = "plain" | "ansi" | "markdown";
+const markdownTheme = Object.fromEntries([
+	"heading", "link", "linkUrl", "code", "codeBlock", "codeBlockBorder", "quote", "quoteBorder",
+	"hr", "listBullet", "bold", "italic", "strikethrough", "underline",
+].map((key) => [key, (text: string) => `\x1b[36m${text}\x1b[39m`])) as unknown as MarkdownTheme;
+
+function createFixture(columns: number, rowCount: number, sidebar: boolean, workload: Workload = "plain") {
+	const rows = Array.from({ length: rowCount }, (_, index) => `ROW-${String(index).padStart(5, "0")} settled transcript`);
+	const counts = { transcript: 0, header: 0, rail: 0, markdownMiss: 0, widthBuild: 0, lastWidth: 0 };
+	const markdown = workload === "markdown" ? new Markdown(
+		rows.map((row) => `${row} **bold** and *italic* with a longer wrapped passage for the real Markdown parser.`).join("\n\n"),
+		0, 0, markdownTheme, undefined,
+		{ transform: (source) => { counts.markdownMiss++; return source; } },
+	) : undefined;
+	const wrapped = new Map<number, string[]>();
+	const document: Component = {
+		render: (width) => {
+			counts.transcript++;
+			counts.lastWidth = width;
+			if (markdown) return markdown.render(width);
+			if (workload === "plain") return rows;
+			let result = wrapped.get(width);
+			if (!result) {
+				counts.widthBuild++;
+				result = rows.flatMap((row) => wrapTextWithAnsi(`\x1b[35m${row} ${"ANSI styled long content ".repeat(8)}\x1b[39m`, width));
+				wrapped.set(width, result);
+			}
+			return result;
+		},
+		invalidate: () => { markdown?.invalidate(); wrapped.clear(); },
+	};
+	const terminal = {
+		start() {}, stop() {}, async drainInput() {}, write() {},
+		get columns() { return columns; }, get rows() { return 24; },
+		moveBy() {}, hideCursor() {}, showCursor() {}, clearLine() {}, clearFromCursor() {}, clearScreen() {}, setTitle() {}, setProgress() {},
+		kittyProtocolActive: false, getBufferedInput() { return ""; }, hasPendingInput() { return false; },
+	} as never;
+	const above = new Container();
+	above.addChild(new Spacer(1));
+	const footer = new Container();
+	const viewport = createChatViewport({
+		document, pendingMessages: new Container(), status: new Container(), widgetsAbove: above,
+		editor: leaf(["╭─ editor ─╮", "│ prompt   │", "╰──────────╯"]),
+		widgetsBelow: new Container(), footer, scrollbar: "hidden",
+	});
+	const tui = new TuiAltScreen(terminal, false);
+	tui.setLayoutRoot(viewport.root);
+	let dispose = () => {};
+	if (sidebar) footer.addChild(sidebarPart(tui, "footer", { render: () => { counts.rail++; return ["Status card"]; }, invalidate() {} }));
+	else footer.addChild(leaf(["Status card"]));
+	// Main's narrow fallback keeps the header even without a rail. Give the
+	// width-matched fallback control the same header and native layout hook.
+	if (sidebar || columns === 100) {
+		sidebarHeader(tui, { render: (width: number) => { counts.header++; return [`HEADER ${width}`]; }, invalidate() {} });
+		dispose = installSidebar(tui, theme);
+	}
+	tui.start();
+	const render = () => {
+		// Use the real alt-screen frame pipeline, not a hand-built layout node.
+		(tui as unknown as { doRender(): void }).doRender();
+		return [...((tui as unknown as { previousScreen: string[] }).previousScreen ?? [])];
+	};
+	render(); // establish native viewport height and scroll bounds before sampling
+	return { columns, rowCount, sidebar, workload, counts, document, viewport, render, stop: () => { dispose(); tui.stop(); } };
+}
+
+function measure(fixture: Fixture, invalidate = false, anchors?: number[]) {
+	const { transcript, header, rail, markdownMiss, widthBuild } = fixture.counts;
+	fixture.viewport.transcript.scrollToEnd();
+	const maxTop = fixture.viewport.transcript.scrollTop;
+	const positions = anchors ?? [0, Math.floor(maxTop / 4), Math.floor(maxTop / 2), Math.floor(maxTop * 3 / 4), maxTop];
+	const samples: number[] = [];
+	const cpuSamples: number[] = [];
+	const screens: string[][] = [];
+	const rawScreens: string[][] = [];
+	for (let repeat = 0; repeat < 3; repeat++) {
+		for (const position of positions) {
+			fixture.viewport.transcript.scrollTo(position, { disableFollow: true });
+			if (invalidate) fixture.document.invalidate();
+			const cpuStart = process.cpuUsage();
+			const start = performance.now();
+			const rawScreen = fixture.render();
+			samples.push(performance.now() - start);
+			const cpu = process.cpuUsage(cpuStart);
+			cpuSamples.push((cpu.user + cpu.system) / 1000);
+			rawScreens.push(rawScreen);
+			screens.push(rawScreen.map(strip));
+		}
+	}
+	return {
+		positions, screens, rawScreens, samplesMs: samples.map((time) => Number(time.toFixed(3))),
+		medianMs: Number(median(samples).toFixed(3)), medianCpuMs: Number(median(cpuSamples).toFixed(3)),
+		renderCalls: { transcript: fixture.counts.transcript - transcript, header: fixture.counts.header - header, rail: fixture.counts.rail - rail,
+			markdownMiss: fixture.counts.markdownMiss - markdownMiss, widthBuild: fixture.counts.widthBuild - widthBuild },
+		contentWidth: fixture.counts.lastWidth,
+		viewportHeight: fixture.viewport.transcript.viewportHeight,
+	};
+}
+
+// At narrow widths the top header is the only status row: against the control
+// that still docks "Status card", every frame keeps the same header and
+// transcript bytes, the same spacer and editor bytes, and gives the reclaimed
+// footer row to one more transcript row.
+const DOCK_ROWS = 4; // spacer + three editor rows
+function assertNarrowOwnsStatus(narrow: string[][], control: string[][], label: string) {
+	assert.equal(narrow.length, control.length, `${label} samples the same frames`);
+	for (const [frame, screen] of narrow.entries()) {
+		const reference = control[frame]!;
+		assert.equal(screen.length, reference.length, `${label} keeps terminal height`);
+		assert.equal(strip(reference.at(-1)!), "Status card", `${label} control docks Status`);
+		assert.deepEqual(screen.slice(-DOCK_ROWS), reference.slice(-DOCK_ROWS - 1, -1), `${label} keeps spacer and editor bytes`);
+		const body = reference.length - DOCK_ROWS - 1;
+		assert.deepEqual(screen.slice(0, body), reference.slice(0, body), `${label} keeps header and transcript bytes`);
+	}
+}
+
+function transcriptRows(screen: string[]) {
+	return screen.flatMap((line) => [...line.matchAll(/ROW-\d{5} settled transcript/g)].map(([match]) => match));
+}
+
+test("characterize settled native fullscreen scroll frames with and without the sidebar", () => {
+	for (const rowCount of [120, 1200]) {
+		const fixtures = [createFixture(140, rowCount, true), createFixture(140, rowCount, false), createFixture(100, rowCount, true), createFixture(100, rowCount, false)];
+		try {
+			const desktop = measure(fixtures[0]!);
+			// The narrow sidebar reclaims the footer row, so its taller viewport has a
+			// different maxTop; the narrow control samples its exact anchors.
+			const narrow = measure(fixtures[2]!);
+			const results = [desktop, measure(fixtures[1]!, false, desktop.positions), narrow, measure(fixtures[3]!, false, narrow.positions)];
+			for (let i = 0; i < fixtures.length; i++) {
+				const fixture = fixtures[i]!;
+				const result = results[i]!;
+				assert.equal(result.screens.length, result.positions.length * 3);
+				assert.equal(result.rawScreens.length, result.screens.length);
+				assert.equal(result.renderCalls.transcript, result.positions.length * 3, "every scroll traverses the settled document");
+				for (const [frame, screen] of result.screens.entries()) {
+					assert.equal(screen.length, 24, "native fullscreen retains terminal height");
+					assert.ok(screen.some((line) => line.startsWith("╭─ editor")), "editor remains visible");
+					const visible = transcriptRows(screen);
+					assert.ok(visible.length > 0, "transcript remains visible");
+					assert.equal(visible[0], `ROW-${String(result.positions[frame % result.positions.length]).padStart(5, "0")} settled transcript`, "visible scroll anchor matches requested position");
+					if (fixture.sidebar && fixture.columns === 140) {
+						assert.ok(screen.some((line) => line.includes("Status card")), "desktop rail is painted");
+						assert.equal(screen[0], "HEADER 138");
+					} else {
+						if (fixture.columns === 100) assert.equal(screen[0], "HEADER 100", "narrow fallback retains the full-width header");
+						else assert.ok(!screen.some((line) => line.startsWith("HEADER ")), "desktop sidebar-off control has no header");
+						if (fixture.sidebar) {
+							assert.equal(screen.at(-1), "╰──────────╯", "the narrow top header owns Status and reclaims the footer row");
+							assert.ok(!screen.some((line) => line.includes("Status card")), "no second status row at narrow width");
+						} else {
+							assert.equal(screen.at(-1), "Status card", "footer stays in the native dock");
+						}
+					}
+				}
+			}
+			// Narrow installation only swaps the footer row for one more transcript row.
+			assertNarrowOwnsStatus(results[2]!.rawScreens, results[3]!.rawScreens, "narrow fallback");
+			// Desktop compositions have different geometry, but share the exact
+			// transcript rows at matching scroll anchors wherever both are visible.
+			assert.deepEqual(results[0]!.positions, results[1]!.positions);
+			for (let frame = 0; frame < results[0]!.screens.length; frame++) {
+				const on = transcriptRows(results[0]!.screens[frame]!);
+				const off = transcriptRows(results[1]!.screens[frame]!);
+				assert.deepEqual(on, off.slice(0, on.length));
+			}
+			console.log("scroll baseline", JSON.stringify(fixtures.map((fixture, index) => ({
+				rows: rowCount, columns: fixture.columns, sidebar: fixture.sidebar,
+				viewportHeight: results[index]!.viewportHeight, contentWidth: results[index]!.contentWidth,
+				medianMs: results[index]!.medianMs, medianCpuMs: results[index]!.medianCpuMs,
+				samplesMs: results[index]!.samplesMs, renderCalls: results[index]!.renderCalls,
+			}))));
+		} finally {
+			for (const fixture of fixtures) fixture.stop();
+		}
+	}
+});
+
+test("wrapped ANSI and native Markdown distinguish width composition from settled cache hits and misses", () => {
+	for (const workload of ["ansi", "markdown"] as const) {
+		for (const rowCount of [120, 1200]) {
+			// The actual desktop transcript width is discovered from the native
+			// viewport render; the no-sidebar control uses that exact width.
+			const desktop = createFixture(140, rowCount, true, workload);
+			const width = desktop.counts.lastWidth;
+			const control = createFixture(width, rowCount, false, workload);
+			const narrow = createFixture(100, rowCount, true, workload);
+			const narrowControl = createFixture(100, rowCount, false, workload);
+			const fixtures = [desktop, control, narrow, narrowControl];
+			try {
+				const desktopHit = measure(desktop);
+				const narrowHit = measure(narrow);
+				const hits = [desktopHit, measure(control, false, desktopHit.positions), narrowHit, measure(narrowControl, false, narrowHit.positions)];
+				const misses = fixtures.map((fixture, index) => measure(fixture, true, hits[index]!.positions));
+				assert.equal(width, 87, "desktop transcript geometry stays fixed");
+				assert.equal(hits[0]!.contentWidth, hits[1]!.contentWidth);
+				for (let index = 0; index < fixtures.length; index++) {
+					const hit = hits[index]!;
+					const miss = misses[index]!;
+					assert.equal(hit.renderCalls.transcript, 15);
+					assert.equal(miss.renderCalls.transcript, 15);
+					assert.equal(hit.rawScreens.length, 15);
+					assert.equal(miss.rawScreens.length, 15);
+					assert.deepEqual(hit.rawScreens, miss.rawScreens, "invalidating only the document preserves frame bytes");
+					if (workload === "markdown") {
+						assert.equal(hit.renderCalls.markdownMiss, 0, "settled Markdown is served from its instance cache");
+						assert.equal(miss.renderCalls.markdownMiss, 15, "instance invalidation forces a parse each frame");
+					} else {
+						assert.equal(hit.renderCalls.widthBuild, 0, "settled ANSI wrapping is width-cached");
+						assert.equal(miss.renderCalls.widthBuild, 15);
+					}
+				}
+				assertNarrowOwnsStatus(hits[2]!.rawScreens, hits[3]!.rawScreens, "narrow fallback");
+				assertNarrowOwnsStatus(misses[2]!.rawScreens, misses[3]!.rawScreens, "invalidated narrow fallback");
+				// Desktop header and dock are distinct; compare only the actual
+				// transcript viewport at equal width and scroll position.
+				assert.deepEqual(hits[0]!.positions, hits[1]!.positions);
+				for (const results of [hits, misses]) {
+					const height = Math.min(results[0]!.viewportHeight, results[1]!.viewportHeight);
+					const transcript = (screen: string[], start: number) => screen.slice(start, start + height).map((line) => line.slice(0, width).trimEnd());
+					for (let frame = 0; frame < results[0]!.screens.length; frame++) {
+						assert.deepEqual(transcript(results[0]!.screens[frame]!, 1), transcript(results[1]!.screens[frame]!, 0), "width-matched transcript pixels agree");
+					}
+				}
+				console.log("scroll workload", JSON.stringify(fixtures.map((fixture, index) => ({
+					workload, rows: rowCount, columns: fixture.columns, contentWidth: hits[index]!.contentWidth,
+					sidebar: fixture.sidebar, viewportHeight: hits[index]!.viewportHeight,
+					hit: { medianMs: hits[index]!.medianMs, medianCpuMs: hits[index]!.medianCpuMs, samplesMs: hits[index]!.samplesMs, calls: hits[index]!.renderCalls },
+					miss: { medianMs: misses[index]!.medianMs, medianCpuMs: misses[index]!.medianCpuMs, samplesMs: misses[index]!.samplesMs, calls: misses[index]!.renderCalls },
+				}))));
+			} finally {
+				for (const fixture of fixtures) fixture.stop();
+			}
+		}
+	}
+});

package/tests/shell-todo.test.ts

@@ -1,5 +1,5 @@
 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 {
 	applyTodo,
@@ -12,6 +12,7 @@ import {
 	todoSummary,
 	type TodoState,
 } from "../lib/shell-todo.ts";
+import { CARD_STYLE, cardStyle, setCardStyle, type CardStyle } from "../lib/shell-card.ts";
 import { stripAnsi } from "../lib/terminal-theme.ts";
 
 // Gentle Todo: a task list the model rewrites as it works. The reducer is
@@ -27,6 +28,42 @@ const plainTheme = {
 	},
 };
 
+// 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 seeded(): TodoState {
 	return applyTodo(
 		emptyTodo(),
@@ -130,6 +167,34 @@ test("todoPromptBlock lists open work with the rules, and stays silent when ther
 	assert.equal(todoPromptBlock(allDone, 0), undefined);
 });
 
+test("collapsed long tasks occupy one body line, including stale state, without losing task data", (t) => {
+	const title = "界🙂 long title ".repeat(100);
+	const note = "long description ".repeat(100);
+	for (const style of [CARD_STYLE.NEON, CARD_STYLE.FLOAT]) {
+		useCardStyle(t, style);
+		for (const status of ["in_progress", "pending", "blocked"]) {
+			const state = applyTodo(emptyTodo(), { action: "write", tasks: [{ title, note, status }] }, 1).state;
+			const snapshot = structuredClone(state);
+			for (const width of [16, 40, 70]) {
+				for (const staleTurns of [0, 4]) {
+					const rows = renderTodoCard(state, withBackground(plainTheme), width, { collapsed: true, staleTurns, scrollable: true });
+					assert.equal(rows.length, style === CARD_STYLE.FLOAT ? 5 : 3);
+					assert.ok(rows.some((row) => stripAnsi(row).includes("…")), "long text signals truncation");
+					for (const row of rows) assert.equal(visibleWidth(row), width);
+				}
+			}
+			assert.deepEqual(state, snapshot);
+		}
+	}
+});
+
+test("non-scrollable Todo caps physical wrapped rows, not task count", () => {
+	const state = applyTodo(emptyTodo(), { action: "write", tasks: [{ title: "long title ".repeat(300), status: "in_progress", note: "long note ".repeat(300) }] }, 1).state;
+	const rows = renderTodoCard(state, plainTheme, 40, { collapsed: false, staleTurns: 4 });
+	assert.ok(rows.length <= 14);
+	assert.match(stripAnsi(rows.at(-2)!), /…/);
+});
+
 test("renderTodoCard draws the framed list with status glyphs and keeps every line at width", () => {
 	const lines = renderTodoCard(seeded(), plainTheme, 60, { collapsed: false, staleTurns: 0, collapseKey: "ctrl+shift+t" });
 	for (const line of lines) assert.equal(visibleWidth(line), 60, `"${stripAnsi(line)}" is not 60 wide`);
@@ -172,8 +237,8 @@ test("renderTodoCard keeps the configured collapse shortcut in the header while
 
 	const staleCollapsed = renderTodoCard(seeded(), plainTheme, 70, { collapsed: true, staleTurns: 2, collapseKey: "ctrl+shift+t" }).map(stripAnsi);
 	assert.match(staleCollapsed[0], /^╭─ ❀ Todos ▸ Expand · 1 of 3 ─+ ctrl\+shift\+t expand ╮$/);
-	assert.match(staleCollapsed[1], /^│ stale · 2 turns +│$/);
-	assert.match(staleCollapsed[2], /^│ ◐ Fix quiet tools conflict · fixing conflict +│$/);
+	assert.equal(staleCollapsed.length, 3, "staleness stays in the single collapsed body row");
+	assert.match(staleCollapsed[1], /^│ stale · 2 turns · ◐ Fix quiet tools conflict · fixing conflict +│$/);
 
 	const fallback = applyTodo(emptyTodo(), { action: "write", tasks: [{ title: "Finished first", status: "done" }, { title: "First pending" }, { title: "Later pending" }] }, 1).state;
 	assert.match(renderTodoCard(fallback, plainTheme, 70, { collapsed: true, staleTurns: 0 }).map(stripAnsi)[1], /^│ ○ First pending +│$/);
@@ -293,3 +358,142 @@ test("renderTodoCard uses custom shortcuts, omits disabled shortcuts, and remain
 		for (const line of lines) assert.equal(visibleWidth(line), width, `"${stripAnsi(line)}" is not ${width} wide`);
 	}
 });
+
+test("renderTodoCard in the float style keeps its clickable control on the header row, one row below the top padding, above a separator row", (t) => {
+	const theme = withBackground(plainTheme);
+	for (const options of [
+		{ collapsed: false, staleTurns: 0, collapseKey: "ctrl+shift+t" },
+		{ collapsed: true, staleTurns: 0, collapseKey: "ctrl+shift+t" },
+		{ collapsed: false, staleTurns: 4 },
+		{ collapsed: false, staleTurns: 0, scrollable: true },
+	]) {
+		const neon = renderTodoCard(seeded(), theme, 60, options);
+		useCardStyle(t, CARD_STYLE.FLOAT);
+		const float = renderTodoCard(seeded(), theme, 60, options);
+		setCardStyle(CARD_STYLE.NEON);
+		assert.equal(float.length, neon.length + 2, "the top padding and separator rows add two rows");
+		const action = options.collapsed ? "▸ Expand" : "▾ Collapse";
+		const hint = options.collapseKey ? `ctrl\\+shift\\+t {3}` : "";
+		assert.match(stripAnsi(float[1]!), new RegExp(`^ ▎ ❀ Todos ${action}  1 of 3 +${hint}$`), "row 1 is the clickable header");
+		assert.match(stripAnsi(float[2]!), /^ ▎ +$/, "a blank separator row follows the header");
+		assertFloatRows(float, 60);
+		assert.deepEqual(float.slice(3, -1).map(bodyText), neon.slice(1, -1).map(bodyText));
+	}
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	const tagged = withBackground({ ...plainTheme, fg: (color: string, text: string) => `<${color}>${text}</${color}>` });
+	const [, header] = renderTodoCard(seeded(), tagged, 120, { collapsed: false, staleTurns: 0, hovered: true });
+	assert.match(stripAnsi(header!), /^ <border>▎<\/border> <accent>❀ Todos <[a-zA-Z]+>▾ Collapse<\/[a-zA-Z]+><\/accent>  <muted>1 of 3<\/muted> +$/, "the hovered control keeps its own role and case");
+});
+
+test("float Todos keeps the configured shortcut visible at rail width without repeating the action", (t) => {
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	const theme = withBackground(plainTheme);
+	for (const collapsed of [false, true]) {
+		for (const collapseKey of ["ctrl+shift+t", "alt+t", undefined]) {
+			const rows = renderTodoCard(seeded(), theme, 48, { collapsed, staleTurns: 0, collapseKey });
+			const header = stripAnsi(rows[1]!);
+			assert.match(header, collapsed ? /▸ Expand/ : /▾ Collapse/);
+			if (collapseKey) assert.ok(header.includes(collapseKey));
+			else assert.doesNotMatch(header, /ctrl\+shift\+t|alt\+t/);
+			assert.equal(visibleWidth(rows[1]!), 48);
+		}
+	}
+});
+
+test("a done todo wraps to the float body so the strikethrough never re-wraps", (t) => {
+	useCardStyle(t, CARD_STYLE.FLOAT);
+	const state = applyTodo(emptyTodo(), { action: "write", tasks: [{ title: "word ".repeat(20).trim(), status: "done" }] }, 1).state;
+	const lines = renderTodoCard(state, withBackground(plainTheme), 40, { collapsed: false, staleTurns: 0 });
+	assertFloatRows(lines, 40);
+	for (const row of lines.slice(3, -1)) assert.match(stripAnsi(row), /^ ▎ [✓ ] ~[^~]+~ +$/u, "each physical row closes its own strikethrough");
+});
+
+// #1814 dropped: terminal, never counts as open, reads apart from done.
+// #1820 blocked: open but not actionable, always carries its reason.
+
+test("applyTodo accepts dropped and blocked, maps cancel vocabulary to dropped, and names every status on an unknown one", () => {
+	const { state, error } = applyTodo(
+		emptyTodo(),
+		{ action: "write", tasks: [{ title: "Old plan", status: "dropped" }, { title: "Deploy", status: "blocked", note: "waiting for an admin" }, { title: "A", status: "cancelled" }, { title: "B", status: "canceled" }, { title: "C", status: "abandoned" }] },
+		1,
+	);
+	assert.equal(error, undefined);
+	assert.deepEqual(state.tasks.map((task) => task.status), [TODO_STATUS.DROPPED, TODO_STATUS.BLOCKED, TODO_STATUS.DROPPED, TODO_STATUS.DROPPED, TODO_STATUS.DROPPED]);
+	assert.equal(state.tasks[1].note, "waiting for an admin");
+	const bad = applyTodo(emptyTodo(), { action: "write", tasks: [{ title: "X", status: "later" }] }, 1);
+	assert.equal(bad.error, 'unknown status "later" (use pending, in_progress, blocked, done, or dropped)');
+});
+
+test("applyTodo rejects blocked without a note and leaves the list unchanged", () => {
+	const before = seeded();
+	for (const params of [
+		{ action: "add", title: "Deploy", status: "blocked" },
+		{ action: "update", id: 3, status: "blocked" },
+		{ action: "write", tasks: [{ title: "Deploy", status: "blocked", note: "   " }] },
+	]) {
+		const result = applyTodo(before, params, 9);
+		assert.equal(result.error, "blocked needs a note naming what it waits for");
+		assert.equal(result.text, "Error: blocked needs a note naming what it waits for");
+		assert.strictEqual(result.state, before, `${params.action} must not change the list`);
+	}
+	const blocked = applyTodo(before, { action: "update", id: 3, status: "blocked", note: "waiting for the API contract" }, 9);
+	assert.equal(blocked.error, undefined);
+	assert.equal(blocked.text, "#3 Show git bash tails → blocked");
+	const unblocked = applyTodo(blocked.state, { action: "update", id: 3, status: "pending" }, 10);
+	assert.equal(unblocked.state.tasks[2].status, TODO_STATUS.PENDING);
+});
+
+test("dropped tasks never count as open: a list of done and dropped is finished, silent, and never stale", () => {
+	const state = applyTodo(emptyTodo(), { action: "write", tasks: [{ title: "A", status: "done" }, { title: "B", status: "dropped" }, { title: "C", status: "dropped" }] }, 1).state;
+	assert.deepEqual(todoSummary(state), { done: 1, total: 3, open: 0 });
+	assert.equal(todoPromptBlock(state, 5), undefined);
+	assert.equal(staleTurns(state, 9), 0);
+});
+
+test("blocked tasks stay open but alone never make the list stale; an actionable task still does", () => {
+	const blockedOnly = applyTodo(emptyTodo(), { action: "write", tasks: [{ title: "A", status: "done" }, { title: "Deploy", status: "blocked", note: "waiting for an admin" }] }, 1).state;
+	assert.deepEqual(todoSummary(blockedOnly), { done: 1, total: 2, open: 1 });
+	assert.equal(staleTurns(blockedOnly, 9), 0);
+	const block = todoPromptBlock(blockedOnly, 0) ?? "";
+	assert.match(block, /2\. \[blocked\] Deploy — waiting for an admin/);
+	assert.match(block, /A blocked task waits on something outside the list: do not work on it until its condition holds/);
+	assert.match(block, /mark the tasks it made obsolete dropped instead of leaving them pending or marking them done/);
+	const mixed = applyTodo(blockedOnly, { action: "add", title: "Write docs" }, 1).state;
+	assert.equal(staleTurns(mixed, 3), 2);
+});
+
+test("renderTodoCard draws blocked with its reason and dropped dim without strikethrough, excluding dropped from the count", () => {
+	const state = applyTodo(
+		emptyTodo(),
+		{ action: "write", tasks: [{ title: "Ship", status: "done" }, { title: "Old plan", status: "dropped" }, { title: "Deploy", status: "blocked", note: "waiting for an admin" }, { title: "Docs" }] },
+		1,
+	).state;
+	const plain = renderTodoCard(state, plainTheme, 60, { collapsed: false, staleTurns: 0 }).map(stripAnsi);
+	assert.match(plain[0], /Todos ▾ Collapse · 1 of 3/);
+	assert.match(plain[2], /^│ ✕ Old plan +│$/);
+	assert.match(plain[3], /^│ ⊘ Deploy · waiting for an admin +│$/);
+	const roles: string[] = [];
+	const spy = { ...plainTheme, fg(color: string, text: string) { roles.push(`${color}:${text}`); return text; } };
+	renderTodoCard(state, spy, 60, { collapsed: false, staleTurns: 0 });
+	assert.ok(roles.includes("muted:✕") && roles.includes("dim:Old plan"), "dropped: muted glyph, dim title");
+	assert.ok(roles.includes("warning:⊘"), "blocked: warning glyph");
+});
+
+test("the collapsed card skips blocked tasks for the next one, and shows a blocked task only when nothing else is open", () => {
+	const state = applyTodo(emptyTodo(), { action: "write", tasks: [{ title: "Deploy", status: "blocked", note: "waiting for an admin" }, { title: "Docs" }] }, 1).state;
+	assert.match(renderTodoCard(state, plainTheme, 60, { collapsed: true, staleTurns: 0 }).map(stripAnsi)[1], /^│ ○ Docs +│$/);
+	const onlyBlocked = applyTodo(state, { action: "update", id: 2, status: "done" }, 2).state;
+	assert.match(renderTodoCard(onlyBlocked, plainTheme, 60, { collapsed: true, staleTurns: 0 }).map(stripAnsi)[1], /^│ ⊘ Deploy · waiting for an admin +│$/);
+});
+
+test("renderTodoCard folds dropped tasks next to done ones in a long list", () => {
+	const tasks = Array.from({ length: 20 }, (_, index) => ({ title: `Task ${index + 1}`, status: index < 5 ? "done" : index < 8 ? "dropped" : "pending" }));
+	const state = applyTodo(emptyTodo(), { action: "write", tasks }, 1).state;
+	const plain = renderTodoCard(state, plainTheme, 60, { collapsed: false, staleTurns: 0 }).map(stripAnsi);
+	assert.equal(plain.length, 14);
+	assert.match(plain[0], /Todos ▾ Collapse · 5 of 17/);
+	assert.match(plain[1], /^│ ✓ 5 done +│$/);
+	assert.match(plain[2], /^│ ✕ 3 dropped +│$/);
+	assert.match(plain[3], /^│ ○ Task 9 +│$/);
+	assert.match(plain[12], /^│ … 3 more +│$/);
+});

package/tests/shell-usage-view.test.ts

@@ -22,7 +22,7 @@ function payload(percent: number) {
 test("UsageView frames the panel, keeps every line at width, and shows the empty state", () => {
 	const store = new UsageStore();
 	const events: string[] = [];
-	const view = new UsageView(store, { theme: plainTheme, now: () => NOW, active: () => undefined, onRefresh: async () => events.push("refresh"), onClose: () => events.push("close"), requestRender: () => events.push("render") });
+	const view = new UsageView(store, { theme: plainTheme, now: () => NOW, active: () => undefined, onRefresh: async () => { events.push("refresh"); }, onClose: () => events.push("close"), requestRender: () => events.push("render") });
 	const empty = view.render(90).map(stripAnsi);
 	assert.match(empty[0], /^╭─ ✿ Subscriptions ─+╮$/);
 	assert.match(empty[1], /No subscription usage yet/);
@@ -62,6 +62,33 @@ test("UsageView refetches on r and closes on escape or q", async () => {
 	assert.equal(events.filter((event) => event === "close").length, 2);
 });
 
+test("UsageView starts a refresh at open and repaints when it settles", async () => {
+	const store = new UsageStore();
+	const events: string[] = [];
+	let resolveRefresh: (() => void) | undefined;
+	const view = new UsageView(store, {
+		theme: plainTheme,
+		now: () => NOW,
+		active: () => undefined,
+		onRefresh: () =>
+			new Promise<void>((resolve) => {
+				events.push("refresh");
+				resolveRefresh = resolve;
+			}),
+		onClose: () => events.push("close"),
+		requestRender: () => events.push("render"),
+	});
+	view.refresh();
+	assert.deepEqual(events, ["render", "refresh"], "opening the panel dispatches the refresh instead of waiting for it");
+	assert.match(stripAnsi(view.render(90)[0]), /✿ Subscriptions · refreshing…/, "the panel says it is refreshing while the dispatch is in flight");
+	store.record(parseCodexUsage(payload(40), NOW));
+	resolveRefresh!();
+	await new Promise((resolve) => setTimeout(resolve, 0));
+	assert.deepEqual(events, ["render", "refresh", "render"], "settling repaints once");
+	assert.match(stripAnsi(view.render(90)[0]), /^╭─ ✿ Subscriptions ─+╮$/, "the title returns once the refresh settles");
+	assert.match(stripAnsi(view.render(90)[2]), /40%/, "the settled snapshot is drawn");
+});
+
 function click(x: number, y: number, width: number, height: number): TuiMouseEvent {
 	return { type: "click", button: "left", x, y, screenX: x, screenY: y, width, height, shift: false, alt: false, ctrl: false };
 }