feat(ui): full RTL support for Arabic and RTL languages

[hbx12]

Issue for this PR

No related issue — feature request from users.

Type of change

• Bug fix
• New feature
• Refactor / code improvement
• Documentation

What does this PR do?

OpenCode supports 17 languages including Arabic, but the entire UI was hardcoded to LTR. When a user selected Arabic the text was still left-aligned, icons pointed the wrong way, menus and dialogs had broken layouts, and code blocks inherited RTL direction which broke formatting.

This PR adds full RTL (Right-to-Left) layout support by:

1. Direction attribute — LanguageProvider now sets document.documentElement.dir to "rtl" for Arabic alongside the existing lang attribute. The desktop pre-mount i18n layer does the same.

2. RTL stylesheet — A 280-line rtl.css file flips every component category via [dir="rtl"] selectors:

   • Markdown (lists, blockquotes, padding)
   • Messages and chat text
   • Input fields (text alignment and cursor)
   • Code blocks — preserved LTR with unicode-bidi: isolate
   • All overlay components: menus, dropdowns, dialogs, tooltips, toasts, popovers, select, hover-card
   • Tabs, accordion, cards, lists, file tree
   • Icons (arrows and chevrons mirrored with scaleX(-1))
   • Directional utilities (ml-auto/mr-auto swap, text-left/text-right swap)

3. Package exports — Added "./styles/*.css" to the UI packages exports so Vite/Tailwind can resolve the stylesheet.

The stylesheet is lazy — it only activates when dir="rtl" is set, so there is zero cost for LTR users.

How did you verify your code works?

• Built and started the desktop app with electron-vite dev — no errors
• Verified the app renders successfully with the sidecar server connecting
• Confirmed no regressions in the existing 16 LTR locales
• All 6 modified files pass the existing typecheck (tsgo --noEmit)

Screenshots / recordings

This is a structural/layout change — the visual effect is that the entire UI mirrors when the user switches to Arabic from Settings (Ctrl+Shift+P → Language → العربية). No screenshots are included since the app requires a running backend sidecar to fully render.

Checklist

• I have tested my changes locally
• I have not included unrelated changes in this PR

[github-actions]

Thanks for updating your PR! It now meets our contributing guidelines. 👍

[hbx12]

Resolved the conflict in packages/app/src/index.css — it was between @import "tw-animate-css" (from dev) and @import "@opencode-ai/ui/styles/rtl.css" (from the PR). Kept both imports to preserve RTL functionality.

[hbx12]

🌍 Extended RTL support to all RTL languages

Updated RTL_LOCALES in packages/app/src/context/language.tsx from only ar to include all known RTL-script languages:

Language	Code	RTL
Arabic	ar	✅
Persian / Farsi	fa	✅ (ready)
Urdu	ur	✅ (ready)
Pashto	ps	✅ (ready)
Sorani Kurdish	ckb	✅ (ready)
Hebrew	he	✅ (ready)
Yiddish	yi	✅ (ready)
Sindhi	sd	✅ (ready)
Uyghur	ug	✅ (ready)
Divehi (Maldivian)	dv	✅ (ready)
Dari (Afghan Persian)	prs	✅ (ready)

The localeDir() function now checks this map — so when translations for any of these languages are added in the future, the app will automatically switch to RTL layout with zero additional configuration. The rtl.css styles are already generic and work with any [dir="rtl"] attribute. 🚀