VS Code extension: Arabic/RTL text renders incorrectly in chat output

Problem

When Claude Code responds with Arabic text (or any RTL language) mixed with English in the VS Code extension, the text renders in wrong order — words appear jumbled and unreadable.

The user's input text in the chat renders correctly (proper RTL flow).
Claude's output text in the chat renders incorrectly (wrong word ordering).

This happens because the output container uses LTR direction by default, and the Unicode Bidirectional Algorithm cannot properly handle the mixed text without an RTL base direction.

Screenshots

Example of broken rendering — Arabic + English on the same line shows words in wrong order, making the text unreadable.

Expected Behavior

Mixed Arabic/English text should render with proper RTL flow:

• Arabic words read right-to-left
• English segments read left-to-right within the RTL flow
• Overall line flows right-to-left (word closest to the right is read first)

Proposed Fix

Add dir="auto" to the chat message output container element:

<div dir="auto">{{ message content }}</div>

dir="auto" lets the browser detect the text direction automatically based on the first strong directional character. This is a one-line fix that:

• Correctly renders RTL languages (Arabic, Hebrew, Persian, Urdu)
• Does not affect existing LTR (English) rendering
• Is the W3C recommended approach for user-generated content

Workarounds Attempted

• Unicode RLM markers (U+200F): The extension escapes them and shows literal \u200F text
• Separation approach: Writing Arabic and English on separate lines works but is awkward and unnatural

Environment

• VS Code (Windsurf/Antigravity fork) on Windows 11
• Claude Code extension v2.1.81
• Language: Arabic (RTL)