@oh-my-pi/pi-tui 8.5.0 → 8.8.8

package/README.md

@@ -544,7 +544,7 @@ interface Terminal {
 ```typescript
 import { visibleWidth, truncateToWidth, wrapTextWithAnsi } from "@oh-my-pi/pi-tui";
 
-// Get visible width of string (ignoring ANSI codes)
+// Get visible width of string (ignoring ANSI codes, uses Bun.stringWidth)
 const width = visibleWidth("\x1b[31mHello\x1b[0m"); // 5
 
 // Truncate string to width (preserving ANSI codes, adds ellipsis)
@@ -553,7 +553,7 @@ const truncated = truncateToWidth("Hello World", 8); // "Hello..."
 // Truncate without ellipsis
 const truncatedNoEllipsis = truncateToWidth("Hello World", 8, ""); // "Hello Wo"
 
-// Wrap text to width (preserving ANSI codes across line breaks)
+// Wrap text to width (Bun.wrapAnsi word wrap, trims line ends, preserves ANSI)
 const lines = wrapTextWithAnsi("This is a long line that needs wrapping", 20);
 // ["This is a long line", "that needs wrapping"]
 ```
@@ -631,10 +631,11 @@ class MyComponent implements Component {
 
 ### ANSI Code Considerations
 
-Both `visibleWidth()` and `truncateToWidth()` correctly handle ANSI escape codes:
+`visibleWidth()`, `truncateToWidth()`, and `wrapTextWithAnsi()` correctly handle ANSI escape codes:
 
-- `visibleWidth()` ignores ANSI codes when calculating width
+- `visibleWidth()` ignores ANSI codes when calculating width (via `Bun.stringWidth`)
 - `truncateToWidth()` preserves ANSI codes and properly closes them when truncating
+- `wrapTextWithAnsi()` preserves ANSI codes while word-wrapping and trimming line ends
 
 ```typescript
 import chalk from "chalk";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oh-my-pi/pi-tui",
-	"version": "8.5.0",
+	"version": "8.8.8",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"type": "module",
 	"main": "./src/index.ts",
@@ -49,7 +49,6 @@
 	"dependencies": {
 		"@types/mime-types": "^3.0.1",
 		"chalk": "^5.5.0",
-		"get-east-asian-width": "^1.3.0",
 		"marked": "^17.0.1",
 		"mime-types": "^3.0.1"
 	},

package/src/components/editor.ts

@@ -1195,51 +1195,15 @@ export class Editor implements Component, Focusable {
 			}
 
 			if (pastedLines.length === 1) {
-				const text = pastedLines[0] || "";
-				this.insertTextAtCursor(text);
+				// Single line - insert character by character to trigger autocomplete
+				for (const char of filteredText) {
+					this.insertCharacter(char);
+				}
 				return;
 			}
 
-			// Multi-line paste - be very careful with array manipulation
-			const currentLine = this.state.lines[this.state.cursorLine] || "";
-			const beforeCursor = currentLine.slice(0, this.state.cursorCol);
-			const afterCursor = currentLine.slice(this.state.cursorCol);
-
-			// Build the new lines array step by step
-			const newLines: string[] = [];
-
-			// Add all lines before current line
-			for (let i = 0; i < this.state.cursorLine; i++) {
-				newLines.push(this.state.lines[i] || "");
-			}
-
-			// Add the first pasted line merged with before cursor text
-			newLines.push(beforeCursor + (pastedLines[0] || ""));
-
-			// Add all middle pasted lines
-			for (let i = 1; i < pastedLines.length - 1; i++) {
-				newLines.push(pastedLines[i] || "");
-			}
-
-			// Add the last pasted line with after cursor text
-			newLines.push((pastedLines[pastedLines.length - 1] || "") + afterCursor);
-
-			// Add all lines after current line
-			for (let i = this.state.cursorLine + 1; i < this.state.lines.length; i++) {
-				newLines.push(this.state.lines[i] || "");
-			}
-
-			// Replace the entire lines array
-			this.state.lines = newLines;
-
-			// Update cursor position to end of pasted content
-			this.state.cursorLine += pastedLines.length - 1;
-			this.state.cursorCol = (pastedLines[pastedLines.length - 1] || "").length;
-
-			// Notify of change
-			if (this.onChange) {
-				this.onChange(this.getText());
-			}
+			// Multi-line paste - use insertTextAtCursor for proper handling
+			this.insertTextAtCursor(filteredText);
 		});
 	}
 

package/src/terminal.ts

@@ -1,3 +1,4 @@
+import * as fs from "node:fs";
 import { setKittyProtocolActive } from "./keys";
 import { StdinBuffer } from "./stdin-buffer";
 
@@ -77,6 +78,7 @@ export class ProcessTerminal implements Terminal {
 	private stdinBuffer?: StdinBuffer;
 	private stdinDataHandler?: (data: string) => void;
 	private dead = false;
+	private writeLogPath = process.env.OMP_TUI_WRITE_LOG || "";
 
 	get kittyProtocolActive(): boolean {
 		return this._kittyProtocolActive;
@@ -221,6 +223,13 @@ export class ProcessTerminal implements Terminal {
 
 	write(data: string): void {
 		this.safeWrite(data);
+		if (this.writeLogPath) {
+			try {
+				fs.appendFileSync(this.writeLogPath, data, { encoding: "utf8" });
+			} catch {
+				// Ignore logging errors
+			}
+		}
 	}
 
 	private safeWrite(data: string): void {

package/src/tui.ts

@@ -227,6 +227,9 @@ export class TUI extends Container {
 	private inputBuffer = ""; // Buffer for parsing terminal responses
 	private cellSizeQueryPending = false;
 	private showHardwareCursor = process.env.OMP_HARDWARE_CURSOR === "1";
+	private maxLinesRendered = 0; // Track terminal's working area (max lines ever rendered)
+	private previousViewportTop = 0; // Track previous viewport top for resize-aware cursor moves
+	private fullRedrawCount = 0;
 
 	// Overlay stack for modal components rendered on top of base content
 	private overlayStack: {
@@ -245,6 +248,10 @@ export class TUI extends Container {
 		}
 	}
 
+	get fullRedraws(): number {
+		return this.fullRedrawCount;
+	}
+
 	getShowHardwareCursor(): boolean {
 		return this.showHardwareCursor;
 	}
@@ -411,6 +418,8 @@ export class TUI extends Container {
 			this.previousWidth = -1; // -1 triggers widthChanged, forcing a full clear
 			this.cursorRow = 0;
 			this.hardwareCursorRow = 0;
+			this.maxLinesRendered = 0;
+			this.previousViewportTop = 0;
 		}
 		if (this.renderRequested) return;
 		this.renderRequested = true;
@@ -708,12 +717,16 @@ export class TUI extends Container {
 			minLinesNeeded = Math.max(minLinesNeeded, row + overlayLines.length);
 		}
 
-		// Extend result with empty lines if content is too short for overlay placement
-		while (result.length < minLinesNeeded) {
+		// Ensure result covers the terminal working area to keep overlay positioning stable across resizes.
+		// maxLinesRendered can exceed current content length after a shrink; pad to keep viewportStart consistent.
+		const workingHeight = Math.max(this.maxLinesRendered, minLinesNeeded);
+
+		// Extend result with empty lines if content is too short for overlay placement or working area
+		while (result.length < workingHeight) {
 			result.push("");
 		}
 
-		const viewportStart = Math.max(0, result.length - termHeight);
+		const viewportStart = Math.max(0, workingHeight - termHeight);
 
 		// Track which lines were modified for final verification
 		const modifiedLines = new Set<number>();
@@ -757,10 +770,13 @@ export class TUI extends Container {
 	/**
 	 * Find and extract cursor position from rendered lines.
 	 * Searches for CURSOR_MARKER, calculates its position, and strips it from the output.
+	 * @param lines - Rendered lines to search
+	 * @param height - Terminal height (to calculate viewport)
 	 * @returns Cursor position { row, col } or null if no marker found
 	 */
-	private extractCursorPosition(lines: string[]): { row: number; col: number } | null {
-		for (let row = 0; row < lines.length; row++) {
+	private extractCursorPosition(lines: string[], height: number): { row: number; col: number } | null {
+		const viewportTop = Math.max(0, lines.length - height);
+		for (let row = lines.length - 1; row >= viewportTop; row--) {
 			const line = lines[row];
 			const markerIndex = line.indexOf(CURSOR_MARKER);
 			if (markerIndex !== -1) {
@@ -882,6 +898,14 @@ export class TUI extends Container {
 		// Capture terminal dimensions at start to ensure consistency throughout render
 		const width = this.terminal.columns;
 		const height = this.terminal.rows;
+		let viewportTop = Math.max(0, this.maxLinesRendered - height);
+		let prevViewportTop = this.previousViewportTop;
+		let hardwareCursorRow = this.hardwareCursorRow;
+		const computeLineDiff = (targetRow: number): number => {
+			const currentScreenRow = hardwareCursorRow - prevViewportTop;
+			const targetScreenRow = targetRow - viewportTop;
+			return targetScreenRow - currentScreenRow;
+		};
 
 		// Render all components to get new lines
 		let newLines = this.render(width);
@@ -892,7 +916,7 @@ export class TUI extends Container {
 		}
 
 		// Extract cursor position before applying line resets (marker must be found first)
-		const cursorPos = this.extractCursorPosition(newLines);
+		const cursorPos = this.extractCursorPosition(newLines, height);
 
 		newLines = this.applyLineResets(newLines);
 
@@ -901,6 +925,7 @@ export class TUI extends Container {
 
 		// First render - just output everything without clearing (assumes clean screen)
 		if (this.previousLines.length === 0 && !widthChanged) {
+			this.fullRedrawCount += 1;
 			let buffer = "\x1b[?2026h"; // Begin synchronized output
 			for (let i = 0; i < newLines.length; i++) {
 				if (i > 0) buffer += "\r\n";
@@ -911,6 +936,8 @@ export class TUI extends Container {
 			// After rendering N lines, cursor is at end of last line (clamp to 0 for empty)
 			this.cursorRow = Math.max(0, newLines.length - 1);
 			this.hardwareCursorRow = this.cursorRow;
+			this.maxLinesRendered = Math.max(this.maxLinesRendered, newLines.length);
+			this.previousViewportTop = Math.max(0, this.maxLinesRendered - height);
 			this.positionHardwareCursor(cursorPos, newLines.length);
 			this.previousLines = newLines;
 			this.previousWidth = width;
@@ -919,6 +946,7 @@ export class TUI extends Container {
 
 		// Width changed - full re-render
 		if (widthChanged) {
+			this.fullRedrawCount += 1;
 			let buffer = "\x1b[?2026h"; // Begin synchronized output
 			buffer += "\x1b[3J\x1b[2J\x1b[H"; // Clear scrollback, screen, and home
 			for (let i = 0; i < newLines.length; i++) {
@@ -929,6 +957,8 @@ export class TUI extends Container {
 			this.terminal.write(buffer);
 			this.cursorRow = Math.max(0, newLines.length - 1);
 			this.hardwareCursorRow = this.cursorRow;
+			this.maxLinesRendered = Math.max(this.maxLinesRendered, newLines.length);
+			this.previousViewportTop = Math.max(0, this.maxLinesRendered - height);
 			this.positionHardwareCursor(cursorPos, newLines.length);
 			this.previousLines = newLines;
 			this.previousWidth = width;
@@ -950,10 +980,19 @@ export class TUI extends Container {
 				lastChanged = i;
 			}
 		}
+		const appendedLines = newLines.length > this.previousLines.length;
+		if (appendedLines) {
+			if (firstChanged === -1) {
+				firstChanged = this.previousLines.length;
+			}
+			lastChanged = newLines.length - 1;
+		}
+		const appendStart = appendedLines && firstChanged === this.previousLines.length && firstChanged > 0;
 
 		// No changes - but still need to update hardware cursor position if it moved
 		if (firstChanged === -1) {
 			this.positionHardwareCursor(cursorPos, newLines.length);
+			this.previousViewportTop = Math.max(0, this.maxLinesRendered - height);
 			return;
 		}
 
@@ -963,7 +1002,7 @@ export class TUI extends Container {
 				let buffer = "\x1b[?2026h";
 				// Move to end of new content (clamp to 0 for empty content)
 				const targetRow = Math.max(0, newLines.length - 1);
-				const lineDiff = targetRow - this.hardwareCursorRow;
+				const lineDiff = computeLineDiff(targetRow);
 				if (lineDiff > 0) buffer += `\x1b[${lineDiff}B`;
 				else if (lineDiff < 0) buffer += `\x1b[${-lineDiff}A`;
 				buffer += "\r";
@@ -981,16 +1020,14 @@ export class TUI extends Container {
 			this.positionHardwareCursor(cursorPos, newLines.length);
 			this.previousLines = newLines;
 			this.previousWidth = width;
+			this.previousViewportTop = Math.max(0, this.maxLinesRendered - height);
 			return;
 		}
 
-		// Check if firstChanged is outside the viewport
-		// cursorRow is the line where cursor is (0-indexed)
-		// Viewport shows lines from (cursorRow - height + 1) to cursorRow
-		// If firstChanged < viewportTop, we need full re-render
-		const viewportTop = this.cursorRow - height + 1;
+		// Check if firstChanged is outside the viewport (based on maxLinesRendered)
 		if (firstChanged < viewportTop) {
 			// First change is above viewport - need full re-render
+			this.fullRedrawCount += 1;
 			let buffer = "\x1b[?2026h"; // Begin synchronized output
 			buffer += "\x1b[3J\x1b[2J\x1b[H"; // Clear scrollback, screen, and home
 			for (let i = 0; i < newLines.length; i++) {
@@ -1001,6 +1038,8 @@ export class TUI extends Container {
 			this.terminal.write(buffer);
 			this.cursorRow = Math.max(0, newLines.length - 1);
 			this.hardwareCursorRow = this.cursorRow;
+			this.maxLinesRendered = Math.max(this.maxLinesRendered, newLines.length);
+			this.previousViewportTop = Math.max(0, this.maxLinesRendered - height);
 			this.positionHardwareCursor(cursorPos, newLines.length);
 			this.previousLines = newLines;
 			this.previousWidth = width;
@@ -1010,16 +1049,30 @@ export class TUI extends Container {
 		// Render from first changed line to end
 		// Build buffer with all updates wrapped in synchronized output
 		let buffer = "\x1b[?2026h"; // Begin synchronized output
+		const prevViewportBottom = prevViewportTop + height - 1;
+		const moveTargetRow = appendStart ? firstChanged - 1 : firstChanged;
+		if (moveTargetRow > prevViewportBottom) {
+			const currentScreenRow = Math.max(0, Math.min(height - 1, hardwareCursorRow - prevViewportTop));
+			const moveToBottom = height - 1 - currentScreenRow;
+			if (moveToBottom > 0) {
+				buffer += `\x1b[${moveToBottom}B`;
+			}
+			const scroll = moveTargetRow - prevViewportBottom;
+			buffer += "\r\n".repeat(scroll);
+			prevViewportTop += scroll;
+			viewportTop += scroll;
+			hardwareCursorRow = moveTargetRow;
+		}
 
-		// Move cursor to first changed line (use hardwareCursorRow for actual position)
-		const lineDiff = firstChanged - this.hardwareCursorRow;
+		// Move cursor to first changed line
+		const lineDiff = computeLineDiff(moveTargetRow);
 		if (lineDiff > 0) {
 			buffer += `\x1b[${lineDiff}B`; // Move down
 		} else if (lineDiff < 0) {
 			buffer += `\x1b[${-lineDiff}A`; // Move up
 		}
 
-		buffer += "\r"; // Move to column 0
+		buffer += appendStart ? "\r\n" : "\r"; // Move to column 0
 
 		// 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)
@@ -1093,6 +1146,9 @@ export class TUI extends Container {
 		// hardwareCursorRow tracks actual cursor position (may move to cursorPos below)
 		this.cursorRow = Math.max(0, newLines.length - 1);
 		this.hardwareCursorRow = finalCursorRow;
+		// Track terminal's working area (grows but doesn't shrink unless cleared)
+		this.maxLinesRendered = Math.max(this.maxLinesRendered, newLines.length);
+		this.previousViewportTop = Math.max(0, this.maxLinesRendered - height);
 
 		// Position hardware cursor for IME
 		this.positionHardwareCursor(cursorPos, newLines.length);

package/src/utils.ts

@@ -1,5 +1,3 @@
-import { eastAsianWidth } from "get-east-asian-width";
-
 // Grapheme segmenter (shared instance)
 const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
 
@@ -10,71 +8,10 @@ export function getSegmenter(): Intl.Segmenter {
 	return segmenter;
 }
 
-/**
- * Check if a grapheme cluster (after segmentation) could possibly be an RGI emoji.
- * This is a fast heuristic to avoid the expensive rgiEmojiRegex test.
- * The tested Unicode blocks are deliberately broad to account for future
- * Unicode additions.
- */
-function couldBeEmoji(segment: string): boolean {
-	const cp = segment.codePointAt(0)!;
-	return (
-		(cp >= 0x1f000 && cp <= 0x1fbff) || // Emoji and Pictograph
-		(cp >= 0x2300 && cp <= 0x23ff) || // Misc technical
-		(cp >= 0x2600 && cp <= 0x27bf) || // Misc symbols, dingbats
-		(cp >= 0x2b50 && cp <= 0x2b55) || // Specific stars/circles
-		segment.includes("\uFE0F") || // Contains VS16 (emoji presentation selector)
-		segment.length > 2 // Multi-codepoint sequences (ZWJ, skin tones, etc.)
-	);
-}
-
-// Regexes for character classification (same as string-width library)
-const zeroWidthRegex = /^(?:\p{Default_Ignorable_Code_Point}|\p{Control}|\p{Mark}|\p{Surrogate})+$/v;
-const leadingNonPrintingRegex = /^[\p{Default_Ignorable_Code_Point}\p{Control}\p{Format}\p{Mark}\p{Surrogate}]+/v;
-const rgiEmojiRegex = /^\p{RGI_Emoji}$/v;
-
 // Cache for non-ASCII strings
 const WIDTH_CACHE_SIZE = 512;
 const widthCache = new Map<string, number>();
 
-/**
- * Calculate the terminal width of a single grapheme cluster.
- * Based on code from the string-width library, but includes a possible-emoji
- * check to avoid running the RGI_Emoji regex unnecessarily.
- */
-function graphemeWidth(segment: string): number {
-	// Zero-width clusters
-	if (zeroWidthRegex.test(segment)) {
-		return 0;
-	}
-
-	// Emoji check with pre-filter
-	if (couldBeEmoji(segment) && rgiEmojiRegex.test(segment)) {
-		return 2;
-	}
-
-	// Get base visible codepoint
-	const base = segment.replace(leadingNonPrintingRegex, "");
-	const cp = base.codePointAt(0);
-	if (cp === undefined) {
-		return 0;
-	}
-
-	let width = eastAsianWidth(cp);
-
-	// Trailing halfwidth/fullwidth forms
-	if (segment.length > 1) {
-		for (const char of segment.slice(1)) {
-			const c = char.codePointAt(0)!;
-			if (c >= 0xff00 && c <= 0xffef) {
-				width += eastAsianWidth(c);
-			}
-		}
-	}
-
-	return width;
-}
-
 /**
  * Calculate the visible width of a string in terminal columns.
  */
@@ -114,11 +51,7 @@ export function visibleWidth(str: string): number {
 		clean = clean.replace(/\x1b\]8;;[^\x07]*\x07/g, "");
 	}
 
-	// Calculate width
-	let width = 0;
-	for (const { segment } of segmenter.segment(clean)) {
-		width += graphemeWidth(segment);
-	}
+	const width = Bun.stringWidth(clean);
 
 	// Cache result
 	if (widthCache.size >= WIDTH_CACHE_SIZE) {
@@ -370,69 +303,7 @@ class AnsiCodeTracker {
 	}
 }
 
-function updateTrackerFromText(text: string, tracker: AnsiCodeTracker): void {
-	let i = 0;
-	while (i < text.length) {
-		const ansiResult = extractAnsiCode(text, i);
-		if (ansiResult) {
-			tracker.process(ansiResult.code);
-			i += ansiResult.length;
-		} else {
-			i++;
-		}
-	}
-}
-
-/**
- * Split text into words while keeping ANSI codes attached.
- */
-function splitIntoTokensWithAnsi(text: string): string[] {
-	const tokens: string[] = [];
-	let current = "";
-	let pendingAnsi = ""; // ANSI codes waiting to be attached to next visible content
-	let inWhitespace = false;
-	let i = 0;
-
-	while (i < text.length) {
-		const ansiResult = extractAnsiCode(text, i);
-		if (ansiResult) {
-			// Hold ANSI codes separately - they'll be attached to the next visible char
-			pendingAnsi += ansiResult.code;
-			i += ansiResult.length;
-			continue;
-		}
-
-		const char = text[i];
-		const charIsSpace = char === " ";
-
-		if (charIsSpace !== inWhitespace && current) {
-			// Switching between whitespace and non-whitespace, push current token
-			tokens.push(current);
-			current = "";
-		}
-
-		// Attach any pending ANSI codes to this visible character
-		if (pendingAnsi) {
-			current += pendingAnsi;
-			pendingAnsi = "";
-		}
-
-		inWhitespace = charIsSpace;
-		current += char;
-		i++;
-	}
-
-	// Handle any remaining pending ANSI codes (attach to last token)
-	if (pendingAnsi) {
-		current += pendingAnsi;
-	}
-
-	if (current) {
-		tokens.push(current);
-	}
-
-	return tokens;
-}
+const WRAP_OPTIONS = { wordWrap: true, hard: true, trim: false } as const;
 
 /**
  * Wrap text with ANSI codes preserved.
@@ -446,116 +317,7 @@ function splitIntoTokensWithAnsi(text: string): string[] {
  * @returns Array of wrapped lines (NOT padded to width)
  */
 export function wrapTextWithAnsi(text: string, width: number): string[] {
-	if (!text) {
-		return [""];
-	}
-
-	// Handle newlines by processing each line separately
-	// Track ANSI state across lines so styles carry over after literal newlines
-	const inputLines = text.split("\n");
-	const result: string[] = [];
-	const tracker = new AnsiCodeTracker();
-
-	for (const inputLine of inputLines) {
-		// Prepend active ANSI codes from previous lines (except for first line)
-		const prefix = result.length > 0 ? tracker.getActiveCodes() : "";
-		result.push(...wrapSingleLine(prefix + inputLine, width));
-		// Update tracker with codes from this line for next iteration
-		updateTrackerFromText(inputLine, tracker);
-	}
-
-	return result.length > 0 ? result : [""];
-}
-
-function wrapSingleLine(line: string, width: number): string[] {
-	if (!line) {
-		return [""];
-	}
-
-	const visibleLength = visibleWidth(line);
-	if (visibleLength <= width) {
-		return [line];
-	}
-
-	const wrapped: string[] = [];
-	const tracker = new AnsiCodeTracker();
-	const tokens = splitIntoTokensWithAnsi(line);
-
-	let currentLine = "";
-	let currentVisibleLength = 0;
-
-	for (const token of tokens) {
-		const tokenVisibleLength = visibleWidth(token);
-		const isWhitespace = token.trim() === "";
-
-		// Token itself is too long - break it character by character
-		// For whitespace tokens exceeding width, truncate to width instead of breaking
-		if (tokenVisibleLength > width && isWhitespace) {
-			// Truncate long whitespace to fit width
-			const truncated = token.substring(0, width - currentVisibleLength);
-			if (truncated) {
-				currentLine += truncated;
-				currentVisibleLength += visibleWidth(truncated);
-			}
-			updateTrackerFromText(token, tracker);
-			continue;
-		}
-
-		if (tokenVisibleLength > width && !isWhitespace) {
-			if (currentLine) {
-				// Add specific reset for underline only (preserves background)
-				const lineEndReset = tracker.getLineEndReset();
-				if (lineEndReset) {
-					currentLine += lineEndReset;
-				}
-				wrapped.push(currentLine);
-				currentLine = "";
-				currentVisibleLength = 0;
-			}
-
-			// Break long token - breakLongWord handles its own resets
-			const broken = breakLongWord(token, width, tracker);
-			wrapped.push(...broken.slice(0, -1));
-			currentLine = broken[broken.length - 1];
-			currentVisibleLength = visibleWidth(currentLine);
-			continue;
-		}
-
-		// Check if adding this token would exceed width
-		const totalNeeded = currentVisibleLength + tokenVisibleLength;
-
-		if (totalNeeded > width && currentVisibleLength > 0) {
-			// Trim trailing whitespace, then add underline reset (not full reset, to preserve background)
-			let lineToWrap = currentLine.trimEnd();
-			const lineEndReset = tracker.getLineEndReset();
-			if (lineEndReset) {
-				lineToWrap += lineEndReset;
-			}
-			wrapped.push(lineToWrap);
-			if (isWhitespace) {
-				// Don't start new line with whitespace
-				currentLine = tracker.getActiveCodes();
-				currentVisibleLength = 0;
-			} else {
-				currentLine = tracker.getActiveCodes() + token;
-				currentVisibleLength = tokenVisibleLength;
-			}
-		} else {
-			// Add to current line
-			currentLine += token;
-			currentVisibleLength += tokenVisibleLength;
-		}
-
-		updateTrackerFromText(token, tracker);
-	}
-
-	if (currentLine) {
-		// No reset at end of final line - let caller handle it
-		wrapped.push(currentLine);
-	}
-
-	// Trailing whitespace can cause lines to exceed the requested width
-	return wrapped.length > 0 ? wrapped.map(line => line.trimEnd()) : [""];
+	return Bun.wrapAnsi(text, width, WRAP_OPTIONS).split("\n");
 }
 
 const PUNCTUATION_REGEX = /[(){}[\]<>.,;:'"!?+\-=*/\\|&%^$#@~`]/;
@@ -574,75 +336,6 @@ export function isPunctuationChar(char: string): boolean {
 	return PUNCTUATION_REGEX.test(char);
 }
 
-function breakLongWord(word: string, width: number, tracker: AnsiCodeTracker): string[] {
-	const lines: string[] = [];
-	let currentLine = tracker.getActiveCodes();
-	let currentWidth = 0;
-
-	// First, separate ANSI codes from visible content
-	// We need to handle ANSI codes specially since they're not graphemes
-	let i = 0;
-	const segments: Array<{ type: "ansi" | "grapheme"; value: string }> = [];
-
-	while (i < word.length) {
-		const ansiResult = extractAnsiCode(word, i);
-		if (ansiResult) {
-			segments.push({ type: "ansi", value: ansiResult.code });
-			i += ansiResult.length;
-		} else {
-			// Find the next ANSI code or end of string
-			let end = i;
-			while (end < word.length) {
-				const nextAnsi = extractAnsiCode(word, end);
-				if (nextAnsi) break;
-				end++;
-			}
-			// Segment this non-ANSI portion into graphemes
-			const textPortion = word.slice(i, end);
-			for (const seg of segmenter.segment(textPortion)) {
-				segments.push({ type: "grapheme", value: seg.segment });
-			}
-			i = end;
-		}
-	}
-
-	// Now process segments
-	for (const seg of segments) {
-		if (seg.type === "ansi") {
-			currentLine += seg.value;
-			tracker.process(seg.value);
-			continue;
-		}
-
-		const grapheme = seg.value;
-		// Skip empty graphemes to avoid issues with string-width calculation
-		if (!grapheme) continue;
-
-		const graphemeWidth = visibleWidth(grapheme);
-
-		if (currentWidth + graphemeWidth > width) {
-			// Add specific reset for underline only (preserves background)
-			const lineEndReset = tracker.getLineEndReset();
-			if (lineEndReset) {
-				currentLine += lineEndReset;
-			}
-			lines.push(currentLine);
-			currentLine = tracker.getActiveCodes();
-			currentWidth = 0;
-		}
-
-		currentLine += grapheme;
-		currentWidth += graphemeWidth;
-	}
-
-	if (currentLine) {
-		// No reset at end of final segment - caller handles continuation
-		lines.push(currentLine);
-	}
-
-	return lines.length > 0 ? lines : [""];
-}
-
 /**
  * Apply background color to a line, padding to full width.
  *
@@ -782,7 +475,7 @@ export function sliceWithWidth(
 		while (textEnd < line.length && !extractAnsiCode(line, textEnd)) textEnd++;
 
 		for (const { segment } of segmenter.segment(line.slice(i, textEnd))) {
-			const w = graphemeWidth(segment);
+			const w = visibleWidth(segment);
 			const inRange = currentCol >= startCol && currentCol < endCol;
 			const fits = !strict || currentCol + w <= endCol;
 			if (inRange && fits) {
@@ -850,7 +543,7 @@ export function extractSegments(
 		while (textEnd < line.length && !extractAnsiCode(line, textEnd)) textEnd++;
 
 		for (const { segment } of segmenter.segment(line.slice(i, textEnd))) {
-			const w = graphemeWidth(segment);
+			const w = visibleWidth(segment);
 
 			if (currentCol < beforeEnd) {
 				if (pendingAnsiBefore) {