Problem

In review mode, the diff panel calculates wrong character width when CJK (Chinese/Japanese/Korean) characters are present. This causes incorrect border positions and visual misalignment.

Root Cause

In src/cli/ui/SplitDiff.tsx, the Cell function uses raw.length to calculate visual width for truncation:

const truncated = raw.length > inner ? `${raw.slice(0, inner - 1)}…` : raw;

The problem is that raw.length counts JavaScript characters, not visual terminal cells. For CJK characters:

• raw.length counts each character as 1
• Terminal renders each CJK character as 2 cells wide

This mismatch causes the truncation calculation to be wrong, resulting in incorrect border positions when diff lines contain Chinese characters.

Example

A diff line with Chinese characters like 函数返回值 has:

• raw.length = 5 (5 JavaScript characters)
• Actual visual width = 10 cells (each CJK char takes 2 cells)

When truncating to fit a column of width 8, the code thinks 5 < 8 so no truncation is needed, but the actual visual width is 10, which overflows.

Solution

Replace raw.length with stringWidth(raw) from the existing text-width.js utility:

import { stringWidth } from "./text-width.js";

// Before
const truncated = raw.length > inner ? `${raw.slice(0, inner - 1)}…` : raw;

// After
const truncated = stringWidth(raw) > inner ? `${raw.slice(0, inner - 1)}…` : raw;

The stringWidth function (from the string-width library) correctly handles:

• CJK characters (2 cells wide)
• Emoji (2 cells wide)
• Zero-width characters (0 cells)
• Regular ASCII (1 cell wide)

Files Changed

• src/cli/ui/SplitDiff.tsx — Import stringWidth and use it for truncation calculation

Testing

• ✅ Lint passed
• ✅ Typecheck passed
• ✅ All 3596 tests passed

Impact

This fix ensures the diff panel renders correctly regardless of the characters in the diff content. Users working with CJK characters (Chinese, Japanese, Korean) will now see correct border positions and proper text truncation.

Fixes #1671