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:

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

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