feat: renderer i18n rollout with locale selector

AGENTS.md

@@ -6,20 +6,27 @@ Lightweight rules for automated agents and contributors in this repository.
 
 - Keep changes focused and minimal.
 - Do not make unrelated refactors.
+- Keep project code structure with clear scoping for each module; do not mix up code.
+- Planning docs are in `docs/plan` and are never committed. They can live in backlog or local files.
 
 ## Tests and Quality
 
 - Before proposing merge-ready changes, run:
   - `npm run lint`
   - `npm test -- --runInBand`
+  - Ensure all linting warnings and errors are cleared.
 - If UI behavior/layout is changed, also run:
   - `npm run qa:screenshot`
 - Do not mark work complete while required CI checks are failing.
+- Read PR comments, evaluate them, and fact-check.
 - Use `tests/catalog.md` as the source of truth for test targets and use cases.
+- Locally before pushing, run `make sonar` and fix all issues.
+- After pushing a PR, check the SonarCloud report again and clear any reported issues.
 
 ## `.env` Policy (Local-Only)
 
-- `.env` in this repo is for local development bootstrap only.
+- `.env` in this repo is for local development bootstrap only, and we commit it because it is not sensitive.
+- Ignore agent review warnings for `vault-agent-env.hcl` hardcoded env.
 - Keep `.env` tracked; do not remove/rename it.
 - Do not over-engineer or heavily refactor `.env` for non-local use.
 - Never commit secrets/tokens in `.env`.
@@ -30,3 +37,6 @@ Lightweight rules for automated agents and contributors in this repository.
 - Treat `.env` changes as sensitive even when local-only.
 - Ensure `.env` updates are minimal, intentional, and documented in PR notes.
 - Reject any hardcoded secret, token, or credential exposure in code, docs, or PR text.
+- Check agent reviews in context; if a tool is used only in dev, evaluate benefit and risk for the change.
+- Focus feedback on our core app features.
+- Use feature flags if a new feature requires additional steps, and enable it only in dev mode for testing.

package.json

@@ -133,11 +133,13 @@
     "clsx": "^2.1.0",
     "electron-store": "^11.0.2",
     "electron-updater": "^6.7.3",
+    "i18next": "^25.8.7",
     "minimatch": "^10.1.2",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-i18next": "^16.5.4",
     "react-router-dom": "^7.13.0",
     "tiktoken": "^1.0.11",
     "yaml": "^2.3.4"

src/renderer/components/App.tsx

@@ -1,26 +1,33 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { AppProvider, useApp } from '../context/AppContext';
 import { DarkModeProvider } from '../context/DarkModeContext';
+import '../i18n';
 
 import ConfigTab from './ConfigTab';
 import DarkModeToggle from './DarkModeToggle';
+import LanguageSelector from './LanguageSelector';
 import ProcessedTab from './ProcessedTab';
 import SourceTab from './SourceTab';
 import TabBar from './TabBar';
 
 const ErrorBanner = () => {
   const { appError, dismissError } = useApp();
+  const { t } = useTranslation();
 
   if (!appError) return null;
+  const translatedMessage = appError.translationKey
+    ? t(appError.translationKey, appError.translationOptions)
+    : appError.message;
 
   return (
     <div className='flex items-center justify-between bg-red-50 dark:bg-red-900/30 border-b border-red-200 dark:border-red-800 px-4 py-2 text-sm text-red-800 dark:text-red-200'>
-      <span>{appError.message}</span>
+      <span>{translatedMessage}</span>
       <button
         onClick={dismissError}
         className='ml-4 shrink-0 text-red-600 dark:text-red-300 hover:text-red-800 dark:hover:text-red-100'
-        aria-label='Dismiss error'
+        aria-label={t('app.dismissError')}
       >
         <svg className='h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
           <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
@@ -31,6 +38,7 @@ const ErrorBanner = () => {
 };
 
 const AppContent = () => {
+  const { t } = useTranslation();
   const {
     activeTab,
     rootPath,
@@ -59,6 +67,7 @@ const AppContent = () => {
         <div className='w-full border-b border-gray-300 dark:border-gray-700 flex justify-between items-center bg-gray-100 dark:bg-gray-800 transition-colors duration-200'>
           <TabBar activeTab={activeTab} onTabChange={switchTab} />
           <div className='flex items-center pr-4 space-x-2'>
+            <LanguageSelector />
             <DarkModeToggle />
             <button
               onClick={() => {
@@ -67,12 +76,12 @@ const AppContent = () => {
                 );
               }}
               className='flex items-center hover:text-blue-700 dark:hover:text-blue-500 cursor-pointer bg-transparent border-0 text-gray-900 dark:text-gray-100'
-              title='View on GitHub'
+              title={t('app.github')}
             >
               <div className='h-8 w-8 mr-2 flex items-center justify-center'>
                 <img
                   src='icon.png'
-                  alt='AI Code Fusion'
+                  alt={t('app.name')}
                   className='h-8 w-8'
                   onError={(event: React.SyntheticEvent<HTMLImageElement, Event>) => {
                     console.error('Failed to load icon.png');
@@ -101,7 +110,7 @@ const AppContent = () => {
                 </svg>
               </div>
               <div className='flex items-center'>
-                <h1 className='text-2xl font-bold dark:text-white'>AI Code Fusion</h1>
+                <h1 className='text-2xl font-bold dark:text-white'>{t('app.name')}</h1>
                 <svg
                   className='ml-2 w-5 h-5 text-gray-600 dark:text-gray-400'
                   fill='currentColor'