feat: Internationalization (i18n) — translate the dashboard UI to any language

[mukul975]

Summary

Add i18n support using react-i18next so the dashboard UI can be translated into any language. This is especially valuable given the global adoption of Claude Code — Japanese, Chinese, German, and Portuguese communities would benefit immediately.

Motivation

• Claude Code has strong adoption in non-English-speaking countries
• All UI strings are currently hardcoded in English
• Adding i18n structure now (before the codebase grows further) is much cheaper than retrofitting later
• Community contributors can add their language via a simple JSON file

Proposed Implementation

Install

npm install i18next react-i18next i18next-browser-languagedetector

File structure

src/
  i18n/
    index.js         # i18next init
    locales/
      en.json        # English (source of truth)
      ja.json        # Japanese
      zh.json        # Chinese Simplified
      de.json        # German

src/i18n/locales/en.json (sample)

{
  "header": {
    "title": "Claude Code Agent Dashboard",
    "search_placeholder": "Search agents, tasks, teams..."
  },
  "tabs": {
    "overview": "Overview",
    "teams": "Teams",
    "communication": "Communication",
    "analytics": "Analytics",
    "history": "History",
    "inboxes": "Inboxes"
  },
  "team_card": {
    "agents": "{{count}} agents",
    "tasks": "{{count}} tasks",
    "team_health": "Team Health",
    "view_inboxes": "View Inboxes"
  },
  "status": {
    "active": "Active",
    "idle": "Idle",
    "recent": "Recent",
    "pending": "Pending",
    "in_progress": "In Progress",
    "completed": "Completed"
  }
}

Usage in components

import { useTranslation } from 'react-i18next';

export function TeamCard({ team }) {
  const { t } = useTranslation();
  return (
    <span>{t('team_card.agents', { count: members.length })}</span>
  );
}

Language switcher in Header

const languages = [
  { code: 'en', label: 'English', flag: '🇺🇸' },
  { code: 'ja', label: '日本語', flag: '🇯🇵' },
  { code: 'zh', label: '中文', flag: '🇨🇳' },
  { code: 'de', label: 'Deutsch', flag: '🇩🇪' },
];

Acceptance Criteria

• All static UI strings extracted to en.json
• react-i18next initialized with browser language detection
• Language switcher in the Header (flag + language name)
• Selected language persisted to localStorage
• At least one complete translation shipped (suggest: Japanese or German, community-sourced)
• Pluralization works correctly (e.g., "1 agent" vs "3 agents")
• RTL layout consideration noted (Arabic/Hebrew future support)
• Vitest test: translation keys exist and render correctly

How to Contribute a Translation

1. Copy src/i18n/locales/en.json to src/i18n/locales/<lang-code>.json
2. Translate all values (keep keys unchanged)
3. Add your language to the switcher array in Header.jsx
4. Open a PR!

This is an excellent good-first-issue — translators don't need to know React, just JSON.

References

• react-i18next docs: https://react.i18next.com/
• i18next pluralization: https://www.i18next.com/translation-function/plurals
• Language codes (BCP 47): https://www.iana.org/assignments/language-subtag-registry