pi-mono/packages/tui/test/wrap-ansi.test.ts
Petr Houška 2ce9d527d9
fix(tui): drop space after styled word at wrap boundary, reset strikethrough at line end (#11591)
Fixes #10925.

## Problem

`splitIntoTokensWithAnsi()` attaches pending escape codes to the next
visible character. The code that closes a styled word therefore lands on
the following space: `**commodo** consequat` tokenizes as
`\x1b[1mcommodo`, `\x1b[22m `, `consequat`.

`wrapSingleLine()` detected whitespace with `token.trim() === ""`, which
is false for `"\x1b[22m "`. When the styled word ended exactly at the
wrap width, that space was treated as a word and moved to the next line:

```
before: ["aaaa \x1b[1mbold", "\x1b[1m\x1b[22m next", "word"]   (width 9)
after:  ["aaaa \x1b[1mbold\x1b[22m", "next word"]
```

Because the closing code moved to the next line, the style also stayed
open into the right padding of the wrapped line. Separately,
`getLineEndReset()` closed only underline at line end, so strikethrough
that spans a wrap continued into the padding.

## Fix

- Detect whitespace tokens after stripping escape codes.
- When a whitespace token is dropped at a wrap, append its escape codes
to the wrapped line and update the tracker, so the style closes there
and is not re-opened on the next line.
- Close strikethrough (`\x1b[29m`) at line end, like underline.
`getActiveCodes()` re-opens it on the next line. Background is
unaffected.
- Whitespace wider than an empty line that carries codes (e.g.
background spaces followed by a trailing reset) keeps only the codes.
Without this, treating it as whitespace skipped the long-token path, and
the trailing reset blocked the final `trimEnd()`, leaving a line wider
than `width`.
- When a long word follows, the line before it is now trimmed before the
line-end reset is added. Otherwise the reset (now also emitted for
strikethrough) blocks the final `trimEnd()` and leaves trailing spaces.

## Tests

- `wrap-ansi.test.ts`: boundary closing code, dropped space with a color
reset, strikethrough reset and restore across a wrap, strikethrough
reset with background preserved.
- `markdown.test.ts`: padded Markdown with a background at an exact
boundary for bold and strikethrough.
- The new tests fail without the fix. With the old code, rendering the
issue text through `UserMessageComponent` (dark theme, padding 1) at
widths 40-120 produced 5 bad lines at width 78. With the fix it produces
none.
- Fuzzing over 1.2M random styled inputs with SGR and OSC 8 codes found
no line wider than `width`, and no case where the old wrapper laid out
text the same as the unstyled input but the new one does not.
- Benchmark (`wrapTextWithAnsi`, width 77, about 5-18k chars, median of
6 processes) against `main`: plain -5%, light styling -0.5%, heavy
styling +1%, long strikethrough +0%, all within noise. The whitespace
check scans character codes and stops at the first visible text instead
of allocating a stripped copy.
- `npm run check` passes. All `packages/tui` tests pass. `./test.sh`
shows no new failures; the remaining failures are environment-specific:
the clipboard tests also fail on `main` here, and the durable, env
(ssh), and chord failures are in packages that do not depend on
`pi-tui`.
2026-10-29 22:08:18 +01:00

317 lines
11 KiB
TypeScript

import assert from "node:assert";
import { describe, it } from "node:test";
import { visibleWidth, wrapTextWithAnsi } from "../src/utils.ts";
describe("wrapTextWithAnsi", () => {
describe("underline styling", () => {
it("should not apply underline style before the styled text", () => {
const underlineOn = "\x1b[4m";
const underlineOff = "\x1b[24m";
const url = "https://example.com/very/long/path/that/will/wrap";
const text = `read this thread ${underlineOn}${url}${underlineOff}`;
const wrapped = wrapTextWithAnsi(text, 40);
// First line should NOT contain underline code - it's just "read this thread"
assert.strictEqual(wrapped[0], "read this thread");
// Second line should start with underline, have URL content
assert.strictEqual(wrapped[1].startsWith(underlineOn), true);
assert.ok(wrapped[1].includes("https://"));
});
it("should not have whitespace before underline reset code", () => {
const underlineOn = "\x1b[4m";
const underlineOff = "\x1b[24m";
const textWithUnderlinedTrailingSpace = `${underlineOn}underlined text here ${underlineOff}more`;
const wrapped = wrapTextWithAnsi(textWithUnderlinedTrailingSpace, 18);
assert.ok(!wrapped[0].includes(` ${underlineOff}`));
});
it("should not bleed underline to padding - each line should end with reset for underline only", () => {
const underlineOn = "\x1b[4m";
const underlineOff = "\x1b[24m";
const url = "https://example.com/very/long/path/that/will/definitely/wrap";
const text = `prefix ${underlineOn}${url}${underlineOff} suffix`;
const wrapped = wrapTextWithAnsi(text, 30);
// Middle lines (with underlined content) should end with underline-off, not full reset
// Line 1 and 2 contain underlined URL parts
for (let i = 1; i < wrapped.length - 1; i++) {
const line = wrapped[i];
if (line.includes(underlineOn)) {
// Should end with underline off, NOT full reset
assert.strictEqual(line.endsWith(underlineOff), true);
assert.strictEqual(line.endsWith("\x1b[0m"), false);
}
}
});
});
// #10925
describe("styled words at the wrap boundary", () => {
it("keeps the closing code on the wrapped line and drops the following space", () => {
assert.deepStrictEqual(wrapTextWithAnsi("aaaa \x1b[1mbold\x1b[22m next word", 9), [
"aaaa \x1b[1mbold\x1b[22m",
"next word",
]);
});
it("does not re-open a style closed by the dropped space", () => {
assert.deepStrictEqual(wrapTextWithAnsi("aaaa \x1b[31mred\x1b[39m next", 8), [
"aaaa \x1b[31mred\x1b[39m",
"next",
]);
});
it("does not exceed width for styled whitespace wider than the line", () => {
for (const text of [
`\x1b[41m${" ".repeat(20)}\x1b[0m`,
`ab\x1b[41m${" ".repeat(20)}\x1b[49mcd`,
`\x1b[33m${" ".repeat(20)}x\x1b[39m`,
]) {
for (const line of wrapTextWithAnsi(text, 10)) {
assert.ok(visibleWidth(line) <= 10, JSON.stringify(line));
}
}
});
it("trims trailing spaces before the line-end reset when a long word follows", () => {
assert.deepStrictEqual(wrapTextWithAnsi("aaa\x1b[9m abcdefghij\x1b[29m", 9), [
"aaa\x1b[9m\x1b[29m",
"\x1b[9mabcdefghi\x1b[29m",
"\x1b[9mj\x1b[29m",
]);
});
it("resets strikethrough at line end and restores it on the next line", () => {
assert.deepStrictEqual(wrapTextWithAnsi("aaaa \x1b[9mstrike me\x1b[29m next", 12), [
"aaaa \x1b[9mstrike\x1b[29m",
"\x1b[9mme\x1b[29m next",
]);
});
it("preserves background when resetting strikethrough at line end", () => {
assert.deepStrictEqual(wrapTextWithAnsi("\x1b[41;9mstrike me\x1b[0m", 6), [
"\x1b[41;9mstrike\x1b[29m",
"\x1b[9;41mme\x1b[0m",
]);
});
});
describe("background color preservation", () => {
it("should preserve background color across wrapped lines without full reset", () => {
const bgBlue = "\x1b[44m";
const reset = "\x1b[0m";
const text = `${bgBlue}hello world this is blue background text${reset}`;
const wrapped = wrapTextWithAnsi(text, 15);
// Each line should have background color
for (const line of wrapped) {
assert.ok(line.includes(bgBlue));
}
// Middle lines should NOT end with full reset (kills background for padding)
for (let i = 0; i < wrapped.length - 1; i++) {
assert.strictEqual(wrapped[i].endsWith("\x1b[0m"), false);
}
});
it("should reset underline but preserve background when wrapping underlined text inside background", () => {
const underlineOn = "\x1b[4m";
const underlineOff = "\x1b[24m";
const reset = "\x1b[0m";
const text = `\x1b[41mprefix ${underlineOn}UNDERLINED_CONTENT_THAT_WRAPS${underlineOff} suffix${reset}`;
const wrapped = wrapTextWithAnsi(text, 20);
// All lines should have background color 41 (either as \x1b[41m or combined like \x1b[4;41m)
for (const line of wrapped) {
const hasBgColor = line.includes("[41m") || line.includes(";41m") || line.includes("[41;");
assert.ok(hasBgColor);
}
// Lines with underlined content should use underline-off at end, not full reset
for (let i = 0; i < wrapped.length - 1; i++) {
const line = wrapped[i];
// If this line has underline on, it should end with underline off (not full reset)
if (
(line.includes("[4m") || line.includes("[4;") || line.includes(";4m")) &&
!line.includes(underlineOff)
) {
assert.strictEqual(line.endsWith(underlineOff), true);
assert.strictEqual(line.endsWith("\x1b[0m"), false);
}
}
});
});
describe("basic wrapping", () => {
it("should handle LF, CRLF, and CR line endings", () => {
assert.deepStrictEqual(wrapTextWithAnsi("first\nsecond\r\nthird\rfourth", 80), [
"first",
"second",
"third",
"fourth",
]);
});
it("should preserve ANSI state across CRLF and CR line endings", () => {
const red = "\x1b[31m";
const reset = "\x1b[0m";
assert.deepStrictEqual(wrapTextWithAnsi(`${red}first\r\nsecond\rthird${reset}`, 80), [
`${red}first`,
`${red}second`,
`${red}third${reset}`,
]);
});
it("should wrap plain text correctly", () => {
const text = "hello world this is a test";
const wrapped = wrapTextWithAnsi(text, 10);
assert.ok(wrapped.length > 1);
for (const line of wrapped) {
assert.ok(visibleWidth(line) <= 10);
}
});
it("should break CJK runs at grapheme boundaries after Latin text", () => {
const text = "This is an example 中文汉字测试段落内容中文汉字测试段落内容.";
const wrapped = wrapTextWithAnsi(text, 40);
assert.deepStrictEqual(wrapped, ["This is an example 中文汉字测试段落内容", "中文汉字测试段落内容."]);
for (const line of wrapped) {
assert.ok(visibleWidth(line) <= 40);
}
});
it("should preserve color codes when wrapping CJK runs", () => {
const red = "\x1b[31m";
const reset = "\x1b[0m";
const text = `${red}This is an example 中文汉字测试段落内容中文汉字测试段落内容.${reset}`;
const wrapped = wrapTextWithAnsi(text, 40);
assert.strictEqual(wrapped.length, 2);
assert.strictEqual(wrapped[0], `${red}This is an example 中文汉字测试段落内容`);
assert.strictEqual(wrapped[1], `${red}中文汉字测试段落内容.${reset}`);
for (const line of wrapped) {
assert.ok(visibleWidth(line) <= 40);
}
});
it("should ignore OSC 133 semantic markers in visible width", () => {
const text = "\x1b]133;A\x07hello\x1b]133;B\x07";
assert.strictEqual(visibleWidth(text), 5);
});
it("should ignore OSC sequences terminated with ST in visible width", () => {
const text = "\x1b]133;A\x1b\\hello\x1b]133;B\x1b\\";
assert.strictEqual(visibleWidth(text), 5);
});
it("should treat isolated regional indicators as width 2", () => {
assert.strictEqual(visibleWidth("🇨"), 2);
assert.strictEqual(visibleWidth("🇨🇳"), 2);
});
it("should truncate trailing whitespace that exceeds width", () => {
const twoSpacesWrappedToWidth1 = wrapTextWithAnsi(" ", 1);
assert.ok(visibleWidth(twoSpacesWrappedToWidth1[0]) <= 1);
});
it("should preserve color codes across wraps", () => {
const red = "\x1b[31m";
const reset = "\x1b[0m";
const text = `${red}hello world this is red${reset}`;
const wrapped = wrapTextWithAnsi(text, 10);
// Each continuation line should start with red code
for (let i = 1; i < wrapped.length; i++) {
assert.strictEqual(wrapped[i].startsWith(red), true);
}
// Middle lines should not end with full reset
for (let i = 0; i < wrapped.length - 1; i++) {
assert.strictEqual(wrapped[i].endsWith("\x1b[0m"), false);
}
});
});
});
describe("wrapTextWithAnsi with OSC 8 hyperlinks", () => {
it("re-emits OSC 8 open at the start of continuation lines", () => {
// A hyperlink whose text is long enough to wrap
const url = "https://example.com";
// OSC 8 open + text that is 10 visible chars + OSC 8 close
const input = `\x1b]8;;${url}\x1b\\0123456789\x1b]8;;\x1b\\`;
const lines = wrapTextWithAnsi(input, 6);
// Every line that contains visible text from inside the hyperlink
// should start with the OSC 8 open sequence (or be preceded by it).
for (const line of lines) {
// If the line has visible content it must begin with the OSC 8 re-open
// OR it is the line where the close appeared with no following content.
const stripped = line.replace(/\x1b\]8;;[^\x1b\x07]*\x1b\\/g, "").replace(/\x1b\[[0-9;]*m/g, "");
if (stripped.trim().length > 0) {
assert.ok(
line.startsWith(`\x1b]8;;${url}\x1b\\`) || line.includes(`\x1b]8;;${url}\x1b\\`),
`Line "${line}" has visible text but no OSC 8 re-open`,
);
}
}
});
it("closes OSC 8 before each line break", () => {
const url = "https://example.com";
const input = `\x1b]8;;${url}\x1b\\0123456789\x1b]8;;\x1b\\`;
const lines = wrapTextWithAnsi(input, 6);
for (let i = 0; i < lines.length - 1; i++) {
const line = lines[i];
// Every non-final line that is inside a hyperlink should end with the close
if (line.includes(`\x1b]8;;${url}\x1b\\`)) {
assert.ok(
line.endsWith("\x1b]8;;\x1b\\"),
`Non-final line "${line}" is inside a hyperlink but does not close it`,
);
}
}
});
it("preserves BEL terminators when wrapping OAuth-style hyperlinks", () => {
const url = `https://example.com/oauth/${"a".repeat(32)}`;
const input = `\x1b]8;;${url}\x07${url}\x1b]8;;\x07`;
const lines = wrapTextWithAnsi(input, 20);
assert.ok(lines.length > 1);
for (const line of lines) {
assert.ok(line.includes(`\x1b]8;;${url}\x07`), `Line "${line}" does not reopen the hyperlink with BEL`);
assert.ok(!line.includes(`\x1b]8;;${url}\x1b\\`), `Line "${line}" reopens the hyperlink with ST`);
}
for (const line of lines.slice(0, -1)) {
assert.ok(line.endsWith("\x1b]8;;\x07"), `Line "${line}" does not close the hyperlink with BEL`);
}
});
it("does not emit OSC 8 sequences on lines that are outside the hyperlink", () => {
const url = "https://example.com";
const input = `before \x1b]8;;${url}\x1b\\link\x1b]8;;\x1b\\ after`;
const lines = wrapTextWithAnsi(input, 80);
// With width 80 everything fits on one line; there should be exactly one
// OSC 8 open and one OSC 8 close.
assert.strictEqual(lines.length, 1);
const openCount = (lines[0].match(/\x1b\]8;;https:[^\x1b]+\x1b\\/g) ?? []).length;
const closeCount = (lines[0].match(/\x1b\]8;;\x1b\\/g) ?? []).length;
assert.strictEqual(openCount, 1);
assert.strictEqual(closeCount, 1);
});
});