strip ANSI resets from truncateToWidth in collapsed spawn renderer

Author: ofriw

agenticoding.test.ts

@@ -34,6 +34,12 @@ const theme = {
 	bold: (text: string) => text,
 } as unknown as Theme;
 
+const ansiTheme = {
+	fg: (_name: string, text: string) => `\u001b[38;5;245m${text}\u001b[39m`,
+	bg: (_name: string, text: string) => `\u001b[48;5;236m${text}\u001b[49m`,
+	bold: (text: string) => text,
+} as unknown as Theme;
+
 function createRenderContext(overrides: Record<string, unknown> = {}): Record<string, unknown> {
 	return {
 		expanded: false,
@@ -59,6 +65,23 @@ function stripAnsi(text: string): string {
 	return text.replace(/\u001b\[[0-9;]*m/g, "").replace(/\u001b\][^\u0007]*\u0007/g, "");
 }
 
+function getRenderedLine(lines: string[], match: (plain: string) => boolean): string {
+	const line = lines.find(candidate => match(stripAnsi(candidate)));
+	assert.ok(line);
+	return line;
+}
+
+function getLineContaining(lines: string[], text: string): string {
+	const line = lines.find(candidate => candidate.includes(text));
+	assert.ok(line);
+	return line;
+}
+
+function assertShellBackgroundPreserved(line: string): void {
+	assert.equal(line.includes("\u001b[0m"), false);
+	assert.match(line, /\u001b\[48;/);
+}
+
 function createDeferred() {
 	let resolve!: () => void;
 	const promise = new Promise<void>((r) => { resolve = r; });
@@ -580,6 +603,71 @@ test("collapsed nested spawn render keeps all text blocks from the last assistan
 	assert.ok(lines.some((l: string) => l.includes("second")));
 });
 
+test("collapsed nested spawn truncation preserves shell background across preview and stats lines", () => {
+	const state = createState();
+	const childSpawnTool = createChildSpawnTool(state);
+	const session = createSession([
+		{ role: "assistant", content: [{ type: "text", text: "Research the nudge on toggle off TODO from the readonly mode plan." }] },
+	]);
+	state.childSessions.set("tool-call-1", session);
+
+	const component = childSpawnTool.renderResult(
+		{
+			content: [{ type: "text", text: "ignored" }],
+			details: {
+				model: "mock-model",
+				thinking: "medium",
+				truncated: true,
+				stats: { inputTokens: 12, outputTokens: 34, turns: 2, cost: 0.125 },
+			},
+		},
+		{ expanded: false },
+		ansiTheme,
+		createRenderContext(),
+	) as any;
+
+	const lines = component.render(24);
+	const previewLine = getRenderedLine(lines, plain => plain.includes("Research"));
+	const statsLine = getRenderedLine(lines, plain => plain.includes("tok 12/34"));
+	assertShellBackgroundPreserved(previewLine);
+	assertShellBackgroundPreserved(statsLine);
+	assert.match(stripAnsi(statsLine), /tok 12\/34/);
+});
+
+test("collapsed nested spawn keeps truncated stats line calm", () => {
+	const markerTheme = {
+		fg: (name: string, text: string) => `<${name}>${text}</${name}>`,
+		bg: (_name: string, text: string) => text,
+		bold: (text: string) => text,
+	} as unknown as Theme;
+	const state = createState();
+	const childSpawnTool = createChildSpawnTool(state);
+	const session = createSession([
+		{ role: "assistant", content: [{ type: "text", text: "short preview" }] },
+	]);
+	state.childSessions.set("tool-call-1", session);
+
+	const component = childSpawnTool.renderResult(
+		{
+			content: [{ type: "text", text: "ignored" }],
+			details: {
+				model: "mock-model",
+				thinking: "medium",
+				truncated: true,
+				stats: { inputTokens: 12, outputTokens: 34, turns: 2, cost: 0.125 },
+			},
+		},
+		{ expanded: false },
+		markerTheme,
+		createRenderContext(),
+	) as any;
+
+	const lines = component.render(120);
+	const statsLine = getLineContaining(lines, "tok 12/34");
+	assert.match(statsLine, /<dim>.*tok 12\/34.*trunc.*<\/dim>/);
+	assert.equal(statsLine.includes("<warning>"), false);
+});
+
 test("nested spawn render is safe without details", () => {
 	const state = createState();
 	const childSpawnTool = createChildSpawnTool(state);

spawn/renderer.ts

@@ -198,6 +198,17 @@ function wrapSpawnShell(lines: string[], width: number, theme: Theme | undefined
 	];
 }
 
+function truncatePlainText(text: string, width: number): string {
+	// truncateToWidth() may inject ANSI resets even when truncating plain
+	// unicode text. Strip them here so outer shell/background styling stays intact.
+	return truncateToWidth(text, width).replace(/\u001b\[[0-9;]*m/g, "");
+}
+
+function truncateAndColor(text: string, width: number, color: (name: ThemeColor, text: string) => string, colorName: ThemeColor): string {
+	return color(colorName, truncatePlainText(text, width));
+}
+
+
 function formatCollapsedStats(details: SpawnResultDetails): { text: string; color: ThemeColor } | undefined {
 	if (details.stats) {
 		const s = details.stats;
@@ -809,19 +820,21 @@ class NestedAgentSessionComponent extends Container implements SpawnFrameTarget
 
 		// Identity line — distinguishes nested spawns in collapsed view
 		if (details) {
-			lines.push(truncateToWidth(
-				color("dim", `${getOutcomeMarker(outcome)}${details.model} • ${details.thinking}`),
+			lines.push(truncateAndColor(
+				`${getOutcomeMarker(outcome)}${details.model} • ${details.thinking}`,
 				width,
+				color,
+				"dim",
 			));
 		}
 
 		if (outcome === "running") {
 			const liveSummary = this.lastAction || "⏳ initializing…";
-			lines.push(truncateToWidth(color("dim", liveSummary), width));
+			lines.push(truncateAndColor(liveSummary, width, color, "dim"));
 		} else if (outcome !== "success") {
 			const outcomeText = getOutcomeStatusText(outcome);
 			if (outcomeText) {
-				lines.push(truncateToWidth(color(outcome === "error" ? "warning" : "dim", outcomeText), width));
+				lines.push(truncateAndColor(outcomeText, width, color, outcome === "error" ? "warning" : "dim"));
 			}
 		}
 
@@ -832,20 +845,17 @@ class NestedAgentSessionComponent extends Container implements SpawnFrameTarget
 			const maxLines = COLLAPSED_PREVIEW_MAX_LINES;
 			const shown = textLines.slice(0, maxLines);
 			for (const line of shown) {
-				lines.push(truncateToWidth(color("toolOutput", line), width));
+				lines.push(truncateAndColor(line, width, color, "toolOutput"));
 			}
 			const remaining = textLines.length - maxLines;
 			if (remaining > 0) {
-				lines.push(truncateToWidth(
-					color("muted", `... ${remaining} more lines`),
-					width,
-				));
+				lines.push(truncateAndColor(`... ${remaining} more lines`, width, color, "muted"));
 			}
 		}
 
 		const statsLine = details ? formatCollapsedStats(details) : undefined;
 		if (statsLine) {
-			lines.push(truncateToWidth(color(statsLine.color, statsLine.text), width));
+			lines.push(truncateAndColor(statsLine.text, width, color, statsLine.color));
 		}
 
 		return lines;
@@ -863,6 +873,7 @@ class NestedAgentSessionComponent extends Container implements SpawnFrameTarget
 
 		// Show identity header when expanded — anchors which nested session this is
 		const colorExpanded = (name: ThemeColor, text: string) => this.nestTheme ? this.nestTheme.fg(name, text) : text;
+		// Expanded mode has no shell background — safe to color before truncation
 		if (this.details) {
 			const header = `${getOutcomeMarker(this.liveOutcome)}${this.details.model} • ${this.details.thinking}`;
 			lines.push(leftPad + truncateToWidth(