fix(cli): align markdown tables with emoji and prevent terminal wrap

visualWidth miscounted flag emoji (🇧🇷 = 4 cells instead of 2), keycap
sequences (0️⃣ counted variation selector and combining keycap as 1 each),
and ZWJ/tag modifiers — leaving cells too narrow and pipes misaligned.

Also reserve one terminal column for the cursor so full-width tables don't
soft-wrap at the right edge.

Author: dengmik-commits

packages/cli/src/tests/markdown.test.ts

@@ -95,6 +95,186 @@ test("renderMarkdown preserves empty table cells", () => {
   assert.equal((bodyRow.match(/│/g) ?? []).length, 4);
 });
 
+test("renderMarkdown aligns table borders when rows contain flag emoji", () => {
+  // Flag emoji (🇧🇷) are regional-indicator pairs — each code is wide by
+  // EastAsianWidth, but together they render as one 2-cell flag. visualWidth
+  // must treat the pair as 2 cells, otherwise data rows misalign with borders.
+  const table = [
+    "| 对阵 | 比分 | 状态 |",
+    "|---|---|---|",
+    "| 🇧🇷 巴西 vs 🇳🇴 挪威 | 1 - 2 | 已结束 |",
+    "| 🇲🇽 墨西哥 vs 🏴󠁧󠁢󠁥󠁮󠁧󠁿 英格兰 | 1 - 2 | 进行中 |",
+  ].join("\n");
+
+  const segment = renderMarkdownSegments(table, 120).find((item) => item.kind === "table");
+  assert.ok(segment);
+  const stripped = stripAnsi(segment.body);
+  const lines = stripped.split("\n");
+  const border = lines.find((l) => l.startsWith("├"));
+  assert.ok(border);
+
+  // Border lines contain only single-cell box characters, so character index
+  // equals visual column there. Collect every pipe position on the border.
+  const expectedCols: number[] = [];
+  for (let i = 0; i < border.length; i++) {
+    const c = border[i];
+    if (c === "├" || c === "┼" || c === "┤") expectedCols.push(i);
+  }
+  assert.ok(expectedCols.length >= 3);
+
+  // On data rows the character index of '│' is NOT the visual column (emoji
+  // and CJK shift things), so walk the string tracking visual width to find
+  // the visual column where each '│' actually lands.
+  const visualColsOfPipes = (line: string): number[] => {
+    const cols: number[] = [];
+    let col = 0;
+    const chars = Array.from(line);
+    for (let i = 0; i < chars.length; i++) {
+      const ch = chars[i];
+      if (ch === "│") {
+        cols.push(col);
+        col += 1;
+        continue;
+      }
+      const code = ch.codePointAt(0) ?? 0;
+      // Zero-width sequences: ZWJ, emoji tags, variation selectors, combining
+      // marks, and the keycap combining enclosure (U+20E3).
+      if (
+        code === 0x200d ||
+        (code >= 0xe0020 && code <= 0xe007f) ||
+        (code >= 0xfe00 && code <= 0xfe0f) ||
+        (code >= 0x0300 && code <= 0x036f) ||
+        code === 0x20e3
+      )
+        continue;
+      // Regional indicators form a flag pair — count 2 cells for the pair.
+      if (code >= 0x1f1e6 && code <= 0x1f1ff) {
+        const next = chars[i + 1]?.codePointAt(0) ?? 0;
+        if (next >= 0x1f1e6 && next <= 0x1f1ff) {
+          col += 2;
+          i++;
+          continue;
+        }
+      }
+      // Astral-plane chars (surrogate pairs) are wide.
+      if (ch.length >= 2) {
+        col += 2;
+        continue;
+      }
+      // CJK / fullwidth / pictographs are wide.
+      const isWide =
+        (code >= 0x1100 && code <= 0x115f) ||
+        (code >= 0x2e80 && code <= 0xa4cf) ||
+        (code >= 0xac00 && code <= 0xd7af) ||
+        (code >= 0xf900 && code <= 0xfaff) ||
+        (code >= 0xfe10 && code <= 0xfe6f) ||
+        (code >= 0xff00 && code <= 0xffe6) ||
+        (code >= 0x20000 && code <= 0x3fffd) ||
+        (code >= 0x1f300 && code <= 0x1faff) ||
+        (code >= 0x2600 && code <= 0x27bf) ||
+        (code >= 0x2300 && code <= 0x23ff) ||
+        (code >= 0x2b00 && code <= 0x2bff) ||
+        (code >= 0x1f000 && code <= 0x1f02f);
+      col += isWide ? 2 : 1;
+    }
+    return cols;
+  };
+
+  for (const line of lines) {
+    if (!line.includes("│") || line.startsWith("┌") || line.startsWith("├") || line.startsWith("└")) continue;
+    assert.deepEqual(
+      visualColsOfPipes(line),
+      expectedCols,
+      `data row pipes must line up with border crossings: ${line}`
+    );
+  }
+});
+
+test("renderMarkdown aligns table borders when rows contain keycap emoji", () => {
+  // Keycap emoji like 0️⃣ are a base digit + U+FE0F variation selector + U+20E3
+  // combining enclosing keycap. Both modifiers are zero-width — if visualWidth
+  // counts them as 1 each, the cell ends up 2 cells too wide and pipes misalign.
+  const table = [
+    "| 日期 | 对阵 | 比分 | 晋级方 | 备注 |",
+    "|---|---|---|---|---|",
+    "| 7月4日 | 加拿大 vs 摩洛哥 | 0️⃣ - 3 🏆 | 摩洛哥 | 首场1/8决赛 |",
+    "| 7月5日 | 巴西 vs 挪威 | 1️⃣ - 2 🏆 | 挪威 ⚡ | 大冷门！ |",
+    "| 7月6日 🟡 | 葡萄牙 vs 西班牙 | 今晚 7:00PM | ⏳ 待赛 | 伊比利亚德比🔥 |",
+  ].join("\n");
+
+  const segment = renderMarkdownSegments(table, 120).find((item) => item.kind === "table");
+  assert.ok(segment);
+  const stripped = stripAnsi(segment.body);
+  const lines = stripped.split("\n");
+  const border = lines.find((l) => l.startsWith("├"));
+  assert.ok(border);
+
+  const expectedCols: number[] = [];
+  for (let i = 0; i < border.length; i++) {
+    const c = border[i];
+    if (c === "├" || c === "┼" || c === "┤") expectedCols.push(i);
+  }
+
+  const visualColsOfPipes = (line: string): number[] => {
+    const cols: number[] = [];
+    let col = 0;
+    const chars = Array.from(line);
+    for (let i = 0; i < chars.length; i++) {
+      const ch = chars[i];
+      if (ch === "│") {
+        cols.push(col);
+        col += 1;
+        continue;
+      }
+      const code = ch.codePointAt(0) ?? 0;
+      if (
+        code === 0x200d ||
+        (code >= 0xe0020 && code <= 0xe007f) ||
+        (code >= 0xfe00 && code <= 0xfe0f) ||
+        (code >= 0x0300 && code <= 0x036f) ||
+        code === 0x20e3
+      )
+        continue;
+      if (code >= 0x1f1e6 && code <= 0x1f1ff) {
+        const next = chars[i + 1]?.codePointAt(0) ?? 0;
+        if (next >= 0x1f1e6 && next <= 0x1f1ff) {
+          col += 2;
+          i++;
+          continue;
+        }
+      }
+      if (ch.length >= 2) {
+        col += 2;
+        continue;
+      }
+      const isWide =
+        (code >= 0x1100 && code <= 0x115f) ||
+        (code >= 0x2e80 && code <= 0xa4cf) ||
+        (code >= 0xac00 && code <= 0xd7af) ||
+        (code >= 0xf900 && code <= 0xfaff) ||
+        (code >= 0xfe10 && code <= 0xfe6f) ||
+        (code >= 0xff00 && code <= 0xffe6) ||
+        (code >= 0x20000 && code <= 0x3fffd) ||
+        (code >= 0x1f300 && code <= 0x1faff) ||
+        (code >= 0x2600 && code <= 0x27bf) ||
+        (code >= 0x2300 && code <= 0x23ff) ||
+        (code >= 0x2b00 && code <= 0x2bff) ||
+        (code >= 0x1f000 && code <= 0x1f02f);
+      col += isWide ? 2 : 1;
+    }
+    return cols;
+  };
+
+  for (const line of lines) {
+    if (!line.includes("│") || line.startsWith("┌") || line.startsWith("├") || line.startsWith("└")) continue;
+    assert.deepEqual(
+      visualColsOfPipes(line),
+      expectedCols,
+      `data row pipes must line up with border crossings: ${line}`
+    );
+  }
+});
+
 test("renderMarkdown keeps text separated from rendered table blocks", () => {
   const result = stripAnsi(renderMarkdown("Before\n| A | B |\n|---|---|\n| 1 | 2 |\nAfter", 40));
   assert.equal(result.includes("Before\n┌"), true);

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

@@ -68,7 +68,7 @@ export function MessageView({ message, collapsed, width = 80 }: MessageViewProps
             ? renderMarkdownSegments(content, Math.max(20, contentWidth - 4)).map((seg, i) => {
                 if (seg.kind === "table") {
                   return (
-                    <Box key={i} flexDirection="column">
+                    <Box key={i} flexDirection="column" width={contentWidth}>
                       {seg.body.split("\n").map((line, lineIndex) => (
                         <Text key={lineIndex} wrap="truncate-end">
                           {line}

packages/cli/src/ui/components/MessageView/markdown.ts

@@ -192,12 +192,39 @@ function flushTextOnly(buffer: string[], tableRows: string[][]): TableBlock[] {
 
 function visualWidth(text: string): number {
   let w = 0;
-  for (const ch of text) {
+  const chars = Array.from(text);
+  for (let i = 0; i < chars.length; i++) {
+    const ch = chars[i];
+    const code = ch.codePointAt(0) ?? ch.charCodeAt(0);
+
+    // Zero-width sequences: ZWJ, emoji tag modifiers, variation selectors
+    // (U+FE00–FE0F), and combining marks (U+0300–U+036F, U+20E3 keycap cap)
+    // take no terminal column — they decorate the preceding character.
+    if (
+      code === 0x200d ||
+      (code >= 0xe0020 && code <= 0xe007f) ||
+      (code >= 0xfe00 && code <= 0xfe0f) ||
+      (code >= 0x0300 && code <= 0x036f) ||
+      code === 0x20e3
+    )
+      continue;
+
+    // Regional indicators come in pairs to form a flag (🇧🇷). Each lone code is
+    // wide by EastAsianWidth, but together they render as one 2-cell flag, so
+    // consume the pair and count 2 instead of 4.
+    if (code >= 0x1f1e6 && code <= 0x1f1ff) {
+      const next = chars[i + 1]?.codePointAt(0) ?? 0;
+      if (next >= 0x1f1e6 && next <= 0x1f1ff) {
+        w += 2;
+        i++;
+        continue;
+      }
+    }
+
     if (ch.length >= 2) {
       w += 2;
       continue;
     }
-    const code = ch.codePointAt(0) ?? ch.charCodeAt(0);
     w += isWideChar(code) ? 2 : 1;
   }
   return w;

packages/cli/src/ui/views/App.tsx

@@ -691,7 +691,11 @@ function App({ projectRoot, initialPrompt, resumeSessionId, onRestart }: AppProp
     }, 0);
   }, [busy, mode, sessionManager, columns, stdout]);
 
-  const screenWidth = useMemo(() => columns ?? stdout?.columns ?? 80, [columns, stdout]);
+  // Many terminals wrap a line that writes into the final column (the cursor
+  // column). Reserve one column so table borders and other full-width content
+  // don't get split across rows. Without this, a table rendered to exactly
+  // `columns` cells will soft-wrap on most terminal emulators.
+  const screenWidth = useMemo(() => Math.max(20, (columns ?? stdout?.columns ?? 80) - 1), [columns, stdout]);
   const screenHeight = useMemo(() => rows ?? stdout?.rows ?? 24, [rows, stdout]);
   const getSessionInfo = useCallback((): SessionInfo | null => {
     const activeSessionId = sessionManager.getActiveSessionId();