fix(terminal): wrap long wide-char words by visible width, not code-point count (#96746)

ly-wang19 · claude · web-flow · commit f857e8d66eb3 · 2026-06-27T08:50:45.000-07:00
wrapNoteMessage measures every fit decision in visible columns, but its
splitLongWord fallback (for a single word longer than the line budget) sliced
the word into groups of maxLen code points. maxLen is a visible-column budget,
so a run of wide characters (CJK / fullwidth / emoji, 2 columns each) produced
lines up to twice the budget — e.g. a 24-char CJK word at maxWidth 20 emitted a
40-column line.

Accumulate grapheme visible width (the same unit visibleWidth uses) and start a
new segment when the next grapheme would exceed maxLen, so every wrapped segment
fits the budget; a single grapheme wider than the budget still emits, preserving
progress. ASCII wrapping is unchanged.

Co-authored-by: ly-wang19 &lt;ly-wang19@users.noreply.github.com&gt;
Co-authored-by: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/terminal-core/src/note.ts b/packages/terminal-core/src/note.ts
@@ -1,7 +1,7 @@
 // Terminal Core module implements note behavior.
 import { AsyncLocalStorage } from "node:async_hooks";
 import { note as clackNote } from "@clack/prompts";
-import { visibleWidth } from "./ansi.js";
+import { splitGraphemes, visibleWidth } from "./ansi.js";
 import { stylePromptTitle } from "./prompt-style.js";
 import { normalizeLowercaseStringOrEmpty } from "./string.js";
 
@@ -26,10 +26,23 @@ function splitLongWord(word: string, maxLen: number): string[] {
   if (maxLen <= 0) {
     return [word];
   }
-  const chars = Array.from(word);
+  // maxLen is a visible-column budget, so accumulate grapheme visible width (CJK/emoji count as 2
+  // columns) instead of code-point count; otherwise a wide-char run overflows the line by up to 2x.
   const parts: string[] = [];
-  for (let i = 0; i < chars.length; i += maxLen) {
-    parts.push(chars.slice(i, i + maxLen).join(""));
+  let current = "";
+  let currentWidth = 0;
+  for (const grapheme of splitGraphemes(word)) {
+    const width = visibleWidth(grapheme);
+    if (current && currentWidth + width > maxLen) {
+      parts.push(current);
+      current = "";
+      currentWidth = 0;
+    }
+    current += grapheme;
+    currentWidth += width;
+  }
+  if (current) {
+    parts.push(current);
   }
   return parts.length > 0 ? parts : [word];
 }
diff --git a/packages/terminal-core/src/table.test.ts b/packages/terminal-core/src/table.test.ts
@@ -383,4 +383,16 @@ describe("wrapNoteMessage", () => {
     expect(wrapNoteMessage(new Error("boom"), { maxWidth: 20, columns: 80 })).toBe("Error: boom");
     expect(wrapNoteMessage({ message: "boom" }, { maxWidth: 20, columns: 80 })).toBe("");
   });
+
+  it("keeps wrapped lines within the visible-column budget for wide (CJK) words", () => {
+    // A long CJK run with no separators reaches splitLongWord; each fullwidth char is 2 columns,
+    // so splitting by code-point count would emit lines up to 2x the budget.
+    const input = "東京特許許可局長今日休暇許可局長今日休暇東京特許";
+    const lines = wrapNoteMessage(input, { maxWidth: 20, columns: 80 }).split("\n");
+
+    for (const line of lines) {
+      expect(visibleWidth(line)).toBeLessThanOrEqual(20);
+    }
+    expect(lines.join("")).toBe(input);
+  });
 });
