@oh-my-pi/pi-tui 4.5.0 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oh-my-pi/pi-tui",
-	"version": "4.5.0",
+	"version": "4.6.0",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"type": "module",
 	"main": "src/index.ts",

package/src/components/editor.ts

@@ -278,6 +278,7 @@ export class Editor implements Component {
 	// Bracketed paste mode buffering
 	private pasteBuffer: string = "";
 	private isInPaste: boolean = false;
+	private pendingShiftEnter: boolean = false;
 
 	// Prompt history for up/down navigation
 	private history: string[] = [];
@@ -573,6 +574,21 @@ export class Editor implements Component {
 
 		// Handle special key combinations first
 
+		if (this.pendingShiftEnter) {
+			if (data === "\r") {
+				this.pendingShiftEnter = false;
+				this.addNewLine();
+				return;
+			}
+			this.pendingShiftEnter = false;
+			this.insertCharacter("\\");
+		}
+
+		if (data === "\\") {
+			this.pendingShiftEnter = true;
+			return;
+		}
+
 		// Ctrl+C - Exit (let parent handle this)
 		if (isCtrlC(data)) {
 			return;
@@ -904,6 +920,19 @@ export class Editor implements Component {
 		return this.state.lines.join("\n");
 	}
 
+	/**
+	 * Get text with paste markers expanded to their actual content.
+	 * Use this when you need the full content (e.g., for external editor).
+	 */
+	getExpandedText(): string {
+		let result = this.state.lines.join("\n");
+		for (const [pasteId, pasteContent] of this.pastes) {
+			const markerRegex = new RegExp(`\\[paste #${pasteId}( (\\+\\d+ lines|\\d+ chars))?\\]`, "g");
+			result = result.replace(markerRegex, pasteContent);
+		}
+		return result;
+	}
+
 	getLines(): string[] {
 		return [...this.state.lines];
 	}

package/src/components/input.ts

@@ -1,20 +1,4 @@
 import { getEditorKeybindings } from "../keybindings";
-import {
-	isAltBackspace,
-	isAltLeft,
-	isAltRight,
-	isArrowLeft,
-	isArrowRight,
-	isBackspace,
-	isCtrlA,
-	isCtrlE,
-	isCtrlK,
-	isCtrlLeft,
-	isCtrlRight,
-	isCtrlU,
-	isCtrlW,
-	isDelete,
-} from "../keys";
 import type { Component } from "../tui";
 import { getSegmenter, isPunctuationChar, isWhitespaceChar, visibleWidth } from "../utils";
 
@@ -32,6 +16,7 @@ export class Input implements Component {
 	// Bracketed paste mode buffering
 	private pasteBuffer: string = "";
 	private isInPaste: boolean = false;
+	private pendingShiftEnter: boolean = false;
 
 	getValue(): string {
 		return this.value;
@@ -79,23 +64,39 @@ export class Input implements Component {
 			}
 			return;
 		}
+
+		if (this.pendingShiftEnter) {
+			if (data === "\r") {
+				this.pendingShiftEnter = false;
+				if (this.onSubmit) this.onSubmit(this.value);
+				return;
+			}
+			this.pendingShiftEnter = false;
+			this.value = `${this.value.slice(0, this.cursor)}\\${this.value.slice(this.cursor)}`;
+			this.cursor += 1;
+		}
+
+		if (data === "\\") {
+			this.pendingShiftEnter = true;
+			return;
+		}
+
 		const kb = getEditorKeybindings();
+
+		// Escape/Cancel
 		if (kb.matches(data, "selectCancel")) {
-			this.onEscape?.();
+			if (this.onEscape) this.onEscape();
 			return;
 		}
 
-		// Handle special keys
+		// Submit
 		if (kb.matches(data, "submit") || data === "\n") {
-			// Enter - submit
-			if (this.onSubmit) {
-				this.onSubmit(this.value);
-			}
+			if (this.onSubmit) this.onSubmit(this.value);
 			return;
 		}
 
-		if (isBackspace(data)) {
-			// Backspace - delete grapheme before cursor (handles emojis, etc.)
+		// Deletion
+		if (kb.matches(data, "deleteCharBackward")) {
 			if (this.cursor > 0) {
 				const beforeCursor = this.value.slice(0, this.cursor);
 				const graphemes = [...segmenter.segment(beforeCursor)];
@@ -107,83 +108,70 @@ export class Input implements Component {
 			return;
 		}
 
-		if (isArrowLeft(data)) {
-			// Left arrow - move by one grapheme (handles emojis, etc.)
-			if (this.cursor > 0) {
-				const beforeCursor = this.value.slice(0, this.cursor);
-				const graphemes = [...segmenter.segment(beforeCursor)];
-				const lastGrapheme = graphemes[graphemes.length - 1];
-				this.cursor -= lastGrapheme ? lastGrapheme.segment.length : 1;
-			}
-			return;
-		}
-
-		if (isArrowRight(data)) {
-			// Right arrow - move by one grapheme (handles emojis, etc.)
+		if (kb.matches(data, "deleteCharForward")) {
 			if (this.cursor < this.value.length) {
 				const afterCursor = this.value.slice(this.cursor);
 				const graphemes = [...segmenter.segment(afterCursor)];
 				const firstGrapheme = graphemes[0];
-				this.cursor += firstGrapheme ? firstGrapheme.segment.length : 1;
+				const graphemeLength = firstGrapheme ? firstGrapheme.segment.length : 1;
+				this.value = this.value.slice(0, this.cursor) + this.value.slice(this.cursor + graphemeLength);
 			}
 			return;
 		}
 
-		if (isDelete(data)) {
-			// Delete - delete grapheme at cursor (handles emojis, etc.)
-			if (this.cursor < this.value.length) {
-				const afterCursor = this.value.slice(this.cursor);
-				const graphemes = [...segmenter.segment(afterCursor)];
-				const firstGrapheme = graphemes[0];
-				const graphemeLength = firstGrapheme ? firstGrapheme.segment.length : 1;
-				this.value = this.value.slice(0, this.cursor) + this.value.slice(this.cursor + graphemeLength);
-			}
+		if (kb.matches(data, "deleteWordBackward")) {
+			this.deleteWordBackwards();
 			return;
 		}
 
-		if (isCtrlA(data)) {
-			// Ctrl+A - beginning of line
+		if (kb.matches(data, "deleteToLineStart")) {
+			this.value = this.value.slice(this.cursor);
 			this.cursor = 0;
 			return;
 		}
 
-		if (isCtrlE(data)) {
-			// Ctrl+E - end of line
-			this.cursor = this.value.length;
+		if (kb.matches(data, "deleteToLineEnd")) {
+			this.value = this.value.slice(0, this.cursor);
 			return;
 		}
 
-		if (isCtrlW(data)) {
-			// Ctrl+W - delete word backwards
-			this.deleteWordBackwards();
+		// Cursor movement
+		if (kb.matches(data, "cursorLeft")) {
+			if (this.cursor > 0) {
+				const beforeCursor = this.value.slice(0, this.cursor);
+				const graphemes = [...segmenter.segment(beforeCursor)];
+				const lastGrapheme = graphemes[graphemes.length - 1];
+				this.cursor -= lastGrapheme ? lastGrapheme.segment.length : 1;
+			}
 			return;
 		}
 
-		if (isAltBackspace(data)) {
-			// Option/Alt+Backspace - delete word backwards
-			this.deleteWordBackwards();
+		if (kb.matches(data, "cursorRight")) {
+			if (this.cursor < this.value.length) {
+				const afterCursor = this.value.slice(this.cursor);
+				const graphemes = [...segmenter.segment(afterCursor)];
+				const firstGrapheme = graphemes[0];
+				this.cursor += firstGrapheme ? firstGrapheme.segment.length : 1;
+			}
 			return;
 		}
 
-		if (isCtrlU(data)) {
-			// Ctrl+U - delete from cursor to start of line
-			this.value = this.value.slice(this.cursor);
+		if (kb.matches(data, "cursorLineStart")) {
 			this.cursor = 0;
 			return;
 		}
 
-		if (isCtrlK(data)) {
-			// Ctrl+K - delete from cursor to end of line
-			this.value = this.value.slice(0, this.cursor);
+		if (kb.matches(data, "cursorLineEnd")) {
+			this.cursor = this.value.length;
 			return;
 		}
 
-		if (isCtrlLeft(data) || isAltLeft(data)) {
+		if (kb.matches(data, "cursorWordLeft")) {
 			this.moveWordBackwards();
 			return;
 		}
 
-		if (isCtrlRight(data) || isAltRight(data)) {
+		if (kb.matches(data, "cursorWordRight")) {
 			this.moveWordForwards();
 			return;
 		}

package/src/fuzzy.ts

@@ -0,0 +1,107 @@
+/**
+ * Fuzzy matching utilities.
+ * Matches if all query characters appear in order (not necessarily consecutive).
+ * Lower score = better match.
+ */
+
+export interface FuzzyMatch {
+	matches: boolean;
+	score: number;
+}
+
+export function fuzzyMatch(query: string, text: string): FuzzyMatch {
+	const queryLower = query.toLowerCase();
+	const textLower = text.toLowerCase();
+
+	if (queryLower.length === 0) {
+		return { matches: true, score: 0 };
+	}
+
+	if (queryLower.length > textLower.length) {
+		return { matches: false, score: 0 };
+	}
+
+	let queryIndex = 0;
+	let score = 0;
+	let lastMatchIndex = -1;
+	let consecutiveMatches = 0;
+
+	for (let i = 0; i < textLower.length && queryIndex < queryLower.length; i++) {
+		if (textLower[i] === queryLower[queryIndex]) {
+			const isWordBoundary = i === 0 || /[\s\-_./:]/.test(textLower[i - 1]!);
+
+			// Reward consecutive matches
+			if (lastMatchIndex === i - 1) {
+				consecutiveMatches++;
+				score -= consecutiveMatches * 5;
+			} else {
+				consecutiveMatches = 0;
+				// Penalize gaps
+				if (lastMatchIndex >= 0) {
+					score += (i - lastMatchIndex - 1) * 2;
+				}
+			}
+
+			// Reward word boundary matches
+			if (isWordBoundary) {
+				score -= 10;
+			}
+
+			// Slight penalty for later matches
+			score += i * 0.1;
+
+			lastMatchIndex = i;
+			queryIndex++;
+		}
+	}
+
+	if (queryIndex < queryLower.length) {
+		return { matches: false, score: 0 };
+	}
+
+	return { matches: true, score };
+}
+
+/**
+ * Filter and sort items by fuzzy match quality (best matches first).
+ * Supports space-separated tokens: all tokens must match.
+ */
+export function fuzzyFilter<T>(items: T[], query: string, getText: (item: T) => string): T[] {
+	if (!query.trim()) {
+		return items;
+	}
+
+	const tokens = query
+		.trim()
+		.split(/\s+/)
+		.filter((t) => t.length > 0);
+
+	if (tokens.length === 0) {
+		return items;
+	}
+
+	const results: { item: T; totalScore: number }[] = [];
+
+	for (const item of items) {
+		const text = getText(item);
+		let totalScore = 0;
+		let allMatch = true;
+
+		for (const token of tokens) {
+			const match = fuzzyMatch(token, text);
+			if (match.matches) {
+				totalScore += match.score;
+			} else {
+				allMatch = false;
+				break;
+			}
+		}
+
+		if (allMatch) {
+			results.push({ item, totalScore });
+		}
+	}
+
+	results.sort((a, b) => a.totalScore - b.totalScore);
+	return results.map((r) => r.item);
+}

package/src/index.ts

@@ -23,6 +23,8 @@ export { Text } from "./components/text";
 export { TruncatedText } from "./components/truncated-text";
 // Editor component interface (for custom editors)
 export type { EditorComponent } from "./editor-component";
+// Fuzzy matching
+export { type FuzzyMatch, fuzzyFilter, fuzzyMatch } from "./fuzzy";
 // Keybindings
 export {
 	DEFAULT_EDITOR_KEYBINDINGS,

package/src/keybindings.ts

@@ -61,7 +61,7 @@ export const DEFAULT_EDITOR_KEYBINDINGS: Required<EditorKeybindingsConfig> = {
 	deleteToLineStart: "ctrl+u",
 	deleteToLineEnd: "ctrl+k",
 	// Text input
-	newLine: ["shift+enter", "alt+enter"],
+	newLine: "shift+enter",
 	submit: "enter",
 	tab: "tab",
 	// Selection/autocomplete

package/src/keys.ts

@@ -311,7 +311,17 @@ interface ParsedKittySequence {
  * Only meaningful when Kitty keyboard protocol with flag 2 is active.
  */
 export function isKeyRelease(data: string): boolean {
-	return (
+	// Don't treat bracketed paste content as key release, even if it contains
+	// patterns like ":3F" (e.g., bluetooth MAC addresses like "90:62:3F:A5").
+	// Terminal.ts re-wraps paste content with bracketed paste markers before
+	// passing to TUI, so pasted data will always contain \x1b[200~.
+	if (data.includes("\x1b[200~")) {
+		return false;
+	}
+
+	// Quick check: release events with flag 2 contain ":3"
+	// Format: \x1b[<codepoint>;<modifier>:3u
+	if (
 		data.includes(":3u") ||
 		data.includes(":3~") ||
 		data.includes(":3A") ||
@@ -320,7 +330,10 @@ export function isKeyRelease(data: string): boolean {
 		data.includes(":3D") ||
 		data.includes(":3H") ||
 		data.includes(":3F")
-	);
+	) {
+		return true;
+	}
+	return false;
 }
 
 /**
@@ -328,7 +341,13 @@ export function isKeyRelease(data: string): boolean {
  * Only meaningful when Kitty keyboard protocol with flag 2 is active.
  */
 export function isKeyRepeat(data: string): boolean {
-	return (
+	// Don't treat bracketed paste content as key repeat, even if it contains
+	// patterns like ":2F". See isKeyRelease() for details.
+	if (data.includes("\x1b[200~")) {
+		return false;
+	}
+
+	if (
 		data.includes(":2u") ||
 		data.includes(":2~") ||
 		data.includes(":2A") ||
@@ -337,7 +356,10 @@ export function isKeyRepeat(data: string): boolean {
 		data.includes(":2D") ||
 		data.includes(":2H") ||
 		data.includes(":2F")
-	);
+	) {
+		return true;
+	}
+	return false;
 }
 
 function parseEventType(eventTypeStr: string | undefined): KeyEventType {

package/src/stdin-buffer.ts

@@ -17,7 +17,7 @@
  * MIT License - Copyright (c) 2025 opentui
  */
 
-import { EventEmitter } from "node:events";
+import { EventEmitter } from "events";
 
 const ESC = "\x1b";
 const BRACKETED_PASTE_START = "\x1b[200~";

package/src/terminal.ts

@@ -98,6 +98,12 @@ export class ProcessTerminal implements Terminal {
 		// Set up resize handler immediately
 		process.stdout.on("resize", this.resizeHandler);
 
+		// Refresh terminal dimensions - they may be stale after suspend/resume
+		// (SIGWINCH is lost while process is stopped). Unix only.
+		if (process.platform !== "win32") {
+			process.kill(process.pid, "SIGWINCH");
+		}
+
 		// Query and enable Kitty keyboard protocol
 		// The query handler intercepts input temporarily, then installs the user's handler
 		// See: https://sw.kovidgoyal.net/kitty/keyboard-protocol/
@@ -107,13 +113,34 @@ export class ProcessTerminal implements Terminal {
 	/**
 	 * Set up StdinBuffer to split batched input into individual sequences.
 	 * This ensures components receive single events, making matchesKey/isKeyRelease work correctly.
-	 * Note: Does NOT register the stdin handler - that's done after the Kitty protocol query.
+	 *
+	 * Also watches for Kitty protocol response and enables it when detected.
+	 * This is done here (after stdinBuffer parsing) rather than on raw stdin
+	 * to handle the case where the response arrives split across multiple events.
 	 */
 	private setupStdinBuffer(): void {
 		this.stdinBuffer = new StdinBuffer({ timeout: 10 });
 
+		// Kitty protocol response pattern: \x1b[?<flags>u
+		const kittyResponsePattern = /^\x1b\[\?(\d+)u$/;
+
 		// Forward individual sequences to the input handler
 		this.stdinBuffer.on("data", (sequence: string) => {
+			// Check for Kitty protocol response (only if not already enabled)
+			if (!this._kittyProtocolActive) {
+				const match = sequence.match(kittyResponsePattern);
+				if (match) {
+					this._kittyProtocolActive = true;
+					setKittyProtocolActive(true);
+
+					// Enable Kitty keyboard protocol (push flags)
+					// Flag 1 = disambiguate escape codes
+					// Flag 2 = report event types (press/repeat/release)
+					process.stdout.write("\x1b[>3u");
+					return; // Don't forward protocol response to TUI
+				}
+			}
+
 			if (this.inputHandler) {
 				this.inputHandler(sequence);
 			}
@@ -127,7 +154,6 @@ export class ProcessTerminal implements Terminal {
 		});
 
 		// Handler that pipes stdin data through the buffer
-		// Registration happens after Kitty protocol query completes
 		this.stdinDataHandler = (data: string) => {
 			this.stdinBuffer!.process(data);
 		};
@@ -139,81 +165,13 @@ export class ProcessTerminal implements Terminal {
 	 * Sends CSI ? u to query current flags. If terminal responds with CSI ? <flags> u,
 	 * it supports the protocol and we enable it with CSI > 1 u.
 	 *
-	 * Non-supporting terminals won't respond, so we use a timeout.
+	 * The response is detected in setupStdinBuffer's data handler, which properly
+	 * handles the case where the response arrives split across multiple stdin events.
 	 */
 	private queryAndEnableKittyProtocol(): void {
-		const QUERY_TIMEOUT_MS = 100;
-		let resolved = false;
-		let buffer = "";
-
-		// Kitty protocol response pattern: \x1b[?<flags>u
-		const kittyResponsePattern = /\x1b\[\?(\d+)u/;
-
-		const queryHandler = (data: string) => {
-			if (resolved) {
-				// Query phase done, forward to StdinBuffer
-				if (this.stdinBuffer) {
-					this.stdinBuffer.process(data);
-				}
-				return;
-			}
-
-			buffer += data;
-
-			// Check if we have a Kitty protocol response
-			const match = buffer.match(kittyResponsePattern);
-			if (match) {
-				resolved = true;
-				this._kittyProtocolActive = true;
-				setKittyProtocolActive(true);
-
-				// Enable Kitty keyboard protocol (push flags)
-				// Flag 1 = disambiguate escape codes
-				// Flag 2 = report event types (press/repeat/release)
-				process.stdout.write("\x1b[>3u");
-
-				// Remove the response from buffer, forward any remaining input through StdinBuffer
-				const remaining = buffer.replace(kittyResponsePattern, "");
-				if (remaining && this.stdinBuffer) {
-					this.stdinBuffer.process(remaining);
-				}
-
-				// Replace query handler with StdinBuffer handler
-				process.stdin.removeListener("data", queryHandler);
-				if (this.stdinDataHandler) {
-					process.stdin.on("data", this.stdinDataHandler);
-				}
-			}
-		};
-
-		// Set up StdinBuffer before query (it will receive input after query completes)
 		this.setupStdinBuffer();
-
-		// Temporarily intercept input for the query (before StdinBuffer)
-		process.stdin.on("data", queryHandler);
-
-		// Send query
+		process.stdin.on("data", this.stdinDataHandler!);
 		process.stdout.write("\x1b[?u");
-
-		// Timeout: if no response, terminal doesn't support Kitty protocol
-		setTimeout(() => {
-			if (!resolved) {
-				resolved = true;
-				this._kittyProtocolActive = false;
-				setKittyProtocolActive(false);
-
-				// Forward any buffered input that wasn't a Kitty response through StdinBuffer
-				if (buffer && this.stdinBuffer) {
-					this.stdinBuffer.process(buffer);
-				}
-
-				// Replace query handler with StdinBuffer handler
-				process.stdin.removeListener("data", queryHandler);
-				if (this.stdinDataHandler) {
-					process.stdin.on("data", this.stdinDataHandler);
-				}
-			}
-		}, QUERY_TIMEOUT_MS);
 	}
 
 	stop(): void {

package/src/tui.ts

@@ -175,6 +175,18 @@ export class TUI extends Container {
 	}
 
 	stop(): void {
+		// Move cursor to the end of the content to prevent overwriting/artifacts on exit
+		if (this.previousLines.length > 0) {
+			const targetRow = this.previousLines.length; // Line after the last content
+			const lineDiff = targetRow - this.cursorRow;
+			if (lineDiff > 0) {
+				this.terminal.write(`\x1b[${lineDiff}B`);
+			} else if (lineDiff < 0) {
+				this.terminal.write(`\x1b[${-lineDiff}A`);
+			}
+			this.terminal.write("\r\n");
+		}
+
 		this.terminal.showCursor();
 		this.terminal.stop();
 	}
@@ -186,7 +198,7 @@ export class TUI extends Container {
 	requestRender(force = false): void {
 		if (force) {
 			this.previousLines = [];
-			this.previousWidth = 0;
+			this.previousWidth = -1; // -1 triggers widthChanged, forcing a full clear
 			this.cursorRow = 0;
 			this.previousCursor = null;
 		}
@@ -351,6 +363,11 @@ export class TUI extends Container {
 
 	private static readonly SEGMENT_RESET = "\x1b[0m\x1b]8;;\x07";
 
+	private applyLineResets(lines: string[]): string[] {
+		const reset = TUI.SEGMENT_RESET;
+		return lines.map((line) => (this.containsImage(line) ? line : line + reset));
+	}
+
 	/** Splice overlay content into a base line at a specific column. Single-pass optimized. */
 	private compositeLineAt(
 		baseLine: string,
@@ -408,13 +425,15 @@ export class TUI extends Container {
 			newLines = this.compositeOverlays(newLines, width, height);
 		}
 
+		newLines = this.applyLineResets(newLines);
+
 		const cursorInfo = this.getCursorPosition(width);
 
 		// Width changed - need full re-render
 		const widthChanged = this.previousWidth !== 0 && this.previousWidth !== width;
 
-		// First render - just output everything without clearing
-		if (this.previousLines.length === 0) {
+		// First render - just output everything without clearing (assumes clean screen)
+		if (this.previousLines.length === 0 && !widthChanged) {
 			let buffer = "\x1b[?2026h"; // Begin synchronized output
 			for (let i = 0; i < newLines.length; i++) {
 				if (i > 0) buffer += "\r\n";
@@ -451,6 +470,7 @@ export class TUI extends Container {
 
 		// Find first and last changed lines
 		let firstChanged = -1;
+		let lastChanged = -1;
 		const maxLines = Math.max(newLines.length, this.previousLines.length);
 		for (let i = 0; i < maxLines; i++) {
 			const oldLine = i < this.previousLines.length ? this.previousLines[i] : "";
@@ -460,6 +480,7 @@ export class TUI extends Container {
 				if (firstChanged === -1) {
 					firstChanged = i;
 				}
+				lastChanged = i;
 			}
 		}
 
@@ -472,6 +493,31 @@ export class TUI extends Container {
 			return;
 		}
 
+		// All changes are in deleted lines (nothing to render, just clear)
+		if (firstChanged >= newLines.length) {
+			if (this.previousLines.length > newLines.length) {
+				let buffer = "\x1b[?2026h";
+				// Move to end of new content
+				const targetRow = newLines.length - 1;
+				const lineDiff = targetRow - currentCursorRow;
+				if (lineDiff > 0) buffer += `\x1b[${lineDiff}B`;
+				else if (lineDiff < 0) buffer += `\x1b[${-lineDiff}A`;
+				buffer += "\r";
+				// Clear extra lines
+				const extraLines = this.previousLines.length - newLines.length;
+				for (let i = 0; i < extraLines; i++) {
+					buffer += "\r\n\x1b[2K";
+				}
+				buffer += `\x1b[${extraLines}A`;
+				buffer += "\x1b[?2026l";
+				this.terminal.write(buffer);
+				this.cursorRow = newLines.length - 1;
+			}
+			this.previousLines = newLines;
+			this.previousWidth = width;
+			return;
+		}
+
 		// Check if firstChanged is outside the viewport
 		// Use snapshotted cursor position for consistent viewport calculation
 		// Viewport shows lines from (currentCursorRow - height + 1) to currentCursorRow
@@ -509,9 +555,10 @@ export class TUI extends Container {
 
 		buffer += "\r"; // Move to column 0
 
-		// Render from first changed line to end, clearing each line before writing
-		// This avoids the \x1b[J clear-to-end which can cause flicker in xterm.js
-		for (let i = firstChanged; i < newLines.length; i++) {
+		// Only render changed lines (firstChanged to lastChanged), not all lines to end
+		// This reduces flicker when only a single line changes (e.g., spinner animation)
+		const renderEnd = Math.min(lastChanged, newLines.length - 1);
+		for (let i = firstChanged; i <= renderEnd; i++) {
 			if (i > firstChanged) buffer += "\r\n";
 			buffer += "\x1b[2K"; // Clear current line
 			const line = newLines[i];
@@ -551,8 +598,17 @@ export class TUI extends Container {
 			buffer += line;
 		}
 
+		// Track where cursor ended up after rendering
+		let finalCursorRow = renderEnd;
+
 		// If we had more lines before, clear them and move cursor back
 		if (this.previousLines.length > newLines.length) {
+			// Move to end of new content first if we stopped before it
+			if (renderEnd < newLines.length - 1) {
+				const moveDown = newLines.length - 1 - renderEnd;
+				buffer += `\x1b[${moveDown}B`;
+				finalCursorRow = newLines.length - 1;
+			}
 			const extraLines = this.previousLines.length - newLines.length;
 			for (let i = newLines.length; i < this.previousLines.length; i++) {
 				buffer += "\r\n\x1b[2K";
@@ -566,8 +622,8 @@ export class TUI extends Container {
 		// Write entire buffer at once
 		this.terminal.write(buffer);
 
-		// Cursor is now at end of last line
-		this.cursorRow = newLines.length - 1;
+		// Track cursor position for next render
+		this.cursorRow = finalCursorRow;
 		this.updateHardwareCursor(width, newLines.length, cursorInfo, this.cursorRow);
 		this.previousCursor = cursorInfo;