feat(cli): wrap CJK text by character while preserving English words and cursor alignment

Author: qorzj

package-lock.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@vegamo/deepcode-core": "file:../core",
+    "ansi-regex": "^6.2.2",
     "chalk": "^5.6.2",
     "gradient-string": "^3.0.0",
     "ignore": "^7.0.5",

packages/cli/package.json

@@ -236,6 +236,21 @@ test("MessageView keeps prompt words together in user and model-change echoes",
   }
 });
 
+test("MessageView fills remaining columns with Chinese while preserving English words", () => {
+  for (const role of ["user", "system"] as const) {
+    for (const [content, expected] of [
+      ["aaaaaa 君不见高堂明镜悲白发", " > aaaaaa 君\n   不见高堂明\n   镜悲白发\n"],
+      ["中文hello世界", " > 中文hello\n   世界\n"],
+      ["中文 hello world", " > 中文 hello\n    world\n"],
+      ["君不见黄河之水天上来\n君不见高堂明镜悲白发", " > 君不见黄河\n   之水天上来\n   君不见高堂\n   明镜悲白发\n"],
+    ]) {
+      const message = makeSessionMessage({ role, content, meta: { isModelChange: true } });
+      const output = renderToString(React.createElement(MessageView, { message, width: 13 }), { columns: 13 });
+      assert.equal(stripAnsi(output), expected);
+    }
+  }
+});
+
 test("MessageView echoes model changes with submitted prompt wrapping", () => {
   const msg = makeSessionMessage({
     role: "system",

packages/cli/src/tests/message-view.test.ts

@@ -1,8 +1,9 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
 import React from "react";
-import { Box, Text, renderToString } from "ink";
+import { Box, renderToString } from "ink";
 import stringWidth from "string-width";
+import { PromptText } from "../ui/components/PromptText";
 
 const ANSI_RE = /\u001b\[[0-9;]*m/g;
 function stripAnsi(text: string): string {
@@ -507,7 +508,7 @@ test("prompt cursor follows the whole word after its source offset", () => {
   }
 });
 
-test("prompt cursor cells agree with Ink word wrapping and inline ANSI styling", () => {
+test("prompt cursor cells agree with prompt wrapping and inline ANSI styling", () => {
   for (const [text, width] of [
     ["", 10],
     ["hello world", 10],
@@ -517,6 +518,11 @@ test("prompt cursor cells agree with Ink word wrapping and inline ANSI styling",
     ["hello  world  ", 10],
     ["你好世界", 5],
     ["hi 你好 world", 10],
+    ["aaaaaa 君不见高堂明镜悲白发", 10],
+    ["中文hello世界", 10],
+    ["请使用 hello world 测试中文换行", 12],
+    ["hello你好\n世界 cafe\u0301 👩‍💻", 10],
+    ["你好 [paste #1 1234 chars] 世界", 10],
     ["cafe\u0301 😀 👩‍💻 world", 10],
     ["abc", 0],
     ["hello [paste #1 1234 chars]", 10],
@@ -530,8 +536,8 @@ test("prompt cursor cells agree with Ink word wrapping and inline ANSI styling",
           Box,
           { width: columns },
           React.createElement(
-            Text,
-            { wrap: "wrap" },
+            PromptText,
+            { width: columns },
             renderBufferWithCursor(state, true, undefined, new Map([[1, "paste"]]))
           )
         ),

packages/cli/src/tests/prompt-input-keys.test.ts

@@ -4,9 +4,8 @@ import React from "react";
 import { PromptInput, type PromptSubmission } from "../ui/views/PromptInput";
 import { terminal } from "./terminal-helper";
 
-test("PromptInput wraps words, switches cursor modes and submits the original buffer", async (t) => {
-  const submissions: PromptSubmission[] = [];
-  const props = {
+function inputProps(submissions: PromptSubmission[]) {
+  return {
     projectRoot: process.cwd(),
     screenWidth: 12,
     skills: [],
@@ -23,6 +22,11 @@ test("PromptInput wraps words, switches cursor modes and submits the original bu
     onPlanModeChange() {},
     onInterrupt() {},
   };
+}
+
+test("PromptInput wraps words, switches cursor modes and submits the original buffer", async (t) => {
+  const submissions: PromptSubmission[] = [];
+  const props = inputProps(submissions);
   const h = await terminal(t, React.createElement(PromptInput, props), 24);
   await h.send("hello");
   assert.match(h.frame(), /> hello/);
@@ -50,3 +54,54 @@ test("PromptInput wraps words, switches cursor modes and submits the original bu
   await h.send("\r");
   assert.equal(submissions[0]?.text, "hello world");
 });
+
+test("PromptInput wraps Chinese by character and edits across the wrap without changing submitted whitespace", async (t) => {
+  const submissions: PromptSubmission[] = [];
+  const h = await terminal(t, React.createElement(PromptInput, inputProps(submissions)), 12);
+  const text = "aaaaaa 君不见高堂明镜悲白发\nhello  world";
+  await h.send(`\x1b[200~${text}\x1b[201~`);
+  assert.match(h.frame(), /> aaaaaa 君\s*\n {2}不见高堂明\s*\n {2}镜悲白发/);
+
+  await h.send("\x1b[A");
+  await h.send("\x01");
+  for (let i = 0; i < 8; i++) await h.send("\x1b[C");
+  assert.ok(h.rawFrame().includes("\x1b[7m不\x1b[27m"));
+  await h.send("天");
+  assert.match(h.frame(), /> aaaaaa 君\s*\n {2}天不见高堂/);
+  await h.send("\x7f");
+  await h.send("\x1b[3~");
+  await h.send("不");
+  await h.send("\r");
+  assert.equal(submissions[0]?.text, text);
+});
+
+test("PromptInput reflows mixed Chinese and English when resized and preserves the cursor", async (t) => {
+  const submissions: PromptSubmission[] = [];
+  const props = inputProps(submissions);
+  const h = await terminal(t, React.createElement(PromptInput, props), 24);
+  await h.send("aaaaaa 君不见");
+  await h.send("\x1b[D");
+  assert.ok(h.rawFrame().includes("\x1b[7m见\x1b[27m"));
+
+  h.rerender(React.createElement(PromptInput, { ...props, screenWidth: 24 }));
+  await h.send("天");
+  assert.match(h.frame(), /> aaaaaa 君不天见/);
+  h.rerender(React.createElement(PromptInput, props));
+  await h.send("\x7f");
+  assert.match(h.frame(), /> aaaaaa 君\s*\n {2}不见/);
+  await h.send("\r");
+  assert.equal(submissions[0]?.text, "aaaaaa 君不见");
+});
+
+test("PromptInput uses the same Chinese wrapping in highlighted history previews", async (t) => {
+  const submissions: PromptSubmission[] = [];
+  const text = "aaaaaa 君不见高堂明镜悲白发";
+  const props = { ...inputProps(submissions), promptHistory: [text] };
+  const h = await terminal(t, React.createElement(PromptInput, props), 12);
+  await h.send("\x12君不见");
+  assert.match(h.frame(), /> aaaaaa 君\s*\n {2}不见高堂明/);
+  await h.send("\r");
+  assert.equal(submissions.length, 0);
+  await h.send("\r");
+  assert.equal(submissions[0]?.text, text);
+});

packages/cli/src/tests/prompt-input-wrap.test.ts

@@ -2,6 +2,7 @@ import { getDiffDetails, getDiffFilePath } from "@vegamo/deepcode-core";
 import { formatDisplayPath } from "../../core/display-path";
 import React from "react";
 import { Box, Text } from "ink";
+import { PromptText } from "../PromptText";
 import { renderMarkdown, renderMarkdownSegments } from "./markdown";
 import {
   buildThinkingSummary,
@@ -172,9 +173,9 @@ function PromptEchoLine({
         <Text color="#229ac3">{"> "}</Text>
       </Box>
       <Box flexGrow={1} flexShrink={1} width={contentWidth}>
-        <Text color="#229ac3" wrap="wrap">
+        <PromptText color="#229ac3" width={contentWidth}>
           {text}
-        </Text>
+        </PromptText>
         {attachmentCount > 0 ? <Text color="#229ac3">{`  📎 ${attachmentCount} image attachment(s)`}</Text> : null}
       </Box>
     </Box>

packages/cli/src/ui/components/MessageView/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Text, Transform } from "ink";
+import { wrapPromptText } from "../../core/prompt-wrap";
+
+/** Apply the same wrapping to styled prompt text and its cursor measurement. */
+export function PromptText({
+  width,
+  children,
+  ...props
+}: React.ComponentProps<typeof Text> & { width: number }): React.ReactElement {
+  return (
+    <Text {...props} wrap="wrap">
+      <Transform transform={(text) => wrapPromptText(text, width)}>{children}</Transform>
+    </Text>
+  );
+}

packages/cli/src/ui/components/PromptText/index.tsx

@@ -0,0 +1,100 @@
+import ansiRegex from "ansi-regex";
+import stringWidth from "string-width";
+import wrapAnsi from "wrap-ansi";
+
+const graphemes = new Intl.Segmenter();
+const cjk = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
+
+type Cell = { text: string; width: number; separate: boolean; space: boolean };
+
+/** Preserve Latin words while allowing a line break between CJK graphemes. */
+export function wrapPromptText(text: string, columns: number): string {
+  const width = Math.max(1, columns);
+  if (!cjk.test(text)) return wrapAnsi(text, width, { trim: false, hard: true });
+
+  const wrapped = text
+    .normalize()
+    .replaceAll("\r\n", "\n")
+    .split("\n")
+    .map((line) => wrapCjkLine(line, width))
+    .join("\n");
+
+  // Close and reopen ANSI styles at inserted line breaks, without regrouping
+  // the CJK characters into words. This also keeps inline cursor styling local.
+  return wrapAnsi(wrapped, width, { trim: false, hard: true, wordWrap: false });
+}
+
+function wrapCjkLine(line: string, width: number): string {
+  const cells: Cell[] = [];
+  let pendingAnsi = "";
+  let logicalColumn = 0;
+  const appendText = (text: string) => {
+    for (const { segment } of graphemes.segment(text)) {
+      const value = segment === "\t" ? " ".repeat(8 - (logicalColumn % 8)) : segment;
+      const parts = segment === "\t" ? Array.from(value) : [value];
+      for (const part of parts) {
+        const cellWidth = stringWidth(part);
+        cells.push({
+          text: pendingAnsi + part,
+          width: cellWidth,
+          separate: part === " " || cjk.test(part),
+          space: part === " ",
+        });
+        pendingAnsi = "";
+        logicalColumn += cellWidth;
+      }
+    }
+  };
+
+  let offset = 0;
+  for (const match of line.matchAll(ansiRegex())) {
+    appendText(line.slice(offset, match.index));
+    pendingAnsi += match[0];
+    offset = match.index + match[0].length;
+  }
+  appendText(line.slice(offset));
+
+  const output: string[] = [];
+  let column = 0;
+  const newline = () => {
+    output.push("\n");
+    column = 0;
+  };
+  const appendWord = (word: Cell[]) => {
+    const wordWidth = word.reduce((total, cell) => total + cell.width, 0);
+    if (wordWidth <= width) {
+      if (column > 0 && column + wordWidth > width) newline();
+    } else {
+      // Match wrap-ansi's handling of oversized Latin words: move the word
+      // first only when doing so avoids an extra line break.
+      const breaksHere = 1 + Math.floor((wordWidth - (width - column) - 1) / width);
+      const breaksNext = Math.floor((wordWidth - 1) / width);
+      if (column > 0 && breaksNext < breaksHere) newline();
+    }
+    for (const cell of word) {
+      if (column > 0 && column + cell.width > width) newline();
+      output.push(cell.text);
+      column += cell.width;
+    }
+  };
+
+  let word: Cell[] = [];
+  for (const cell of cells) {
+    if (!cell.separate) {
+      word.push(cell);
+      continue;
+    }
+    appendWord(word);
+    word = [];
+    if (cell.space) {
+      if (column >= width) newline();
+      output.push(cell.text);
+      column += cell.width;
+    } else {
+      appendWord([cell]);
+    }
+  }
+  appendWord(word);
+  output.push(pendingAnsi);
+  return output.join("");
+}

packages/cli/src/ui/core/prompt-wrap.ts

@@ -1,10 +1,10 @@
 import { useCursor, useBoxMetrics } from "ink";
 import stringWidth from "string-width";
-import wrapAnsi from "wrap-ansi";
 import { useLayoutEffect, useState } from "react";
 import type { RefObject } from "react";
 import type { DOMElement } from "ink";
 import type { PromptBufferState } from "../core/prompt-buffer";
+import { wrapPromptText } from "../core/prompt-wrap";
 
 export type CursorPlacement = {
   row: number;
@@ -86,10 +86,9 @@ function measurePromptCursor(state: PromptBufferState, screenWidth: number, init
       }
     }
 
-    // Match Ink's Text wrap="wrap", including preserved spaces and hard
-    // breaks for oversized words. The suffix matters even before the cursor:
+    // Use the same CJK-aware wrapping as PromptText. The suffix matters even before the cursor:
     // it can move the entire word containing that cursor onto the next row.
-    const rows = wrapAnsi(normalized, contentWidth, { trim: false, hard: true }).split("\n");
+    const rows = wrapPromptText(normalized, contentWidth).split("\n");
     if (cursor > sourceStart + line.length) {
       row += rows.length;
       sourceStart += line.length + 1;

packages/cli/src/ui/hooks/cursor.ts

@@ -5,6 +5,7 @@ import { Box, Text, useStdout } from "ink";
 import type { DOMElement } from "ink";
 import chalk from "chalk";
 import { ARGS_SEPARATOR } from "../constants";
+import { PromptText } from "../components/PromptText";
 import {
   EMPTY_BUFFER,
   PASTE_MARKER_REGEX,
@@ -974,7 +975,7 @@ export const PromptInput = React.memo(function PromptInput({
       >
         <PromptPrefixLine />
         <Box ref={inputTextRef} flexGrow={1} flexShrink={1} width={inputContentWidth}>
-          <Text wrap="wrap">
+          <PromptText width={inputContentWidth}>
             {search?.preview !== null && search?.preview !== undefined ? (
               <HistoryPreview text={search.preview} query={search.query} />
             ) : (
@@ -986,7 +987,7 @@ export const PromptInput = React.memo(function PromptInput({
                 !busy && !terminalCursorActive && !search
               )
             )}
-          </Text>
+          </PromptText>
           {inlineHint ? <Text dimColor>{inlineHint}</Text> : null}
         </Box>
       </Box>