[codex] Fix RTL chat message rendering

[ekrako]

Summary

• Add shared RTL direction detection for chat text and markdown source.
• Apply bidi direction to user messages, composer input, markdown blocks, and logical CSS for list markers/blockquotes/task checkboxes.
• Keep code-oriented markdown surfaces isolated as LTR and add regressions for code-prefixed Hebrew lists plus CJK false positives.

Resolves #1771

Validation

• pnpm --dir apps/web exec vp test run src/lib/rtl.test.ts src/components/ChatMarkdown.test.tsx --passWithNoTests --project unit
• pnpm exec vp run typecheck
• pnpm exec vp check (passes with existing warnings)

Note

Fix RTL rendering for chat messages and composer editor

• Adds dirFor and dirForMarkdown utilities that detect text direction by analyzing strong bidirectional characters, with markdown-aware stripping of code spans, fences, and URLs.
• Updates ChatMarkdown to set dir="rtl" or dir="ltr" on block-level elements (p, li, h1–h6, ul, ol, blockquote) based on the markdown source slice for each node.
• Adds a ComposerBidiDirectionPlugin to ComposerPromptEditor that updates the root contentEditable dir attribute as the user types.
• Updates MessagesTimeline to set dir on inline user message wrappers and applies unicode-bidi: plaintext via a new CSS class.
• Updates index.css to use logical CSS properties for list/blockquote spacing and isolates code blocks and tables to LTR regardless of surrounding direction.

📊 Macroscope summarized 2c2d462. 5 files reviewed, 0 issues evaluated, 0 issues filtered, 0 comments posted

🗂️ Filtered Issues

No issues evaluated.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 7c101168-d4b1-4be4-94e2-9d05343a9e20

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

🟡 Medium src/index.css:547

unicode-bidi: plaintext on .bidi-plaintext and the markdown block selectors makes the browser infer direction from the text's first strong character, ignoring the explicit dir attribute set on those elements. As a result, RTL messages whose content begins with LTR characters (e.g. code-prefixed Hebrew) are rendered LTR regardless of the dir value. Consider using unicode-bidi: isolate instead, which still isolates the element's direction from surrounding text but honors the explicit dir attribute.

🤖 Copy this AI Prompt to have your agent fix this:

In file @apps/web/src/index.css around line 547:

`unicode-bidi: plaintext` on `.bidi-plaintext` and the markdown block selectors makes the browser infer direction from the text's first strong character, ignoring the explicit `dir` attribute set on those elements. As a result, RTL messages whose content begins with LTR characters (e.g. code-prefixed Hebrew) are rendered LTR regardless of the `dir` value. Consider using `unicode-bidi: isolate` instead, which still isolates the element's direction from surrounding text but honors the explicit `dir` attribute.

[macroscopeapp]

🟡 Medium components/ChatMarkdown.tsx:1427

The ul, ol, and li component overrides compute dir by calling blockDirForMarkdownNode(text, node, children), but a list node's position spans the entire subtree including nested lists. A top-level English list that contains a long nested Hebrew/Arabic sublist will resolve the outer <ul>/<ol> and parent <li> as dir="rtl", placing the top-level bullets/numbers on the wrong side even though the parent items are LTR. Consider computing the direction from only the node's own direct text rather than the full subtree range.

🤖 Copy this AI Prompt to have your agent fix this:

In file @apps/web/src/components/ChatMarkdown.tsx around line 1427:

The `ul`, `ol`, and `li` component overrides compute `dir` by calling `blockDirForMarkdownNode(text, node, children)`, but a list node's `position` spans the entire subtree including nested lists. A top-level English list that contains a long nested Hebrew/Arabic sublist will resolve the outer `<ul>`/`<ol>` and parent `<li>` as `dir="rtl"`, placing the top-level bullets/numbers on the wrong side even though the parent items are LTR. Consider computing the direction from only the node's own direct text rather than the full subtree range.

[macroscopeapp]

🟡 Medium src/index.css:565

Setting direction: ltr on .chat-markdown .chat-markdown-table-container forces every markdown table to render left-to-right, so an RTL table (e.g. Hebrew/Arabic content) has its column order and cell direction reversed instead of following the surrounding message direction. Unlike pre/code, tables are general markdown content, so forcing LTR is wrong here. Consider removing .chat-markdown-table-container from the direction: ltr rule and instead letting it inherit the bidi context, keeping only unicode-bidi: isolate if needed.

🤖 Copy this AI Prompt to have your agent fix this:

In file @apps/web/src/index.css around line 565:

Setting `direction: ltr` on `.chat-markdown .chat-markdown-table-container` forces every markdown table to render left-to-right, so an RTL table (e.g. Hebrew/Arabic content) has its column order and cell direction reversed instead of following the surrounding message direction. Unlike `pre`/`code`, tables are general markdown content, so forcing LTR is wrong here. Consider removing `.chat-markdown-table-container` from the `direction: ltr` rule and instead letting it inherit the bidi context, keeping only `unicode-bidi: isolate` if needed.

[macroscopeapp]

🟡 Medium chat/MessagesTimeline.tsx:1566

UserMessageBody computes the wrapper dir from dirFor(props.text) alone, so when the message body is empty or neutral/LTR but the terminalContexts chip labels are RTL, the wrapper stays ltr and the inline chips are ordered and aligned incorrectly. Consider deriving dir from the combined text of props.text and the terminal context headers (e.g. dirFor(props.text + inlinePrefix)) so RTL chip content is respected.

Also found in 1 other location(s)

apps/web/src/components/ComposerPromptEditor.tsx:1398

ComposerBidiDirectionPlugin derives the editor direction from $getRoot().getTextContent(), but inline token nodes do not expose their rendered chip labels there. For example, ComposerTerminalContextNode.getTextContent() returns only INLINE_TERMINAL_CONTEXT_PLACEHOLDER, while the visible chip label comes from formatTerminalContextLabel(context). A composer containing only RTL terminal-context chips (or RTL display labels on other chips) will therefore keep dir="ltr", so the new bidi fix fails for those prompts.

🤖 Copy this AI Prompt to have your agent fix this:

In file @apps/web/src/components/chat/MessagesTimeline.tsx around line 1566:

`UserMessageBody` computes the wrapper `dir` from `dirFor(props.text)` alone, so when the message body is empty or neutral/LTR but the `terminalContexts` chip labels are RTL, the wrapper stays `ltr` and the inline chips are ordered and aligned incorrectly. Consider deriving `dir` from the combined text of `props.text` and the terminal context headers (e.g. `dirFor(props.text + inlinePrefix)`) so RTL chip content is respected.

Also found in 1 other location(s):
- apps/web/src/components/ComposerPromptEditor.tsx:1398 -- `ComposerBidiDirectionPlugin` derives the editor direction from `$getRoot().getTextContent()`, but inline token nodes do not expose their rendered chip labels there. For example, `ComposerTerminalContextNode.getTextContent()` returns only `INLINE_TERMINAL_CONTEXT_PLACEHOLDER`, while the visible chip label comes from `formatTerminalContextLabel(context)`. A composer containing only RTL terminal-context chips (or RTL display labels on other chips) will therefore keep `dir="ltr"`, so the new bidi fix fails for those prompts.