Codex RTL Support
Adds an ⇄ toggle button to the Codex panel's title bar that right-aligns Hebrew, Arabic and Persian messages (RTL) while keeping code blocks left-to-right. Reversible — never permanently modifies Codex or VS Code.
- Instant Live Toggle: Turn RTL on/off by clicking the ⇄ button in the Codex view title bar, or clicking the status-bar item. The layout updates instantly in real-time with no reload required during normal use.
- Bi-directional Intelligent Detection: Latin text stays LTR, Hebrew/Arabic/Persian text becomes RTL. Each block is detected independently so mixed conversations render correctly.
- Clean Input Formatting: Automatically applies
dir="auto" to textareas, input fields, and editable containers so text flows correctly as you type Hebrew/Arabic.
- Code Isolation: Code blocks (
<pre>, <code>), script tags, styles, and tables are always kept LTR and bidi-isolated.
- Performance Optimized: All document mutations are coalesced into a single
requestAnimationFrame pass to prevent reflow storms while streaming long chats.
How It Works
VS Code renders the Codex chat inside an isolated webview iframe, and there is no supported API for one extension to style another extension's webview. To achieve this, this extension appends a secure, marker-delimited runtime block to Codex's own webview entry bundle (openai.chatgpt-*/webview/assets/index-*.js).
Persistent Runtime & State Channel
Instead of modifying files or prompting for a window reload on every toggle, this extension establishes a fast, zero-dependency state channel:
- Dormant Runtime: The runtime is injected once and permanently into the Codex webview bundle.
- State Channel File: It writes a tiny settings file (
webview/assets/codex-rtl-state.json, e.g., {"on":true}) directly inside the Codex webview folder.
- Live State Polling: The injected runtime inside the active webview polls this state file every 1000ms. Whenever the state changes (or if the file is missing/removed, indicating "OFF"), the runtime instantly applies (
enable()) or completely reverts (disable()) all CSS/layout overrides in the DOM.
When is a reload required?
A window reload is requested in exactly one case: when the runtime is not yet present on disk in the bundle that the currently running webview has already loaded (such as during the first-ever activation, or after a fresh Codex update replaces the bundle). Once the window is reloaded once, all future toggles are 100% instant and live.
Automatic Re-injection & Self-Healing
If Codex updates, its folder is replaced with a new version-suffixed directory containing a fresh bundle, wiping out the injection. This extension listens to vscode.extensions.onDidChange and automatically re-injects our runtime and state behind the scenes. If Codex is replaced in-session, the extension automatically heals the new bundle and displays a prompt to reload.
Feature Commands
You can run these commands from the Command Palette (Cmd+Shift+P / Ctrl+Shift+P):
- Codex RTL: Toggle RTL — Instantly switch between ON/OFF states.
- Codex RTL: Turn RTL on / Turn RTL off — Explicit state control.
- Codex RTL: Status — Display the current state, Codex version, and bundle target file.
- Codex RTL: Remove Injection — Strips the injected script completely, deletes the state JSON file, and leaves the Codex bundle byte-identical to its original state. Best of all, the running webview tears down live within 1 second!
Develop
To modify or compile the extension locally:
npm install
npm run build # bundles src -> dist/extension.js with esbuild
License
MIT
