TUI layout misalignment with emoji/wide glyphs due to string-length-based padding/truncation

What version of Codex CLI is running?

0.98.0

What subscription do you have?

Pro

Which model were you using?

_No response_

What platform is your computer?

Windows

What terminal emulator and version are you using (if applicable)?

Windows Terminal w/Powershell 7 (pwsh)

What issue are you seeing?

When output includes emoji or other wide glyphs (e.g., ⚙, 💰, 🔢), columns and padded fields become misaligned. This indicates width calculations are based on JS string length/code units rather than terminal display cell width.

What steps can reproduce the bug?

1. Render/pad/truncate lines containing mixed ASCII + emoji, e.g.: 💰 🔢 ⚙
2. Align with fixed-width labels/columns using naive padding/truncation.
3. Observe drift/overlap in adjacent content and broken alignment.

What is the expected behavior?

• Columns remain aligned regardless of emoji/wide glyphs.
• Truncation cuts by display width, not code unit count.
• Some glyphs consume 2 terminal cells, but logic treats them as 1 “char”.
• Padded/truncated text overflows or visually collides with nearby content.

Additional information

Technical Cause

• Terminal uses cell-width rendering (wcwidth behavior).
• JS .length does not represent rendered width.
• Grapheme clusters + variation selectors + ZWJ sequences worsen mismatch.

Suggested Fix

1. Introduce a display-width utility (wcwidth-compatible) for all layout math:

• truncation
• horizontal spacing/alignment

1. Use grapheme-aware iteration where relevant.
2. Add regression tests with:

• ASCII only
• CJK full-width chars
• emoji (⚙, 💰, 🔢)
• variation selectors (⚙️)
• mixed strings in constrained widths

Impact

Medium-high UX impact for TUI users: dashboards look broken/unstable with common glyph/icon usage.

Notice the overlap with the cog and the comma

<img width="358" height="96" alt="Image" src="https://github.com/user-attachments/assets/0a2fc6f7-fb9f-4f35-a191-45aed2f3d722" />