Skip to content

Conversation

@LegnaOS
Copy link

@LegnaOS LegnaOS commented Jan 5, 2026

Summary

This PR adds complete internationalization (i18n) support to opcode, enabling users worldwide to use the application in their native language.

Background & Motivation

I noticed that PR #405 introduced Chinese (zh-CN) i18n support, which was a great initiative. However, as opcode grows into a globally-used developer tool (currently 19,600+ stars!), I believe it deserves broader language coverage to serve the international developer community.

I've extended the i18n implementation to support 12 languages with complete translations for all UI components, making opcode truly accessible to developers worldwide.

Relationship to PR #405

This PR builds upon the same i18n architecture concept from #405 but provides significantly expanded coverage:

Aspect PR #405 This PR
Languages 2 (en, zh-CN) 12 languages
Translation strings 300+ Complete coverage
Component coverage Partial All 22+ UI components
Language selector Basic Full-featured with persistence

Recommendation: This PR can either:

  1. Supersede feat: add comprehensive Chinese (zh-CN) i18n support #405 as a more comprehensive solution, or
  2. Be rebased on top of feat: add comprehensive Chinese (zh-CN) i18n support #405 if that gets merged first

Languages Supported

Code Language Native Name
en English English (default/fallback)
zh Chinese Simplified 简体中文
zh-TW Chinese Traditional 繁體中文
ja Japanese 日本語
ko Korean 한국어
de German Deutsch
fr French Français
es Spanish Español
pt Portuguese Português
ru Russian Русский
ar Arabic العربية
vi Vietnamese Tiếng Việt

Technical Implementation

Architecture

  • i18next + react-i18next for translation management
  • i18next-browser-languagedetector for automatic language detection
  • Translations stored in src/i18n/locales/*.json
  • Language preference persisted in localStorage (app_language)

Files Changed

  • 37 files changed: +7,932 lines, -686 lines
  • New files:
    • src/i18n/index.ts - i18n configuration and initialization
    • src/i18n/locales/*.json - 12 language translation files
    • src/components/LanguageSelector.tsx - Language switching UI component
  • Modified: All 22 UI components updated to use useTranslation() hook

Components Updated

  • AgentExecution, Agents, CCAgents, CreateAgent
  • CustomTitlebar, ExecutionControlBar, HooksEditor
  • MCPAddServer, MCPImportExport, MCPManager, MCPServerList
  • NFOCredits, ProjectList, ProjectSettings, ProxySettings
  • Settings, SlashCommandsManager, StorageTab, Topbar
  • UsageDashboard, main.tsx

Features

  1. Automatic Detection: Detects browser/system language on first visit
  2. Manual Selection: Users can switch languages via LanguageSelector component
  3. Persistence: Language preference saved in localStorage across sessions
  4. Graceful Fallback: Falls back to English for any untranslated strings
  5. RTL Support Ready: Arabic translation included (RTL-specific styling can be added in future)

Testing

  • All translations load correctly without errors
  • Language switching works in real-time without page reload
  • Language preference persists across browser sessions
  • Fallback to English works for missing translation keys
  • No console errors or warnings related to i18n
  • Build completes successfully with bun run build
  • TypeScript type checking passes

Dependencies Added

"i18next": "^24.2.3",
"i18next-browser-languagedetector": "^8.0.4",
"react-i18next": "^15.4.1"

These are well-maintained, widely-used packages with minimal bundle size impact.

Why This Matters

opcode has become a popular tool for Claude Code users worldwide. By providing comprehensive i18n support, we can:

  • 🌍 Reduce barrier to entry for non-English speaking developers
  • 💡 Improve user experience for the global developer community
  • 📈 Support continued growth of opcode's international user base
  • ✨ Align with modern standards for professional applications

Checklist

  • Title follows PR guidelines (Feature: prefix)
  • Code follows project TypeScript/React conventions
  • Uses Tailwind CSS for styling
  • TypeScript types are properly defined
  • No linting errors
  • Tested manually across multiple languages
  • Dependencies properly documented

🙏 Thank you for considering this contribution. I'm happy to make any adjustments based on feedback from the maintainers.

🤖 This internationalization effort was created to make opcode accessible to developers worldwide.


Pull Request opened by Augment Code with guidance from the PR author

🌐 Added full internationalization (i18n) support for 12 languages:

Languages supported:
- English (en) - default/fallback
- 简体中文 (zh) - Chinese Simplified
- 繁體中文 (zh-TW) - Chinese Traditional
- 日本語 (ja) - Japanese
- 한국어 (ko) - Korean
- Deutsch (de) - German
- Français (fr) - French
- Español (es) - Spanish
- Português (pt) - Portuguese
- Русский (ru) - Russian
- العربية (ar) - Arabic
- Tiếng Việt (vi) - Vietnamese

Changes:
- Integrated i18next with react-i18next for translation management
- Added browser language auto-detection with localStorage persistence
- Created LanguageSelector component for manual language switching
- Translated all UI components and strings
- All 22 components updated to use translation hooks

This fork provides complete i18n support that was not available in the
original opcode project, making the application accessible to a global
audience.

Original project: https://github.com/getAsterisk/opcode
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant