fix: account for visual line wrapping when erasing terminal output on resize

When the terminal is resized narrower, previously rendered lines soft-wrap
to occupy more visual rows than the logical line count tracks. This causes
eraseLines to under-erase, leaving ghost/stale lines at the top of the output.

The fix introduces visual row counting that uses stringWidth to measure each
line's visible width and Math.ceil(width / columns) to compute the actual
terminal rows occupied after wrapping. This is applied in three places:

- The standard render path in log-update now computes visual rows from
  previousOutput at the current terminal width when erasing
- A new clearWithWrapping() method on LogUpdate uses the same calculation
  for resize-triggered clears
- The resize handler in Ink flushes pending throttled writes before clearing,
  ensuring previousOutput reflects what's actually on screen

Fixes vadimdemedes#907

Author: costajohnt

src/ink.tsx

@@ -454,8 +454,18 @@ export default class Ink {
 		const currentWidth = getWindowSize(this.options.stdout).columns;
 
 		if (currentWidth < this.lastTerminalWidth) {
-			// We clear the screen when decreasing terminal width to prevent duplicate overlapping re-renders.
-			this.log.clear();
+			// Flush any pending throttled writes so the log's previousOutput
+			// reflects what's actually on screen before we clear.
+			if ('flush' in this.throttledLog) {
+				(this.throttledLog as DebouncedFunc<(output: string) => void>).flush();
+			}
+
+			// Use clearWithWrapping to account for terminal soft-wrapping:
+			// lines rendered at the old width now occupy more visual rows at the
+			// new narrower width. The log instance uses its own previousOutput
+			// (which reflects what was actually written to the stream) to
+			// calculate the correct number of rows to erase.
+			this.log.clearWithWrapping();
 			this.lastOutput = '';
 			this.lastOutputToRender = '';
 		}

src/log-update.ts

@@ -1,6 +1,7 @@
 import {type Writable} from 'node:stream';
 import ansiEscapes from 'ansi-escapes';
 import cliCursor from 'cli-cursor';
+import stringWidth from 'string-width';
 import {
 	type CursorPosition,
 	cursorPositionChanged,
@@ -14,6 +15,7 @@ export type {CursorPosition} from './cursor-helpers.js';
 
 export type LogUpdate = {
 	clear: () => void;
+	clearWithWrapping: () => void;
 	done: () => void;
 	reset: () => void;
 	sync: (str: string) => void;
@@ -28,6 +30,31 @@ export type LogUpdate = {
 const visibleLineCount = (lines: string[], str: string): number =>
 	str.endsWith('\n') ? lines.length - 1 : lines.length;
 
+// Count the visual rows a set of lines occupies in the terminal,
+// accounting for soft-wrapping when a line's visible width exceeds
+// the terminal's column count.
+const visualRowCount = (lines: string[], columns: number): number => {
+	if (columns <= 0) {
+		return lines.length;
+	}
+
+	let rows = 0;
+
+	for (const line of lines) {
+		const width = stringWidth(line);
+		rows += Math.max(1, Math.ceil(width / columns));
+	}
+
+	return rows;
+};
+
+// Safely read terminal column count from the stream.
+const getColumns = (stream: Writable): number =>
+	'columns' in stream &&
+	typeof (stream as NodeJS.WriteStream).columns === 'number'
+		? (stream as NodeJS.WriteStream).columns
+		: 0;
+
 const createStandard = (
 	stream: Writable,
 	{showCursor = false} = {},
@@ -86,17 +113,19 @@ const createStandard = (
 				}),
 			);
 		} else {
+			const columns = getColumns(stream);
+			const rowsToErase =
+				columns > 0 && previousLineCount > 0
+					? visualRowCount(previousOutput.split('\n'), columns)
+					: previousLineCount;
 			previousOutput = str;
 			const returnPrefix = buildReturnToBottomPrefix(
 				cursorWasShown,
-				previousLineCount,
+				rowsToErase,
 				previousCursorPosition,
 			);
 			stream.write(
-				returnPrefix +
-					ansiEscapes.eraseLines(previousLineCount) +
-					str +
-					cursorSuffix,
+				returnPrefix + ansiEscapes.eraseLines(rowsToErase) + str + cursorSuffix,
 			);
 			previousLineCount = lines.length;
 		}
@@ -119,6 +148,24 @@ const createStandard = (
 		cursorWasShown = false;
 	};
 
+	render.clearWithWrapping = () => {
+		const columns = getColumns(stream);
+		const rowsToErase =
+			columns > 0 && previousLineCount > 0
+				? visualRowCount(previousOutput.split('\n'), columns)
+				: previousLineCount;
+		const prefix = buildReturnToBottomPrefix(
+			cursorWasShown,
+			rowsToErase,
+			previousCursorPosition,
+		);
+		stream.write(prefix + ansiEscapes.eraseLines(rowsToErase));
+		previousOutput = '';
+		previousLineCount = 0;
+		previousCursorPosition = undefined;
+		cursorWasShown = false;
+	};
+
 	render.done = () => {
 		previousOutput = '';
 		previousLineCount = 0;
@@ -233,17 +280,22 @@ const createIncremental = (
 			return true;
 		}
 
+		const columns = getColumns(stream);
+		const previousRowCount =
+			columns > 0 && previousLines.length > 0
+				? visualRowCount(previousLines, columns)
+				: previousLines.length;
 		const returnPrefix = buildReturnToBottomPrefix(
 			cursorWasShown,
-			previousLines.length,
+			previousRowCount,
 			previousCursorPosition,
 		);
 
 		if (str === '\n' || previousOutput.length === 0) {
 			const cursorSuffix = buildCursorSuffix(visibleCount, activeCursor);
 			stream.write(
 				returnPrefix +
-					ansiEscapes.eraseLines(previousLines.length) +
+					ansiEscapes.eraseLines(previousRowCount) +
 					str +
 					cursorSuffix,
 			);
@@ -322,6 +374,24 @@ const createIncremental = (
 		cursorWasShown = false;
 	};
 
+	render.clearWithWrapping = () => {
+		const columns = getColumns(stream);
+		const rowsToErase =
+			columns > 0 && previousLines.length > 0
+				? visualRowCount(previousLines, columns)
+				: previousLines.length;
+		const prefix = buildReturnToBottomPrefix(
+			cursorWasShown,
+			rowsToErase,
+			previousCursorPosition,
+		);
+		stream.write(prefix + ansiEscapes.eraseLines(rowsToErase));
+		previousOutput = '';
+		previousLines = [];
+		previousCursorPosition = undefined;
+		cursorWasShown = false;
+	};
+
 	render.done = () => {
 		previousOutput = '';
 		previousLines = [];