From 437cd94e1b7227910bee3aa6042c5b789f4dde2c Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 03:15:11 +0000
Subject: [PATCH 01/38] =?UTF-8?q?=E6=96=87=E6=A1=A3:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=20FSM=20=E5=89=8D=E7=AB=AF=E5=9B=BD=E9=99=85=E5=8C=96=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../specs/2026-06-21-fsm-i18n-design.md       | 735 ++++++++++++++++++
 1 file changed, 735 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-06-21-fsm-i18n-design.md

diff --git a/docs/superpowers/specs/2026-06-21-fsm-i18n-design.md b/docs/superpowers/specs/2026-06-21-fsm-i18n-design.md
new file mode 100644
index 00000000..ad0a2e45
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-21-fsm-i18n-design.md
@@ -0,0 +1,735 @@
+# FSM Frontend Internationalization (i18n) Design Spec
+
+**Date:** 2026-06-21
+**Project:** factorio-server-manager-joey
+**Branch:** feat/fsm-i18n
+**Status:** Draft / Approved for Implementation
+
+---
+
+## 1. Overview and Goals
+
+### 1.1 Problem
+
+The Factorio Server Manager (FSM) frontend has zero internationalization support. All UI strings are hardcoded English embedded in JSX components. This blocks adoption by non-English-speaking server operators, particularly the Chinese community where Factorio has a large player base.
+
+### 1.2 Goals
+
+- Enable the UI to render in Simplified Chinese (zh-CN) as the first translated locale.
+- Keep English as the authoritative fallback language (maintain existing strings as the source of truth).
+- Introduce a translation architecture that makes adding future locales trivial (single new JSON folder).
+- Minimize component refactoring: the `useTranslation()` Hook pattern mirrors existing React functional component style.
+- Zero backend changes. Go error messages, log entries, and RCON output are not translated.
+- Complete coverage of all ~200 UI strings across 9 view/page areas.
+
+### 1.3 Non-Goals (see also Section 10)
+
+- Translating Go backend strings, error messages, or Factorio server log output.
+- Runtime locale switching without page reload (nice-to-have, not required for MVP).
+- Right-to-left (RTL) language support.
+- Pluralization rules or ICU MessageFormat.
+- Integration with CI translation services (POEditor, Crowdin, etc.).
+
+---
+
+## 2. Architecture
+
+### 2.1 Framework: react-i18next + i18next
+
+Chosen over alternatives (react-intl, LinguiJS) because:
+
+- `useTranslation()` Hook matches the existing functional component + Hooks pattern perfectly.
+- No Redux or global state manager dependency (the app uses only `useState`).
+- Backend-agnostic: translations are loaded as static JSON at build time, no XHR needed.
+- `i18next-browser-languagedetector` provides zero-config language detection from `navigator.language`.
+
+### 2.2 Installation
+
+```bash
+npm install i18next react-i18next i18next-browser-languagedetector
+```
+
+All three packages are runtime dependencies. No additional Webpack plugins or loaders are required (JSON imports are already supported by Webpack 5 with the default `json` module type; the existing config resolves `.json` extensions via `resolve.extensions`).
+
+### 2.3 Initialization
+
+A single initialization module is created at `ui/i18n.js`:
+
+```js
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import enCommon from './locales/en/common.json';
+import enLayout from './locales/en/layout.json';
+import enControls from './locales/en/controls.json';
+import enMods from './locales/en/mods.json';
+import enSaves from './locales/en/saves.json';
+import enServerSettings from './locales/en/serverSettings.json';
+import enLogs from './locales/en/logs.json';
+import enConsole from './locales/en/console.json';
+import enUserManagement from './locales/en/userManagement.json';
+
+import zhCommon from './locales/zh-CN/common.json';
+import zhLayout from './locales/zh-CN/layout.json';
+import zhControls from './locales/zh-CN/controls.json';
+import zhMods from './locales/zh-CN/mods.json';
+import zhSaves from './locales/zh-CN/saves.json';
+import zhServerSettings from './locales/zh-CN/serverSettings.json';
+import zhLogs from './locales/zh-CN/logs.json';
+import zhConsole from './locales/zh-CN/console.json';
+import zhUserManagement from './locales/zh-CN/userManagement.json';
+
+const resources = {
+  en: {
+    common: enCommon,
+    layout: enLayout,
+    controls: enControls,
+    mods: enMods,
+    saves: enSaves,
+    serverSettings: enServerSettings,
+    logs: enLogs,
+    console: enConsole,
+    userManagement: enUserManagement,
+  },
+  'zh-CN': {
+    common: zhCommon,
+    layout: zhLayout,
+    controls: zhControls,
+    mods: zhMods,
+    saves: zhSaves,
+    serverSettings: zhServerSettings,
+    logs: zhLogs,
+    console: zhConsole,
+    userManagement: zhUserManagement,
+  },
+};
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: 'en',
+    defaultNS: 'common',
+    ns: [
+      'common', 'layout', 'controls', 'mods', 'saves',
+      'serverSettings', 'logs', 'console', 'userManagement',
+    ],
+    interpolation: {
+      escapeValue: false, // React already escapes output
+    },
+    detection: {
+      // Only check localStorage and navigator.language
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage'],
+      lookupLocalStorage: 'fsm_lang',
+    },
+  });
+
+export default i18n;
+```
+
+### 2.4 Provider Wrapping
+
+In `ui/index.js`, import the i18n instance and wrap `<App>` with `<Suspense>`:
+
+```jsx
+import './i18n'; // initialize i18n before rendering
+import React, { Suspense } from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App/App.jsx';
+
+window.flash = (message, color = 'gray-light') =>
+  Bus.emit('flash', ({ message, color }));
+
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(
+  <Suspense fallback={<div>Loading...</div>}>
+    <App />
+  </Suspense>
+);
+```
+
+`react-i18next` uses `Suspense` internally to delay rendering until translations are loaded. The `fallback` shows a brief loading indicator. For this app with static JSON imports, the Suspense resolves synchronously, so the fallback is a safety measure only.
+
+### 2.5 Translation File Structure
+
+```
+ui/locales/
+  en/
+    common.json
+    layout.json
+    controls.json
+    mods.json
+    saves.json
+    serverSettings.json
+    logs.json
+    console.json
+    userManagement.json
+  zh-CN/
+    common.json
+    layout.json
+    controls.json
+    mods.json
+    saves.json
+    serverSettings.json
+    logs.json
+    console.json
+    userManagement.json
+```
+
+Every namespace folder mirrors `en/` exactly. Missing keys in `zh-CN/*.json` automatically fall back to `en/*.json` at runtime (no crash, no missing string).
+
+---
+
+## 3. Component-Level i18n Integration Pattern
+
+### 3.1 Basic Pattern
+
+**Before** (hardcoded English):
+
+```jsx
+import React from 'react';
+import Button from '../components/Button';
+
+const Controls = ({ serverStatus }) => {
+  return (
+    <Button type="success" className="w-full">
+      Start Server
+    </Button>
+  );
+};
+```
+
+**After** (translated):
+
+```jsx
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from '../components/Button';
+
+const Controls = ({ serverStatus }) => {
+  const { t } = useTranslation('controls');
+
+  return (
+    <Button type="success" className="w-full">
+      {t('startServer')}
+    </Button>
+  );
+};
+```
+
+### 3.2 Component with Multiple Namespaces
+
+When a view imports strings from `common` and its own namespace:
+
+```jsx
+const { t } = useTranslation(['mods', 'common']);
+// Usage:
+t('installMod')      // looks in 'mods' first
+t('save')             // looks in 'common' (fallback namespace)
+t('common:save')      // explicit namespace prefix
+```
+
+Explicit prefix (`'common:save'`) is preferred for clarity when mixing namespaces, except in trivial cases.
+
+### 3.3 Interpolation (Dynamic Values)
+
+For strings that embed variables (save names, usernames, version numbers):
+
+**Translation JSON** (`en/common.json`):
+```json
+{
+  "saveLastModified": "Last Modified: {{date}}",
+  "deleteConfirm": "Are you sure you want to delete \"{{name}}\"?",
+  "versionInfo": "Version {{version}}"
+}
+```
+
+**Component usage:**
+```jsx
+{t('saveLastModified', { date: save.last_mod })}
+{t('deleteConfirm', { name: save.name })}
+{t('versionInfo', { version: factorioVersion })}
+```
+
+### 3.4 No Changes to Pure Presentational Components
+
+Components like `Button`, `Panel`, `Input`, `Label`, `Modal` do NOT import `useTranslation`. They accept `children` or `text` props. The translation call happens at the call site.
+
+**Exception:** `ConfirmDialog` receives translated `title`, `content` props from its parent. Its own button labels ("Cancel", "Confirm") are translated inside the component via `useTranslation('common')`.
+
+### 3.5 Changes Outside JSX
+
+For the `window.flash()` calls in JavaScript logic (e.g., error toasts):
+
+```jsx
+import { useTranslation } from 'react-i18next';
+const { t } = useTranslation('common');
+
+// Before:
+window.flash("Login failed. Username or Password wrong.", "red");
+
+// After:
+window.flash(t('loginFailed'), "red");
+```
+
+For non-component files (api resources, utility modules) that display user-facing messages, they must either accept a `t` function as a parameter or the calling component must wrap the message.
+
+---
+
+## 4. Translation Key Naming Convention
+
+### 4.1 Rules
+
+- **Flat camelCase.** No dots, no nesting. Each JSON file is a single-level object.
+- **VerbPrefix for actions.** `startServer`, `stopServer`, `deleteSave`, `uploadMod`.
+- **NounOnly for labels.** `serverStatus`, `factorioVersion`, `lastModified`, `actions`.
+- **Status constants in SCREAMING_SNAKE.** `RUNNING`, `STOPPED`, `UNKNOWN`.
+- **Error messages:** `errorRequired`, `errorInvalidPort`, `loginFailed`.
+- **Confirm dialogs:** `confirmDeleteMod`, `confirmStopServer`.
+- **Placeholder text:** `placeholderUsername`, `placeholderPassword`.
+
+### 4.2 Examples per Category
+
+```
+# Controls
+"startServer"         "Start Server"
+"saveStopServer"      "Save & Stop Server"
+"killServer"          "Kill Server"
+"serverStatus"        "Server Status"
+"status"              "Status"
+"ip"                  "IP"
+"port"                "Port"
+"factorioVersion"     "Factorio Version"
+"save"                "Save"
+"RUNNING"             "Running"
+"STOPPED"             "Stopped"
+"UNKNOWN"             "Unknown"
+
+# Common
+"save"                "Save"
+"cancel"              "Cancel"
+"confirm"             "Confirm"
+"delete"              "Delete"
+"loading"             "Loading..."
+"errorOccurred"       "An error occurred"
+"loginFailed"         "Login failed. Username or Password wrong."
+"name"                "Name"
+"actions"             "Actions"
+```
+
+### 4.3 What NOT to Do
+
+```
+# BAD - deep nesting
+"server.controls.start"   "Start Server"
+
+# BAD - inconsistent casing
+"start_server"            "Start Server"
+"stopServer"              "Stop Server"
+
+# BAD - HTML in values
+"welcomeMessage"          "Welcome to <b>FSM</b>"
+```
+
+Values are plain strings. No HTML markup inside JSON values. Components use React elements if formatting is needed.
+
+---
+
+## 5. Language Detection and Switching UX
+
+### 5.1 Auto-Detection
+
+On first visit, `i18next-browser-languagedetector` checks `navigator.language`:
+
+| Browser Language | Selected Locale |
+|---|---|
+| `zh-CN`, `zh-TW`, `zh-HK`, `zh` | `zh-CN` |
+| Any other value | `en` |
+
+The check uses simple prefix matching: if `navigator.language` starts with `zh`, load `zh-CN`. Otherwise, load `en`.
+
+### 5.2 Persistence
+
+The selected language is stored in `localStorage` key `fsm_lang`. On subsequent visits, the stored preference takes priority over `navigator.language`.
+
+Clearing `localStorage` or using a private/incognito window triggers auto-detection again.
+
+### 5.3 Language Switcher UI
+
+A language toggle is added to the Layout sidebar, inside the "FSM Administration" section, below the Help link:
+
+```jsx
+// In Layout.jsx, after the Help link:
+<Link to="/user-management">Users</Link>
+<Link to="/help">Help</Link>
+{/* new */}
+<div className="mt-4 mx-4">
+  <select
+    className="w-full bg-gray-dark text-white border border-gray-light rounded px-2 py-1 text-sm"
+    value={i18n.language}
+    onChange={(e) => {
+      i18n.changeLanguage(e.target.value);
+    }}
+  >
+    <option value="en">English</option>
+    <option value="zh-CN">简体中文</option>
+  </select>
+</div>
+```
+
+The `<select>` uses `i18n.changeLanguage()` which triggers a re-render of all `useTranslation()` hooks. The language switcher does NOT reload the page.
+
+**Implementation note:** `i18n` instance must be imported in Layout.jsx:
+
+```jsx
+import i18n from '../../i18n';
+```
+
+### 5.4 Future Locales
+
+Adding a new locale (e.g., `ja`):
+
+1. Copy `ui/locales/en/` to `ui/locales/ja/`.
+2. Translate all JSON values (not keys).
+3. Add the import block and `ja` entry in `ui/i18n.js`.
+4. Add the `<option>` to the language switcher.
+
+No other code changes needed.
+
+---
+
+## 6. Namespace Scope and Examples
+
+### 6.1 `common` (Universal)
+
+**Scope:** Buttons, labels, messages, and statuses used across multiple views. Actions in `ConfirmDialog`, `Flash`, table headers.
+
+| Key | EN Value | Usage |
+|---|---|---|
+| `save` | Save | Button text |
+| `cancel` | Cancel | Button text (ConfirmDialog) |
+| `confirm` | Confirm | Button text (ConfirmDialog) |
+| `delete` | Delete | Button text, icon tooltip |
+| `loading` | Loading... | Fallback, async states |
+| `errorOccurred` | An error occurred | Generic error fallback |
+| `loginFailed` | Login failed. Username or Password wrong. | Login error flash |
+| `name` | Name | Table header column |
+| `actions` | Actions | Table header column |
+| `username` | Username | Login form label |
+| `password` | Password | Login form label, field label |
+| `email` | Email | User management header |
+| `role` | Role | User management header |
+| `required` | This field is required | Validation error message |
+| `signIn` | Sign In | Login button |
+| `logout` | Logout | Layout sidebar button |
+| `saveLastModified` | Last Modified | Saves table header |
+| `size` | Size | Saves table header |
+| `lastModifiedAt` | Last Modified At | Saves table header |
+
+### 6.2 `layout` (Navigation and Sidebar)
+
+**Scope:** Sidebar section headers, navigation links, page title areas.
+
+| Key | EN Value | Usage |
+|---|---|---|
+| `appTitle` | Factorio Server Manager | Sidebar header |
+| `serverStatus` | Server Status | Sidebar section heading |
+| `serverManagement` | Server Management | Sidebar section heading |
+| `fsmAdministration` | FSM Administration | Sidebar section heading |
+| `linkControls` | Controls | Nav link |
+| `linkSaves` | Saves | Nav link |
+| `linkMods` | Mods | Nav link |
+| `linkServerSettings` | Server Settings | Nav link |
+| `linkGameSettings` | Game Settings | Nav link |
+| `linkConsole` | Console | Nav link |
+| `linkLogs` | Logs | Nav link |
+| `linkUsers` | Users | Nav link |
+| `linkHelp` | Help | Nav link |
+
+### 6.3 `controls` (Server Control Panel)
+
+**Scope:** The main dashboard where operators start/stop/kill the Factorio server and see current status.
+
+| Key | EN Value | Usage |
+|---|---|---|
+| `serverStatus` | Server Status | Panel title |
+| `startServer` | Start Server | Button text (server stopped) |
+| `saveStopServer` | Save & Stop Server | Button text (server running) |
+| `killServer` | Kill Server | Button text (danger) |
+| `status` | Status | Field label |
+| `ip` | IP | Field label |
+| `port` | Port | Field label |
+| `factorioVersion` | Factorio Version | Field label |
+| `save` | Save | Field label |
+| `ipRequired` | IP is required and must be valid. | Validation error |
+| `portRequired` | Port is required within range 1-65535 | Validation error |
+| `saveRequired` | Save is required and must be valid. | Validation error |
+
+### 6.4 `mods` (Mod Management)
+
+**Scope:** Tab navigation for install/upload/load-from-save, mod list table, mod packs.
+
+| Key | EN Value | Usage |
+|---|---|---|
+| `mods` | Mods | Panel title |
+| `modPacks` | Mod packs | Panel title |
+| `installMod` | Install Mod | Tab title |
+| `uploadMod` | Upload Mod | Tab title |
+| `loadModsFromSave` | Load Mods from Save | Tab title |
+| `changingModsDisabled` | Changing mods is disabled while the server is running! | Warning banner |
+| `deleteAllMods` | Delete all Mods | Button text |
+| `updateAllMods` | Update all Mods | Button text |
+| `downloadAllMods` | Download all Mods | Link text |
+| `confirmDeleteMod` | Are you sure you want to delete this mod? | Confirm dialog |
+| `noModsInstalled` | No mods installed | Empty state |
+| `searchMods` | Search mods... | Search placeholder |
+
+### 6.5 `saves` (Save Game Management)
+
+**Scope:** Create/upload/delete save files, save listing table.
+
+| Key | EN Value | Usage |
+|---|---|---|
+| `createSave` | Create Save | Panel title |
+| `uploadSave` | Upload Save | Panel title |
+| `saves` | Saves | Panel title |
+| `createSaveDisabled` | Create a new Save is only possible if the Factorio server is not running. | Disabled state message |
+| `confirmDeleteSave` | Are you sure you want to delete this save? | Confirm dialog |
+| `downloadSave` | Download | Download link |
+| `noSavesFound` | No saves found | Empty state |
+
+### 6.6 `serverSettings` (Server Configuration)
+
+**Scope:** The server settings form (all dynamic fields generated from API).
+
+| Key | EN Value | Usage |
+|---|---|---|
+| `serverSettings` | Server Settings | Panel title |
+| `saveSettings` | Save | Submit button text |
+| `settingsSaved` | Settings saved. | Flash success message |
+| `visibility` | Visibility | Visibility field label |
+
+The server settings form is largely data-driven: field labels and comments come from the API response. These are NOT translated. Only static UI chrome (panel title, submit button, flash messages) is in the translation file.
+
+### 6.7 `logs` (Log Viewer)
+
+**Scope:** The log tail viewer page.
+
+| Key | EN Value | Usage |
+|---|---|---|
+| `logs` | Logs | Panel title |
+| `noLogsAvailable` | No logs available | Empty state |
+
+### 6.8 `console` (RCON Console)
+
+**Scope:** The RCON command console.
+
+| Key | EN Value | Usage |
+|---|---|---|
+| `console` | Console | Panel title |
+| `consoleNotAvailable` | The console is not available, because Factorio is not running. | Disabled state message |
+| `inputPlaceholder` | Type a command... | Input placeholder |
+
+### 6.9 `userManagement` (User Administration)
+
+**Scope:** User list, create user, change password.
+
+| Key | EN Value | Usage |
+|---|---|---|
+| `listOfUsers` | List of Users | Panel title |
+| `changePassword` | Change Password | Panel title |
+| `createUser` | Create User | Panel title |
+| `confirmDeleteUser` | Are you sure you want to delete this user? | Confirm dialog |
+| `noUsersFound` | No users found | Empty state |
+
+---
+
+## 7. Build Considerations
+
+### 7.1 Webpack JSON Support
+
+Webpack 5 natively supports JSON imports as part of its default module types. The existing webpack config already includes `.json` in `resolve.extensions`:
+
+```js
+resolve: {
+  extensions: ['.js', '.json', '.jsx']
+}
+```
+
+No additional loaders or plugins are needed for the translation JSON files. Translations are bundled directly into the JS output. This is intentional for a single-page app served as Go embedded assets -- no async network requests for locale files.
+
+### 7.2 Bundle Size Impact
+
+Each namespace JSON file for English is roughly 0.5-1.5 KB (minified). The total for 9 English + 9 Chinese files is approximately 15-25 KB uncompressed, ~5-8 KB gzipped. This is negligible against the existing bundle.
+
+### 7.3 No Code Splitting by Locale
+
+For MVP, all locales are bundled into a single JS chunk. Future optimization (dynamic import per locale) can be added if the number of locales exceeds 5 or the translation data exceeds 100 KB.
+
+### 7.4 Build Verification
+
+After adding `ui/i18n.js` and all locale JSON files, run:
+
+```bash
+npm run build
+```
+
+The build must complete with zero errors. After build, verify that `app/bundle.js` contains translated strings (check by looking for a known zh-CN string in the minified output, or run a grep for `startServer` in the built bundle).
+
+---
+
+## 8. Rollout Strategy
+
+### 8.1 Implementation Order
+
+The work is divided into phases to reduce risk and enable incremental validation:
+
+| Phase | Scope | Files | Approx. Strings |
+|---|---|---|---|
+| **P1: Core infrastructure** | `ui/i18n.js`, `ui/index.js` change, `ui/locales/en/*` (complete), `ui/locales/zh-CN/*` (complete), `App.jsx` changes | 20 files | 200+ key definitions |
+| **P2: Layout + Controls** | Layout sidebar, server status panel, start/stop/kill buttons | `Layout.jsx`, `Controls.jsx` | ~30 |
+| **P3: Mods** | Mod management tabs, mod list, mod packs | `Mods.jsx`, child components | ~30 |
+| **P4: Saves** | Save listing, create/upload forms, delete confirm | `Saves.jsx`, child components | ~20 |
+| **P5: Settings + Console + Logs** | Server settings form chrome, game settings, console, log viewer | `ServerSettings.jsx`, `GameSettings.jsx`, `Console.jsx`, `Logs.jsx` | ~15 |
+| **P6: User Management + Login + Help** | User CRUD, login form, help page | `UserManagement.jsx`, `Login.jsx`, `Help.jsx` | ~25 |
+| **P7: Shared components** | `ConfirmDialog`, `Flash`, form validation errors | `ConfirmDialog.jsx`, shared form error strings | ~10 |
+
+### 8.2 Fallback Behavior
+
+During rollout (partial implementation), untranslated components continue to show hardcoded English strings. The i18n infrastructure is live from P1, but components are migrated one at a time.
+
+**After full rollout**, if a zh-CN user encounters a missing key (e.g., a newly added string that only exists in `en/`), i18next automatically falls back to the English value. No crash, no empty string, no flicker.
+
+### 8.3 Rollback
+
+Reverting is straightforward:
+
+1. In `ui/index.js`, remove the `import './i18n'` line and remove the `<Suspense>` wrapper.
+2. Delete `ui/i18n.js` and `ui/locales/`.
+3. Revert `t()` calls back to hardcoded strings across all components.
+
+---
+
+## 9. Testing and Verification Criteria
+
+### 9.1 Manual Verification
+
+After implementation on the `feat/fsm-i18n` branch:
+
+| Test | Steps | Expected Result |
+|---|---|---|
+| English default | Clear localStorage, load app with `navigator.language = 'en-US'` | All UI in English |
+| Chinese auto-detect | Clear localStorage, load app with `navigator.language = 'zh-CN'` | All UI in Simplified Chinese |
+| Language switch | Use the dropdown to switch between English and Chinese | UI language changes immediately, no page reload |
+| Persistence | Switch to Chinese, reload the page | UI loads in Chinese |
+| Partial key fallback | Temporarily remove a key from `zh-CN/controls.json`, load with Chinese | The removed key shows its English value |
+| All pages render | Navigate to every route (Controls, Saves, Mods, etc.) in both languages | Each page renders without errors, all strings localized |
+
+### 9.2 Build Verification
+
+```bash
+npm run build
+# Must exit 0 with no warnings related to i18n
+```
+
+### 9.3 Unit Testing (if applicable)
+
+No unit tests currently exist for this project (`"test": "echo no test specified"`). Creating tests for the i18n system is out of scope for this effort. Verification is manual.
+
+### 9.4 Edge Cases
+
+- **Browser with `navigator.language = 'zh-TW'`**: correctly maps to `zh-CN` (no separate Traditional Chinese locale for MVP).
+- **Browser with no `localStorage` (private mode)**: falls back to `navigator.language` on every page load.
+- **Language code with region subtag mismatch** (e.g., `zh-Hans-CN`): the language detector strips to `zh`, which matches the `zh-CN` resource bundle prefix.
+
+---
+
+## 10. Out of Scope
+
+The following are explicitly excluded from this specification and should not be implemented during the i18n effort:
+
+- **Backend translation.** Go server responses, error structs, and log output remain in English.
+- **Game content translation.** Factorio mod names, in-game item names, or save file metadata.
+- **Traditional Chinese (zh-TW).** Only Simplified Chinese is targeted. zh-TW can be added as a future locale.
+- **RTL languages.** Arabic, Hebrew, Persian, etc. No layout mirroring consideration.
+- **Pluralization.** `i18next` supports plural forms, but this app has no strings requiring `count`-based variants.
+- **CI integration.** No POEditor, Crowdin, Lokalise, or Weblate configuration.
+- **Translation memory / workflow.** No tooling for managing translation change diffs between releases.
+- **Dynamic locale loading.** All locales are bundled into the Webpack output, not fetched at runtime.
+- **Accessibility attributes.** `aria-label` translations are not covered; the existing app has minimal aria usage.
+- **Unit tests for i18n.** The project currently has no test framework; adding one is a separate effort.
+
+---
+
+## Appendix A: Full `en/common.json` Reference (Template)
+
+```json
+{
+  "save": "Save",
+  "cancel": "Cancel",
+  "confirm": "Confirm",
+  "delete": "Delete",
+  "loading": "Loading...",
+  "errorOccurred": "An error occurred.",
+  "loginFailed": "Login failed. Username or Password wrong.",
+  "name": "Name",
+  "actions": "Actions",
+  "username": "Username",
+  "password": "Password",
+  "email": "Email",
+  "role": "Role",
+  "required": "This field is required",
+  "signIn": "Sign In",
+  "logout": "Logout",
+  "saveSettings": "Settings saved.",
+  "saveLastModified": "Last Modified",
+  "size": "Size",
+  "lastModifiedAt": "Last Modified At"
+}
+```
+
+## Appendix B: Complete File Change Inventory
+
+| File | Change |
+|---|---|
+| `ui/i18n.js` | **NEW** - i18next initialization, all locale imports |
+| `ui/index.js` | Import `./i18n`, wrap `<App>` with `<Suspense>` |
+| `ui/locales/en/common.json` | **NEW** - English common strings |
+| `ui/locales/en/layout.json` | **NEW** - English layout strings |
+| `ui/locales/en/controls.json` | **NEW** - English controls strings |
+| `ui/locales/en/mods.json` | **NEW** - English mods strings |
+| `ui/locales/en/saves.json` | **NEW** - English saves strings |
+| `ui/locales/en/serverSettings.json` | **NEW** - English server settings strings |
+| `ui/locales/en/logs.json` | **NEW** - English logs strings |
+| `ui/locales/en/console.json` | **NEW** - English console strings |
+| `ui/locales/en/userManagement.json` | **NEW** - English user management strings |
+| `ui/locales/zh-CN/common.json` | **NEW** - Chinese common strings |
+| `ui/locales/zh-CN/layout.json` | **NEW** - Chinese layout strings |
+| `ui/locales/zh-CN/controls.json` | **NEW** - Chinese controls strings |
+| `ui/locales/zh-CN/mods.json` | **NEW** - Chinese mods strings |
+| `ui/locales/zh-CN/saves.json` | **NEW** - Chinese saves strings |
+| `ui/locales/zh-CN/serverSettings.json` | **NEW** - Chinese server settings strings |
+| `ui/locales/zh-CN/logs.json` | **NEW** - Chinese logs strings |
+| `ui/locales/zh-CN/console.json` | **NEW** - Chinese console strings |
+| `ui/locales/zh-CN/userManagement.json` | **NEW** - Chinese user management strings |
+| `ui/App/App.jsx` | (No change needed if i18n init is in `index.js`) |
+| `ui/App/components/Layout.jsx` | Add language switcher dropdown, translate sidebar strings |
+| `ui/App/views/Controls.jsx` | Wrap all hardcoded strings with `t()` |
+| `ui/App/views/Mods/Mods.jsx` | Wrap all hardcoded strings with `t()` |
+| `ui/App/views/Saves/Saves.jsx` | Wrap all hardcoded strings with `t()` |
+| `ui/App/views/ServerSettings.jsx` | Translate panel title, button, flash message |
+| `ui/App/views/GameSettings.jsx` | Translate panel title |
+| `ui/App/views/Console.jsx` | Translate panel title, disabled message, placeholder |
+| `ui/App/views/Logs.jsx` | Translate panel title |
+| `ui/App/views/UserManagement/UserManagment.jsx` | Translate panel titles, table headers |
+| `ui/App/views/Login.jsx` | Translate form labels, placeholders, button, flash |
+| `ui/App/views/Help.jsx` | Translate panel title, section headings |
+| `ui/App/components/ConfirmDialog.jsx` | Translate Cancel/Confirm buttons |
+| `ui/App/components/Flash.jsx` | (May need adjustment if flash messages carry translated strings) |
+
+---
+
+*End of spec.*

From d9c93b261d7122dcc171b2ec043f8c0ee4d0e8f7 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 03:20:54 +0000
Subject: [PATCH 02/38] =?UTF-8?q?=E6=96=87=E6=A1=A3:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=20FSM=20=E5=89=8D=E7=AB=AF=E5=9B=BD=E9=99=85=E5=8C=96=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E8=AE=A1=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2026-06-21-fsm-i18n-implementation.md     | 307 ++++++++++++++++++
 1 file changed, 307 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-06-21-fsm-i18n-implementation.md

diff --git a/docs/superpowers/plans/2026-06-21-fsm-i18n-implementation.md b/docs/superpowers/plans/2026-06-21-fsm-i18n-implementation.md
new file mode 100644
index 00000000..57dc8597
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-21-fsm-i18n-implementation.md
@@ -0,0 +1,307 @@
+# Implementation Plan: FSM Frontend i18n with zh-CN Support
+
+**Date:** 2026-06-21
+**Spec:** `docs/superpowers/specs/2026-06-21-fsm-i18n-design.md`
+**Branch:** `feat/fsm-i18n`
+**Stack:** React 18, webpack 5, ~95 unique UI strings across 22 component/view files
+
+---
+
+## Task Dependency Graph
+
+| Task | Depends On | Reason |
+|------|------------|--------|
+| T1: Core infrastructure | None | i18n init must exist before any component uses `t()` |
+| T2: Install npm deps | T1 | deps needed before i18n.js can import |
+| T3: Create locale JSON (en) | None | can parallel with T1, T2 |
+| T4: Create locale JSON (zh-CN) | T3 | zh-CN mirrors en structure exactly |
+| T5: ConfirmDialog i18n | T1 | shared component used by Mods; must be ready before P3 |
+| T6: Layout sidebar i18n | T1 | includes language switcher + sidebar strings |
+| T7: Controls page i18n | T1 | standalone view |
+| T8: Mods page i18n | T1, T5 | uses ConfirmDialog; has 7 sub-components |
+| T9: Saves page i18n | T1, T5 | uses ConfirmDialog; has 2 sub-components |
+| T10: Settings + Console + Logs i18n | T1 | 4 simple view files + Flash |
+| T11: User Mgmt + Login + Help i18n | T1, T6 | Login uses Flash |
+| T12: Build verification | All | final integration test |
+| T13: Commit | T12 | atomic commit of all changes |
+
+---
+
+## Parallel Execution Waves
+
+**Wave 1** (Start immediately):
+- [ ] T1: Core infrastructure (i18n.js + index.js wrapping)
+- [ ] T3: Create en/ locale JSON files (9 files)
+
+**Wave 2** (After T1 + T3):
+- [ ] T2: Install npm deps
+- [ ] T4: Create zh-CN/ locale JSON files (9 files, mirroring en/)
+- [ ] T5: ConfirmDialog i18n
+- [ ] T6: Layout sidebar i18n + language switcher
+
+**Wave 3** (After T5):
+- [ ] T7: Controls page i18n
+- [ ] T8: Mods page i18n (7 sub-components)
+- [ ] T9: Saves page i18n (2 sub-components)
+- [ ] T10: Settings + Console + Logs i18n (4 files)
+
+**Wave 4** (After T6):
+- [ ] T11: User Management + Login + Help i18n (5 files)
+
+**Wave 5** (After all tasks):
+- [ ] T12: Build verification (`npm run build`)
+- [ ] T13: Commit
+
+**Critical Path:** T1 → T5 → T8 → T12 → T13
+
+---
+
+## Tasks
+
+### T1: Core Infrastructure — `ui/i18n.js` + `ui/index.js` wrapping
+
+**Status:** pending
+
+**Files to create/modify:**
+- `ui/i18n.js` — **NEW** — i18next initialization with all 9 namespaces, language detector, localStorage cache
+- `ui/index.js` — **MODIFY** — add `import './i18n'` + wrap `<App>` with `<Suspense>`
+
+**Verification:**
+- i18n.js exports configured i18n instance
+- All 9 namespaces registered for both `en` and `zh-CN`
+- index.js renders with Suspense wrapper
+- `npm run build` succeeds
+
+---
+
+### T2: Install npm Dependencies
+
+**Status:** pending
+
+**Command:**
+```bash
+npm install i18next react-i18next i18next-browser-languagedetector
+```
+
+**Verification:**
+- Three packages appear in `package.json` `dependencies`
+- `npm run build` succeeds after install
+- No webpack config changes needed
+
+---
+
+### T3: Create English Locale JSON Files (9 files)
+
+**Status:** pending
+
+**Directory:** `ui/locales/en/` (NEW)
+
+**Files:**
+
+1. `common.json` — save, cancel, confirm, delete, loading, errorOccurred, loginFailed, name, actions, username, password, email, role, required, signIn, logout, saveSettings, saveLastModified, size, lastModifiedAt, settingsSaved
+2. `layout.json` — appTitle, serverStatus, serverManagement, fsmAdministration, linkControls, linkSaves, linkMods, linkServerSettings, linkGameSettings, linkConsole, linkLogs, linkUsers, linkHelp
+3. `controls.json` — serverStatus, startServer, saveStopServer, killServer, status, ip, port, factorioVersion, save, ipRequired, portRequired, saveRequired, RUNNING, STOPPED, UNKNOWN
+4. `mods.json` — mods, modPacks, installMod, uploadMod, loadModsFromSave, changingModsDisabled, deleteAllMods, updateAllMods, downloadAllMods, confirmDeleteMod, noModsInstalled, searchMods, install, modPortal, loadingModList
+5. `saves.json` — createSave, uploadSave, saves, createSaveDisabled, confirmDeleteSave, downloadSave, noSavesFound, name, lastModifiedAt, size, actions
+6. `serverSettings.json` — serverSettings, gameSettings, saveSettings, settingsSaved, visibility
+7. `logs.json` — logs, noLogsAvailable
+8. `console.json` — console, consoleNotAvailable, inputPlaceholder, commandSent
+9. `userManagement.json` — listOfUsers, changePassword, createUser, confirmDeleteUser, noUsersFound, name, role, email, actions
+
+**Verification:**
+- All 9 files parse as valid JSON
+- Flat structure with camelCase keys
+- `npm run build` succeeds
+
+---
+
+### T4: Create zh-CN Locale JSON Files (9 files)
+
+**Status:** pending
+
+**Directory:** `ui/locales/zh-CN/` (NEW)
+
+All 9 files mirror `en/` exactly with Chinese translations. Key examples:
+- `common.json`: `"save": "保存"`, `"cancel": "取消"`, `"confirm": "确认"`, `"delete": "删除"`
+- `controls.json`: `"startServer": "启动服务器"`, `"saveStopServer": "保存并停止服务器"`, `"killServer": "强制停止服务器"`
+- `layout.json`: `"appTitle": "Factorio 服务器管理器"`, `"linkControls": "控制面板"`
+
+**Verification:**
+- Every key from en/ exists in zh-CN/
+- Values are plain strings, no HTML markup
+- `npm run build` succeeds
+
+---
+
+### T5: ConfirmDialog Component i18n
+
+**Status:** pending
+
+**File:** `ui/App/components/ConfirmDialog.jsx` (MODIFY)
+
+**Changes:**
+- Add `useTranslation('common')` hook
+- Replace `<Button>Cancel</Button>` → `<Button>{t('cancel')}</Button>`
+- Replace `<Button>Confirm</Button>` → `<Button>{t('confirm')}</Button>`
+
+**Verification:**
+- Buttons show translated text
+- Existing functionality preserved (isLoading, onSuccess, close)
+- `npm run build` succeeds
+
+---
+
+### T6: Layout Sidebar i18n + Language Switcher
+
+**Status:** pending
+
+**File:** `ui/App/components/Layout.jsx` (MODIFY)
+
+**Changes:**
+- Add `useTranslation(['layout', 'common', 'controls'])` hook
+- Replace all sidebar link texts with `t()` calls
+- Replace status indicator values (Running/Stopped/Unknown) with `t()` calls
+- Add language switcher `<select>` in FSM Administration section:
+  ```jsx
+  <select value={i18n.language} onChange={(e) => i18n.changeLanguage(e.target.value)}>
+    <option value="en">English</option>
+    <option value="zh-CN">简体中文</option>
+  </select>
+  ```
+
+**Verification:**
+- All sidebar strings render correctly
+- Language switcher toggles between en/zh-CN immediately
+- Language preference persists in localStorage
+- `npm run build` succeeds
+
+---
+
+### T7: Controls Page i18n
+
+**Status:** pending
+
+**File:** `ui/App/views/Controls.jsx` (MODIFY)
+
+**Changes:**
+- Add `useTranslation('controls')` hook
+- Replace panel title, field labels, button texts, error messages with `t()` calls
+- Keep dynamic values (bindip, port, savefile) unchanged
+
+**Verification:**
+- All hardcoded English strings replaced
+- Dynamic values preserved
+- `npm run build` succeeds
+
+---
+
+### T8: Mods Page i18n (7 files)
+
+**Status:** pending
+
+**Files (all MODIFY):**
+1. `ui/App/views/Mods/Mods.jsx` — panel titles, buttons, warning banner
+2. `ui/App/views/Mods/components/UploadMod.jsx` — form labels, buttons
+3. `ui/App/views/Mods/components/LoadMods.jsx` — form elements, ConfirmDialog, flash
+4. `ui/App/views/Mods/components/ModPack.jsx` — ConfirmDialog usage
+5. `ui/App/views/Mods/components/CreateModPack.jsx` — button, Modal title, form labels
+6. `ui/App/views/Mods/components/AddMod/components/AddModForm.jsx` — form labels, buttons
+7. `ui/App/views/Mods/components/AddMod/components/FactorioLogin.jsx` — form labels, button, flash
+8. `ui/App/views/Mods/components/AddMod/components/SelectVersionForm.jsx` — Modal title, table headers
+
+**Verification:**
+- All mods pages render with translated strings
+- Tab navigation works
+- ConfirmDialog shows translated buttons
+- `npm run build` succeeds
+
+---
+
+### T9: Saves Page i18n (3 files)
+
+**Status:** pending
+
+**Files (all MODIFY):**
+1. `ui/App/views/Saves/Saves.jsx` — panel titles, table headers, disabled state
+2. `ui/App/views/Saves/components/CreateSaveForm.jsx` — form labels, button, error
+3. `ui/App/views/Saves/components/UploadSaveForm.jsx` — form label, placeholder, error, button
+
+**Verification:**
+- All save pages render with translated strings
+- Delete confirmation shows proper strings
+- `npm run build` succeeds
+
+---
+
+### T10: Settings + Console + Logs i18n (4 files)
+
+**Status:** pending
+
+**Files (all MODIFY):**
+1. `ui/App/views/ServerSettings.jsx` — panel title, save button, flash message
+2. `ui/App/views/GameSettings.jsx` — panel title
+3. `ui/App/views/Console.jsx` — panel title, disabled message, input placeholder
+4. `ui/App/views/Logs.jsx` — panel title
+
+**Verification:**
+- All 4 pages render with translated strings
+- Flash message uses translated string
+- `npm run build` succeeds
+
+---
+
+### T11: User Management + Login + Help i18n (5 files)
+
+**Status:** pending
+
+**Files (all MODIFY):**
+1. `ui/App/views/UserManagement/UserManagment.jsx` — panel titles, table headers
+2. `ui/App/views/UserManagement/components/CreateUserForm.jsx` — labels, placeholders, errors, buttons
+3. `ui/App/views/UserManagement/components/ChangePasswordForm.jsx` — labels, placeholders, errors, buttons, flash
+4. `ui/App/views/Login.jsx` — panel title, form labels, placeholders, errors, buttons, flash
+5. `ui/App/views/Help.jsx` — panel title, section headings, body text
+
+**Verification:**
+- All pages render with translated strings
+- Flash messages use translated text
+- Form validation errors show translated text
+- `npm run build` succeeds
+
+---
+
+### T12: Build Verification
+
+**Status:** pending
+
+**Command:**
+```bash
+npm run build
+```
+
+**Checks:**
+- Build exits with code 0
+- No i18n-related warnings
+- Output files exist in `app/` directory
+
+---
+
+### T13: Atomic Commit
+
+**Status:** pending
+
+**Commit message:** `功能: 添加 FSM 前端国际化支持(zh-CN)`
+
+**Files staged:** ~30 files (new i18n config + 18 JSON locale files + ~12 modified components + package.json + package-lock.json)
+
+---
+
+## Success Criteria
+
+1. `npm run build` exits 0 with no i18n-related warnings
+2. All files modified/created as specified
+3. English locale loads by default
+4. Chinese locale auto-detects when `navigator.language = 'zh-CN'`
+5. Language switcher toggles between en/zh-CN immediately
+6. Language preference persists across page reload
+7. Missing zh-CN keys fall back to English gracefully
+8. All pages render without console errors in both languages

From 6e452f0edbb2ab6129061ad70e70aa370fde0673 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 03:22:30 +0000
Subject: [PATCH 03/38] =?UTF-8?q?=E5=8A=9F=E8=83=BD:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=20i18n=20=E6=A0=B8=E5=BF=83=E5=9F=BA=E7=A1=80=E8=AE=BE?=
 =?UTF-8?q?=E6=96=BD=20+=20=E8=8B=B1=E6=96=87=E7=BF=BB=E8=AF=91=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=889=20=E5=91=BD=E5=90=8D=E7=A9=BA=E9=97=B4?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/i18n.js                        | 69 +++++++++++++++++++++++++++++++
 ui/index.js                       |  9 +++-
 ui/locales/en/common.json         | 42 +++++++++++++++++++
 ui/locales/en/console.json        |  8 ++++
 ui/locales/en/controls.json       | 20 +++++++++
 ui/locales/en/layout.json         | 21 ++++++++++
 ui/locales/en/logs.json           |  8 ++++
 ui/locales/en/mods.json           | 32 ++++++++++++++
 ui/locales/en/saves.json          | 13 ++++++
 ui/locales/en/serverSettings.json | 30 ++++++++++++++
 ui/locales/en/userManagement.json | 20 +++++++++
 11 files changed, 270 insertions(+), 2 deletions(-)
 create mode 100644 ui/i18n.js
 create mode 100644 ui/locales/en/common.json
 create mode 100644 ui/locales/en/console.json
 create mode 100644 ui/locales/en/controls.json
 create mode 100644 ui/locales/en/layout.json
 create mode 100644 ui/locales/en/logs.json
 create mode 100644 ui/locales/en/mods.json
 create mode 100644 ui/locales/en/saves.json
 create mode 100644 ui/locales/en/serverSettings.json
 create mode 100644 ui/locales/en/userManagement.json

diff --git a/ui/i18n.js b/ui/i18n.js
new file mode 100644
index 00000000..d730fa9e
--- /dev/null
+++ b/ui/i18n.js
@@ -0,0 +1,69 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+// English locale files (fallback language)
+import enCommon from './locales/en/common.json';
+import enLayout from './locales/en/layout.json';
+import enControls from './locales/en/controls.json';
+import enMods from './locales/en/mods.json';
+import enSaves from './locales/en/saves.json';
+import enServerSettings from './locales/en/serverSettings.json';
+import enLogs from './locales/en/logs.json';
+import enConsole from './locales/en/console.json';
+import enUserManagement from './locales/en/userManagement.json';
+
+// Chinese locale files
+import zhCommon from './locales/zh-CN/common.json';
+import zhLayout from './locales/zh-CN/layout.json';
+import zhControls from './locales/zh-CN/controls.json';
+import zhMods from './locales/zh-CN/mods.json';
+import zhSaves from './locales/zh-CN/saves.json';
+import zhServerSettings from './locales/zh-CN/serverSettings.json';
+import zhLogs from './locales/zh-CN/logs.json';
+import zhConsole from './locales/zh-CN/console.json';
+import zhUserManagement from './locales/zh-CN/userManagement.json';
+
+const resources = {
+  en: {
+    common: enCommon,
+    layout: enLayout,
+    controls: enControls,
+    mods: enMods,
+    saves: enSaves,
+    serverSettings: enServerSettings,
+    logs: enLogs,
+    console: enConsole,
+    userManagement: enUserManagement,
+  },
+  'zh-CN': {
+    common: zhCommon,
+    layout: zhLayout,
+    controls: zhControls,
+    mods: zhMods,
+    saves: zhSaves,
+    serverSettings: zhServerSettings,
+    logs: zhLogs,
+    console: zhConsole,
+    userManagement: zhUserManagement,
+  },
+};
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: 'en',
+    defaultNS: 'common',
+    detection: {
+      order: ['localStorage', 'navigator'],
+      lookupLocalStorage: 'fsm_lang',
+      caches: ['localStorage'],
+    },
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;
diff --git a/ui/index.js b/ui/index.js
index 60afb9cd..27bed460 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -1,10 +1,15 @@
 import regeneratorRuntime from "regenerator-runtime"
+import './i18n';
 import Bus from "./notifications"
-import React from 'react';
+import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App/App.jsx';
 
 window.flash = (message, color="gray-light") => Bus.emit('flash', ({message, color}));
 
 const root = ReactDOM.createRoot(document.getElementById('app'));
-root.render(<App/>);
+root.render(
+  <Suspense fallback={<div>Loading...</div>}>
+    <App/>
+  </Suspense>
+);
diff --git a/ui/locales/en/common.json b/ui/locales/en/common.json
new file mode 100644
index 00000000..46e48a01
--- /dev/null
+++ b/ui/locales/en/common.json
@@ -0,0 +1,42 @@
+{
+  "save": "Save",
+  "cancel": "Cancel",
+  "confirm": "Confirm",
+  "delete": "Delete",
+  "loading": "Loading...",
+  "errorOccurred": "An error occurred",
+  "loginFailed": "Login failed. Please check your credentials.",
+  "name": "Name",
+  "actions": "Actions",
+  "username": "Username",
+  "password": "Password",
+  "email": "Email",
+  "role": "Role",
+  "required": "Required",
+  "signIn": "Sign In",
+  "logout": "Logout",
+  "saveSettings": "Save Settings",
+  "saveLastModified": "Last Modified",
+  "size": "Size",
+  "lastModifiedAt": "Last Modified At",
+  "settingsSaved": "Settings saved.",
+  "download": "Download",
+  "upload": "Upload",
+  "search": "Search",
+  "close": "Close",
+  "back": "Back",
+  "ok": "OK",
+  "yes": "Yes",
+  "no": "No",
+  "enabled": "Enabled",
+  "disabled": "Disabled",
+  "unknown": "Unknown",
+  "none": "None",
+  "edit": "Edit",
+  "create": "Create",
+  "remove": "Remove",
+  "add": "Add",
+  "update": "Update",
+  "refresh": "Refresh",
+  "status": "Status"
+}
diff --git a/ui/locales/en/console.json b/ui/locales/en/console.json
new file mode 100644
index 00000000..c0a119ac
--- /dev/null
+++ b/ui/locales/en/console.json
@@ -0,0 +1,8 @@
+{
+  "console": "Console",
+  "consoleNotAvailable": "Console is not available when the server is not running.",
+  "inputPlaceholder": "Enter command...",
+  "commandSent": "Command sent.",
+  "rconNotAvailable": "RCON is not available.",
+  "send": "Send"
+}
diff --git a/ui/locales/en/controls.json b/ui/locales/en/controls.json
new file mode 100644
index 00000000..39cd8602
--- /dev/null
+++ b/ui/locales/en/controls.json
@@ -0,0 +1,20 @@
+{
+  "serverStatus": "Server Status",
+  "startServer": "Start Server",
+  "saveStopServer": "Save & Stop Server",
+  "killServer": "Kill Server",
+  "status": "Status",
+  "ip": "IP",
+  "port": "Port",
+  "factorioVersion": "Factorio Version",
+  "save": "Save",
+  "ipRequired": "IP is required and must be valid.",
+  "portRequired": "Port is required within range 1-65535",
+  "saveRequired": "Save is required and must be valid.",
+  "RUNNING": "Running",
+  "STOPPED": "Stopped",
+  "UNKNOWN": "Unknown",
+  "saveBeforeStop": "Save before stopping?",
+  "confirmStop": "Are you sure you want to stop the server?",
+  "confirmKill": "Are you sure you want to kill the server? This may cause data loss."
+}
diff --git a/ui/locales/en/layout.json b/ui/locales/en/layout.json
new file mode 100644
index 00000000..3b744066
--- /dev/null
+++ b/ui/locales/en/layout.json
@@ -0,0 +1,21 @@
+{
+  "appTitle": "Factorio Server Manager",
+  "serverStatus": "Server Status",
+  "serverManagement": "Server Management",
+  "fsmAdministration": "FSM Administration",
+  "linkControls": "Controls",
+  "linkSaves": "Saves",
+  "linkMods": "Mods",
+  "linkServerSettings": "Server Settings",
+  "linkGameSettings": "Game Settings",
+  "linkConsole": "Console",
+  "linkLogs": "Logs",
+  "linkUsers": "Users",
+  "linkHelp": "Help",
+  "languageLabel": "Language",
+  "helpTitle": "Help",
+  "helpBugsAndHelp": "Bugs and Help",
+  "helpDescription": "For bug reports, feature requests, or help with Factorio Server Manager, please visit the following resources:",
+  "helpResources": "Resources",
+  "helpWiki": "Wiki"
+}
diff --git a/ui/locales/en/logs.json b/ui/locales/en/logs.json
new file mode 100644
index 00000000..3b699aeb
--- /dev/null
+++ b/ui/locales/en/logs.json
@@ -0,0 +1,8 @@
+{
+  "logs": "Logs",
+  "noLogsAvailable": "No logs available.",
+  "factorioLog": "Factorio Log",
+  "factorioCurrentLog": "Factorio Current Log",
+  "factorioPreviousLog": "Factorio Previous Log",
+  "fsmLog": "FSM Log"
+}
diff --git a/ui/locales/en/mods.json b/ui/locales/en/mods.json
new file mode 100644
index 00000000..6c8e3904
--- /dev/null
+++ b/ui/locales/en/mods.json
@@ -0,0 +1,32 @@
+{
+  "mods": "Mods",
+  "modPacks": "Mod Packs",
+  "installMod": "Install Mod",
+  "uploadMod": "Upload Mod",
+  "loadModsFromSave": "Load Mods from Save",
+  "changingModsDisabled": "Changing mods is disabled while the server is running. Please stop the server before making changes.",
+  "deleteAllMods": "Delete all Mods",
+  "updateAllMods": "Update all Mods",
+  "downloadAllMods": "Download all Mods",
+  "confirmDeleteMod": "Are you sure you want to delete this mod?",
+  "noModsInstalled": "No mods installed.",
+  "searchMods": "Search mods...",
+  "install": "Install",
+  "modPortal": "Mod Portal",
+  "loadingModList": "Loading mod list...",
+  "uploadModTitle": "Upload Mod",
+  "selectModFile": "Select a mod file",
+  "createModPack": "Create Mod Pack",
+  "modPackName": "Mod Pack Name",
+  "modsInThisPack": "Mods in this pack",
+  "factorioLogin": "Factorio.com Login",
+  "token": "Token",
+  "login": "Login",
+  "selectVersion": "Select Version",
+  "version": "Version",
+  "loadMods": "Load Mods",
+  "loadModsTitle": "Load Mods from Save",
+  "selectSave": "Select a save file",
+  "modsLoaded": "Mods loaded from save.",
+  "deleteExistingMods": "Delete all existing mods before loading? Existing mods will be permanently removed."
+}
diff --git a/ui/locales/en/saves.json b/ui/locales/en/saves.json
new file mode 100644
index 00000000..b3f52b7c
--- /dev/null
+++ b/ui/locales/en/saves.json
@@ -0,0 +1,13 @@
+{
+  "createSave": "Create Save",
+  "uploadSave": "Upload Save",
+  "saves": "Saves",
+  "createSaveDisabled": "Creating saves is disabled while the server is running.",
+  "confirmDeleteSave": "Are you sure you want to delete this save?",
+  "downloadSave": "Download",
+  "noSavesFound": "No saves found.",
+  "savefileName": "Save File Name",
+  "saveFile": "Save File",
+  "selectFile": "Select File ...",
+  "saveNameRequired": "Save name is required."
+}
diff --git a/ui/locales/en/serverSettings.json b/ui/locales/en/serverSettings.json
new file mode 100644
index 00000000..1e85bf1b
--- /dev/null
+++ b/ui/locales/en/serverSettings.json
@@ -0,0 +1,30 @@
+{
+  "serverSettings": "Server Settings",
+  "gameSettings": "Game Settings",
+  "saveSettings": "Save Settings",
+  "settingsSaved": "Settings saved.",
+  "visibility": "Visibility",
+  "public": "Public",
+  "lan": "LAN",
+  "hidden": "Hidden",
+  "requireUserVerification": "Require User Verification",
+  "maxPlayers": "Max Players",
+  "gamePassword": "Game Password",
+  "description": "Description",
+  "tags": "Tags",
+  "autoPause": "Auto Pause",
+  "onlyAdminsCanPause": "Only admins can pause",
+  "autosaveInterval": "Autosave Interval (minutes)",
+  "autosaveSlots": "Autosave Slots",
+  "afkAutokickInterval": "AFK Auto-kick Interval (minutes)",
+  "allowCommands": "Allow Commands",
+  "resourcePatchSize": "Resource Patch Size",
+  "resourceFrequency": "Resource Frequency",
+  "resourceRichness": "Resource Richness",
+  "enemyBaseSize": "Enemy Base Size",
+  "enemyBaseFrequency": "Enemy Base Frequency",
+  "startingAreaSize": "Starting Area Size",
+  "peacefulMode": "Peaceful Mode",
+  "researchQueue": "Research Queue",
+  "technologyPriceMultiplier": "Technology Price Multiplier"
+}
diff --git a/ui/locales/en/userManagement.json b/ui/locales/en/userManagement.json
new file mode 100644
index 00000000..8b9b6e83
--- /dev/null
+++ b/ui/locales/en/userManagement.json
@@ -0,0 +1,20 @@
+{
+  "listOfUsers": "List of Users",
+  "changePassword": "Change Password",
+  "createUser": "Create User",
+  "confirmDeleteUser": "Are you sure you want to delete this user?",
+  "noUsersFound": "No users found.",
+  "passwordConfirmation": "Password Confirmation",
+  "oldPassword": "Old Password",
+  "newPassword": "New Password",
+  "newPasswordConfirmation": "New Password Confirmation",
+  "passwordRequired": "Password is required.",
+  "passwordMismatch": "Passwords do not match.",
+  "passwordChanged": "Password changed.",
+  "usernameRequired": "Username is required.",
+  "roleRequired": "Role is required.",
+  "emailRequired": "Email is required.",
+  "userCreated": "User created.",
+  "userDeleted": "User deleted.",
+  "change": "Change"
+}

From af63fe9efc0244b30a24ff2837bf831842d0d722 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 03:30:20 +0000
Subject: [PATCH 04/38] =?UTF-8?q?=E5=8A=9F=E8=83=BD:=20=E5=AE=89=E8=A3=85?=
 =?UTF-8?q?=20i18n=20=E4=BE=9D=E8=B5=96=20+=20=E6=B7=BB=E5=8A=A0=E4=B8=AD?=
 =?UTF-8?q?=E6=96=87=E7=BF=BB=E8=AF=91=E6=96=87=E4=BB=B6=EF=BC=889=20?=
 =?UTF-8?q?=E5=91=BD=E5=90=8D=E7=A9=BA=E9=97=B4=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                    | 172 ++++++++++++++++++++++-----
 package.json                         |   3 +
 ui/locales/zh-CN/common.json         |  42 +++++++
 ui/locales/zh-CN/console.json        |   8 ++
 ui/locales/zh-CN/controls.json       |  20 ++++
 ui/locales/zh-CN/layout.json         |  21 ++++
 ui/locales/zh-CN/logs.json           |   8 ++
 ui/locales/zh-CN/mods.json           |  32 +++++
 ui/locales/zh-CN/saves.json          |  13 ++
 ui/locales/zh-CN/serverSettings.json |  30 +++++
 ui/locales/zh-CN/userManagement.json |  20 ++++
 11 files changed, 341 insertions(+), 28 deletions(-)
 create mode 100644 ui/locales/zh-CN/common.json
 create mode 100644 ui/locales/zh-CN/console.json
 create mode 100644 ui/locales/zh-CN/controls.json
 create mode 100644 ui/locales/zh-CN/layout.json
 create mode 100644 ui/locales/zh-CN/logs.json
 create mode 100644 ui/locales/zh-CN/mods.json
 create mode 100644 ui/locales/zh-CN/saves.json
 create mode 100644 ui/locales/zh-CN/serverSettings.json
 create mode 100644 ui/locales/zh-CN/userManagement.json

diff --git a/package-lock.json b/package-lock.json
index eae1b4f2..9e09ea4c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,10 @@
         "@fortawesome/react-fontawesome": "^0.2.0",
         "axios": "^1.6.0",
         "fuse.js": "^7.0.0",
+        "i18next": "^26.3.1",
+        "i18next-browser-languagedetector": "^8.2.1",
         "react-hook-form": "^7.47.0",
+        "react-i18next": "^17.0.8",
         "regenerator-runtime": "^0.14.0",
         "semver": "^7.3.7",
         "tailwindcss": "^3.3.5"
@@ -1831,23 +1834,14 @@
       "dev": true
     },
     "node_modules/@babel/runtime": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz",
-      "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==",
-      "dev": true,
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      },
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
-    },
     "node_modules/@babel/template": {
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@@ -3923,6 +3917,52 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "26.3.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.3.1.tgz",
+      "integrity": "sha512-txQqd5EULsqEh9OJqRH15aCaOuy/nLJyhw5EHCSKLKJE1aBbb3Zve2+uQIxgWhPm1QqUQoWyQBm2kfmmIrzkcQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://www.locize.com/i18next"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.locize.com"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.1.tgz",
+      "integrity": "sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
@@ -5410,6 +5450,33 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.8.tgz",
+      "integrity": "sha512-0ooKbGLU8JXhe1zwpQUWIeXSgLPOfwJmgheWRIUpcoA0CpyabpGhayjdG+/eA5esC1AQ8h2jWpXjJfzQzeDOCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 26.2.0",
+        "react": ">= 16.8.0",
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -6258,11 +6325,29 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -7722,21 +7807,9 @@
       "dev": true
     },
     "@babel/runtime": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz",
-      "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==",
-      "dev": true,
-      "requires": {
-        "regenerator-runtime": "^0.13.4"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.13.11",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-          "dev": true
-        }
-      }
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw=="
     },
     "@babel/template": {
       "version": "7.22.15",
@@ -9245,6 +9318,28 @@
         "function-bind": "^1.1.2"
       }
     },
+    "html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "requires": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "i18next": {
+      "version": "26.3.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.3.1.tgz",
+      "integrity": "sha512-txQqd5EULsqEh9OJqRH15aCaOuy/nLJyhw5EHCSKLKJE1aBbb3Zve2+uQIxgWhPm1QqUQoWyQBm2kfmmIrzkcQ==",
+      "requires": {}
+    },
+    "i18next-browser-languagedetector": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.1.tgz",
+      "integrity": "sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==",
+      "requires": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
@@ -10228,6 +10323,16 @@
       "integrity": "sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==",
       "requires": {}
     },
+    "react-i18next": {
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.8.tgz",
+      "integrity": "sha512-0ooKbGLU8JXhe1zwpQUWIeXSgLPOfwJmgheWRIUpcoA0CpyabpGhayjdG+/eA5esC1AQ8h2jWpXjJfzQzeDOCw==",
+      "requires": {
+        "@babel/runtime": "^7.29.2",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -10807,11 +10912,22 @@
         "punycode": "^2.1.0"
       }
     },
+    "use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "requires": {}
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w=="
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index c0abfe46..a47ad41e 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,10 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "axios": "^1.6.0",
     "fuse.js": "^7.0.0",
+    "i18next": "^26.3.1",
+    "i18next-browser-languagedetector": "^8.2.1",
     "react-hook-form": "^7.47.0",
+    "react-i18next": "^17.0.8",
     "regenerator-runtime": "^0.14.0",
     "semver": "^7.3.7",
     "tailwindcss": "^3.3.5"
diff --git a/ui/locales/zh-CN/common.json b/ui/locales/zh-CN/common.json
new file mode 100644
index 00000000..b4becf0b
--- /dev/null
+++ b/ui/locales/zh-CN/common.json
@@ -0,0 +1,42 @@
+{
+  "save": "保存",
+  "cancel": "取消",
+  "confirm": "确认",
+  "delete": "删除",
+  "loading": "加载中...",
+  "errorOccurred": "发生错误",
+  "loginFailed": "登录失败，请检查凭据。",
+  "name": "名称",
+  "actions": "操作",
+  "username": "用户名",
+  "password": "密码",
+  "email": "邮箱",
+  "role": "角色",
+  "required": "必填",
+  "signIn": "登录",
+  "logout": "退出登录",
+  "saveSettings": "保存设置",
+  "saveLastModified": "最后修改",
+  "size": "大小",
+  "lastModifiedAt": "最后修改时间",
+  "settingsSaved": "设置已保存。",
+  "download": "下载",
+  "upload": "上传",
+  "search": "搜索",
+  "close": "关闭",
+  "back": "返回",
+  "ok": "确定",
+  "yes": "是",
+  "no": "否",
+  "enabled": "已启用",
+  "disabled": "已禁用",
+  "unknown": "未知",
+  "none": "无",
+  "edit": "编辑",
+  "create": "创建",
+  "remove": "移除",
+  "add": "添加",
+  "update": "更新",
+  "refresh": "刷新",
+  "status": "状态"
+}
diff --git a/ui/locales/zh-CN/console.json b/ui/locales/zh-CN/console.json
new file mode 100644
index 00000000..4a43e043
--- /dev/null
+++ b/ui/locales/zh-CN/console.json
@@ -0,0 +1,8 @@
+{
+  "console": "控制台",
+  "consoleNotAvailable": "服务器未运行时控制台不可用。",
+  "inputPlaceholder": "输入指令...",
+  "commandSent": "指令已发送。",
+  "rconNotAvailable": "RCON 不可用。",
+  "send": "发送"
+}
diff --git a/ui/locales/zh-CN/controls.json b/ui/locales/zh-CN/controls.json
new file mode 100644
index 00000000..d1420efe
--- /dev/null
+++ b/ui/locales/zh-CN/controls.json
@@ -0,0 +1,20 @@
+{
+  "serverStatus": "服务器状态",
+  "startServer": "启动服务器",
+  "saveStopServer": "保存并停止服务器",
+  "killServer": "强制停止服务器",
+  "status": "状态",
+  "ip": "IP 地址",
+  "port": "端口",
+  "factorioVersion": "Factorio 版本",
+  "save": "存档",
+  "ipRequired": "IP 地址为必填项且必须有效。",
+  "portRequired": "端口为必填项，范围 1-65535",
+  "saveRequired": "存档为必填项且必须有效。",
+  "RUNNING": "运行中",
+  "STOPPED": "已停止",
+  "UNKNOWN": "未知",
+  "saveBeforeStop": "停止前保存游戏？",
+  "confirmStop": "确认停止服务器？",
+  "confirmKill": "确认强制停止服务器？这可能导致数据丢失。"
+}
diff --git a/ui/locales/zh-CN/layout.json b/ui/locales/zh-CN/layout.json
new file mode 100644
index 00000000..84353f39
--- /dev/null
+++ b/ui/locales/zh-CN/layout.json
@@ -0,0 +1,21 @@
+{
+  "appTitle": "Factorio 服务器管理器",
+  "serverStatus": "服务器状态",
+  "serverManagement": "服务器管理",
+  "fsmAdministration": "FSM 管理",
+  "linkControls": "控制面板",
+  "linkSaves": "存档",
+  "linkMods": "模组",
+  "linkServerSettings": "服务器设置",
+  "linkGameSettings": "游戏设置",
+  "linkConsole": "控制台",
+  "linkLogs": "日志",
+  "linkUsers": "用户",
+  "linkHelp": "帮助",
+  "languageLabel": "语言",
+  "helpTitle": "帮助",
+  "helpBugsAndHelp": "Bug 与帮助",
+  "helpDescription": "报告 Bug、请求新功能或获取 Factorio 服务器管理器的帮助，请访问以下资源：",
+  "helpResources": "资源",
+  "helpWiki": "Wiki"
+}
diff --git a/ui/locales/zh-CN/logs.json b/ui/locales/zh-CN/logs.json
new file mode 100644
index 00000000..9570d675
--- /dev/null
+++ b/ui/locales/zh-CN/logs.json
@@ -0,0 +1,8 @@
+{
+  "logs": "日志",
+  "noLogsAvailable": "暂无日志。",
+  "factorioLog": "Factorio 日志",
+  "factorioCurrentLog": "Factorio 当前日志",
+  "factorioPreviousLog": "Factorio 历史日志",
+  "fsmLog": "FSM 日志"
+}
diff --git a/ui/locales/zh-CN/mods.json b/ui/locales/zh-CN/mods.json
new file mode 100644
index 00000000..833e7cd3
--- /dev/null
+++ b/ui/locales/zh-CN/mods.json
@@ -0,0 +1,32 @@
+{
+  "mods": "模组",
+  "modPacks": "模组合集",
+  "installMod": "安装模组",
+  "uploadMod": "上传模组",
+  "loadModsFromSave": "从存档加载模组",
+  "changingModsDisabled": "服务器运行中无法更改模组。请先停止服务器。",
+  "deleteAllMods": "删除所有模组",
+  "updateAllMods": "更新所有模组",
+  "downloadAllMods": "下载所有模组",
+  "confirmDeleteMod": "确认删除此模组？",
+  "noModsInstalled": "未安装任何模组。",
+  "searchMods": "搜索模组...",
+  "install": "安装",
+  "modPortal": "模组门户",
+  "loadingModList": "正在加载模组列表...",
+  "uploadModTitle": "上传模组",
+  "selectModFile": "选择一个模组文件",
+  "createModPack": "创建模组合集",
+  "modPackName": "模组合集名称",
+  "modsInThisPack": "此合集中的模组",
+  "factorioLogin": "Factorio.com 登录",
+  "token": "令牌",
+  "login": "登录",
+  "selectVersion": "选择版本",
+  "version": "版本",
+  "loadMods": "加载模组",
+  "loadModsTitle": "从存档加载模组",
+  "selectSave": "选择一个存档文件",
+  "modsLoaded": "已从存档加载模组。",
+  "deleteExistingMods": "加载前删除所有现有模组？现有模组将被永久移除。"
+}
diff --git a/ui/locales/zh-CN/saves.json b/ui/locales/zh-CN/saves.json
new file mode 100644
index 00000000..ea9af1b6
--- /dev/null
+++ b/ui/locales/zh-CN/saves.json
@@ -0,0 +1,13 @@
+{
+  "createSave": "创建存档",
+  "uploadSave": "上传存档",
+  "saves": "存档",
+  "createSaveDisabled": "服务器运行中无法创建存档。",
+  "confirmDeleteSave": "确认删除此存档？",
+  "downloadSave": "下载",
+  "noSavesFound": "未找到存档。",
+  "savefileName": "存档文件名",
+  "saveFile": "存档文件",
+  "selectFile": "选择文件 ...",
+  "saveNameRequired": "存档名称为必填项。"
+}
diff --git a/ui/locales/zh-CN/serverSettings.json b/ui/locales/zh-CN/serverSettings.json
new file mode 100644
index 00000000..d49ca1f9
--- /dev/null
+++ b/ui/locales/zh-CN/serverSettings.json
@@ -0,0 +1,30 @@
+{
+  "serverSettings": "服务器设置",
+  "gameSettings": "游戏设置",
+  "saveSettings": "保存设置",
+  "settingsSaved": "设置已保存。",
+  "visibility": "可见性",
+  "public": "公开",
+  "lan": "局域网",
+  "hidden": "隐藏",
+  "requireUserVerification": "需要用户验证",
+  "maxPlayers": "最大玩家数",
+  "gamePassword": "游戏密码",
+  "description": "描述",
+  "tags": "标签",
+  "autoPause": "自动暂停",
+  "onlyAdminsCanPause": "仅管理员可暂停",
+  "autosaveInterval": "自动保存间隔（分钟）",
+  "autosaveSlots": "自动保存槽位",
+  "afkAutokickInterval": "AFK 自动踢出间隔（分钟）",
+  "allowCommands": "允许指令",
+  "resourcePatchSize": "资源矿脉大小",
+  "resourceFrequency": "资源频率",
+  "resourceRichness": "资源富饶度",
+  "enemyBaseSize": "虫巢大小",
+  "enemyBaseFrequency": "虫巢频率",
+  "startingAreaSize": "起始区域大小",
+  "peacefulMode": "和平模式",
+  "researchQueue": "研究队列",
+  "technologyPriceMultiplier": "科技价格倍率"
+}
diff --git a/ui/locales/zh-CN/userManagement.json b/ui/locales/zh-CN/userManagement.json
new file mode 100644
index 00000000..23a8b199
--- /dev/null
+++ b/ui/locales/zh-CN/userManagement.json
@@ -0,0 +1,20 @@
+{
+  "listOfUsers": "用户列表",
+  "changePassword": "修改密码",
+  "createUser": "创建用户",
+  "confirmDeleteUser": "确认删除此用户？",
+  "noUsersFound": "未找到用户。",
+  "passwordConfirmation": "确认密码",
+  "oldPassword": "旧密码",
+  "newPassword": "新密码",
+  "newPasswordConfirmation": "确认新密码",
+  "passwordRequired": "密码为必填项。",
+  "passwordMismatch": "两次输入的密码不一致。",
+  "passwordChanged": "密码已修改。",
+  "usernameRequired": "用户名为必填项。",
+  "roleRequired": "角色为必填项。",
+  "emailRequired": "邮箱为必填项。",
+  "userCreated": "用户已创建。",
+  "userDeleted": "用户已删除。",
+  "change": "修改"
+}

From a2b7376fa0fb5c0902f46940698a21ea12d5b492 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 04:25:39 +0000
Subject: [PATCH 05/38] =?UTF-8?q?=E5=8A=9F=E8=83=BD:=20ConfirmDialog=20+?=
 =?UTF-8?q?=20Layout=20=E5=9B=BD=E9=99=85=E5=8C=96=EF=BC=88=E5=90=AB?=
 =?UTF-8?q?=E8=AF=AD=E8=A8=80=E5=88=87=E6=8D=A2=E5=99=A8=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/App/components/ConfirmDialog.jsx |  6 ++--
 ui/App/components/Layout.jsx        | 48 +++++++++++++++++++----------
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/ui/App/components/ConfirmDialog.jsx b/ui/App/components/ConfirmDialog.jsx
index 7f96c9bc..3e902068 100644
--- a/ui/App/components/ConfirmDialog.jsx
+++ b/ui/App/components/ConfirmDialog.jsx
@@ -1,9 +1,11 @@
 import React, {useState} from 'react';
+import { useTranslation } from 'react-i18next';
 import Modal from "./Modal";
 import Button from "./Button";
 
 function ConfirmDialog({title, content, isOpen, close, onSuccess}) {
 
+    const { t } = useTranslation('common');
     const [isLoading, setIsLoading] = useState(false);
 
     const confirm = () => {
@@ -21,8 +23,8 @@ function ConfirmDialog({title, content, isOpen, close, onSuccess}) {
             content={content}
             actions={
                 <>
-                    <Button size="sm" type="danger" className="mr-2" onClick={close}>Cancel</Button>
-                    <Button size="sm" isLoading={isLoading} type="success" onClick={confirm}>Confirm</Button>
+                    <Button size="sm" type="danger" className="mr-2" onClick={close}>{t('cancel')}</Button>
+                    <Button size="sm" isLoading={isLoading} type="success" onClick={confirm}>{t('confirm')}</Button>
                 </>
             }
             isOpen={isOpen}
diff --git a/ui/App/components/Layout.jsx b/ui/App/components/Layout.jsx
index 2f47a676..87ccd14f 100644
--- a/ui/App/components/Layout.jsx
+++ b/ui/App/components/Layout.jsx
@@ -1,4 +1,6 @@
 import React, {useEffect, useState} from "react";
+import { useTranslation } from 'react-i18next';
+import i18n from '../../i18n';
 import {NavLink, Outlet} from "react-router-dom";
 import Button from "./Button";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
@@ -7,18 +9,19 @@ import {Flash} from "./Flash";
 
 const Layout = ({handleLogout, serverStatus}) => {
 
+    const { t } = useTranslation(['layout', 'common', 'controls']);
     const [isNavCollapsed, setIsNavCollapsed] = useState(true);
 
     const Status = ({info}) => {
 
-        let text = 'Unknown';
+        let text = t('UNKNOWN', { ns: 'controls' });
         let color = 'gray-light';
 
         if (info && info.running) {
-            text = 'Running';
+            text = t('RUNNING', { ns: 'controls' });
             color = 'green';
         } else if (info && !info.running) {
-            text = 'Stopped';
+            text = t('STOPPED', { ns: 'controls' });
             color = 'red';
         }
 
@@ -48,7 +51,7 @@ const Layout = ({handleLogout, serverStatus}) => {
             <div className="w-full md:w-88 md:fixed md:top-0 md:left-0 bg-gray-dark md:h-screen overflow-y-auto">
                 <div className="py-4 px-2 accentuated">
                     <div className="mx-4 justify-between flex text-center">
-                        <span className="text-dirty-white text-xl">Factorio Server Manager</span>
+                        <span className="text-dirty-white text-xl">{t('appTitle', { ns: 'layout' })}</span>
                         <button
                             className="md:hidden cursor-pointer text-white hover:text-dirty-white"
                             onClick={() => setIsNavCollapsed(!isNavCollapsed)}
@@ -59,33 +62,44 @@ const Layout = ({handleLogout, serverStatus}) => {
                 </div>
                 <div className={isNavCollapsed ? "hidden md:block" : "block"}>
                     <div className="py-4 px-2 accentuated">
-                        <h1 className="text-dirty-white text-lg mb-2 mx-4">Server Status</h1>
+                        <h1 className="text-dirty-white text-lg mb-2 mx-4">{t('serverStatus', { ns: 'layout' })}</h1>
                         <div className="mx-4 mb-4 text-center">
                             <Status info={serverStatus}/>
                         </div>
                     </div>
                     <div className="py-4 px-2 accentuated">
-                        <h1 className="text-dirty-white text-lg mb-2 mx-4">Server Management</h1>
+                        <h1 className="text-dirty-white text-lg mb-2 mx-4">{t('serverManagement', { ns: 'layout' })}</h1>
                         <div className="text-white text-center rounded-sm bg-black shadow-inner mx-4 p-1">
-                            <Link to="/">Controls</Link>
-                            <Link to="/saves">Saves</Link>
-                            <Link to="/mods">Mods</Link>
-                            <Link to="/server-settings">Server Settings</Link>
-                            <Link to="/game-settings">Game Settings</Link>
-                            <Link to="/console">Console</Link>
-                            <Link to="/logs" last={true}>Logs</Link>
+                            <Link to="/">{t('linkControls', { ns: 'layout' })}</Link>
+                            <Link to="/saves">{t('linkSaves', { ns: 'layout' })}</Link>
+                            <Link to="/mods">{t('linkMods', { ns: 'layout' })}</Link>
+                            <Link to="/server-settings">{t('linkServerSettings', { ns: 'layout' })}</Link>
+                            <Link to="/game-settings">{t('linkGameSettings', { ns: 'layout' })}</Link>
+                            <Link to="/console">{t('linkConsole', { ns: 'layout' })}</Link>
+                            <Link to="/logs" last={true}>{t('linkLogs', { ns: 'layout' })}</Link>
                         </div>
                     </div>
                     <div className="py-4 px-2 accentuated">
-                        <h1 className="text-dirty-white text-lg mb-2 mx-4">FSM Administration</h1>
+                        <h1 className="text-dirty-white text-lg mb-2 mx-4">{t('fsmAdministration', { ns: 'layout' })}</h1>
                         <div className="text-white text-center rounded-sm bg-black shadow-inner mx-4 p-1">
-                            <Link to="/user-management">Users</Link>
-                            <Link to="/help" last={true}>Help</Link>
+                            <Link to="/user-management">{t('linkUsers', { ns: 'layout' })}</Link>
+                            <Link to="/help" last={true}>{t('linkHelp', { ns: 'layout' })}</Link>
+                        </div>
+                        <div className="mt-4 mx-4">
+                            <label className="text-dirty-white text-sm block mb-1">{t('languageLabel', { ns: 'layout' })}</label>
+                            <select
+                                className="w-full bg-gray-dark text-white border border-gray-light rounded px-2 py-1 text-sm"
+                                value={i18n.language}
+                                onChange={(e) => { i18n.changeLanguage(e.target.value); }}
+                            >
+                                <option value="en">English</option>
+                                <option value="zh-CN">简体中文</option>
+                            </select>
                         </div>
                     </div>
                     <div className="py-4 px-2 accentuated">
                         <div className="text-white text-center rounded-sm bg-black shadow-inner mx-4 p-1">
-                            <Button type="danger" className="w-full" onClick={handleLogout}>Logout</Button>
+                            <Button type="danger" className="w-full" onClick={handleLogout}>{t('logout', { ns: 'common' })}</Button>
                         </div>
                     </div>
                     <div className="accentuated-t accentuated-x md:block hidden"/>

From b0ee691a90e586f27c517eea4310ed658cbd85f0 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 04:29:30 +0000
Subject: [PATCH 06/38] =?UTF-8?q?=E5=8A=9F=E8=83=BD:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=20FSM=20=E5=89=8D=E7=AB=AF=E5=9B=BD=E9=99=85=E5=8C=96=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=EF=BC=88zh-CN=20=E4=B8=AD=E6=96=87=E7=BF=BB=E8=AF=91?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docker/build-release.sh                       |  0
 docker/build.sh                               |  0
 docker/entrypoint.sh                          |  0
 ui/App/views/Console.jsx                      |  7 +++-
 ui/App/views/Controls.jsx                     | 42 ++++++++++---------
 ui/App/views/GameSettings.jsx                 |  5 ++-
 ui/App/views/Help.jsx                         | 10 +++--
 ui/App/views/Login.jsx                        | 18 ++++----
 ui/App/views/Logs.jsx                         |  5 ++-
 ui/App/views/Mods/Mods.jsx                    | 25 ++++++-----
 .../AddMod/components/AddModForm.jsx          | 14 ++++---
 .../AddMod/components/SelectVersionForm.jsx   | 13 +++---
 .../views/Mods/components/CreateModPack.jsx   | 13 +++---
 ui/App/views/Mods/components/LoadMods.jsx     | 13 +++---
 ui/App/views/Mods/components/ModList.jsx      | 14 ++++---
 ui/App/views/Mods/components/ModPack.jsx      |  7 +++-
 ui/App/views/Mods/components/UploadMod.jsx    |  8 ++--
 ui/App/views/Saves/Saves.jsx                  | 20 +++++----
 .../views/Saves/components/CreateSaveForm.jsx |  8 ++--
 .../views/Saves/components/UploadSaveForm.jsx | 10 +++--
 ui/App/views/ServerSettings.jsx               |  8 ++--
 ui/App/views/UserManagement/UserManagment.jsx | 17 ++++----
 .../components/ChangePasswordForm.jsx         | 24 ++++++-----
 .../components/CreateUserForm.jsx             | 34 ++++++++-------
 ui/locales/en/mods.json                       |  5 ++-
 ui/locales/zh-CN/mods.json                    |  5 ++-
 26 files changed, 191 insertions(+), 134 deletions(-)
 mode change 100755 => 100644 docker/build-release.sh
 mode change 100755 => 100644 docker/build.sh
 mode change 100755 => 100644 docker/entrypoint.sh

diff --git a/docker/build-release.sh b/docker/build-release.sh
old mode 100755
new mode 100644
diff --git a/docker/build.sh b/docker/build.sh
old mode 100755
new mode 100644
diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh
old mode 100755
new mode 100644
diff --git a/ui/App/views/Console.jsx b/ui/App/views/Console.jsx
index 16d633f4..173fa82b 100644
--- a/ui/App/views/Console.jsx
+++ b/ui/App/views/Console.jsx
@@ -1,9 +1,12 @@
 import Panel from "../components/Panel";
 import React, {useEffect, useRef, useState} from "react";
+import { useTranslation } from 'react-i18next';
 import socket from "../../api/socket";
 
 const Console = ({serverStatus}) => {
 
+    const { t } = useTranslation('console');
+
     const [logs, setLogs] = useState([]);
     const consoleInput = useRef(null);
 
@@ -25,7 +28,7 @@ const Console = ({serverStatus}) => {
 
     return (
         <Panel
-            title="Console"
+            title={t('console')}
             content={
                 serverStatus.running
                     ? <>
@@ -44,7 +47,7 @@ const Console = ({serverStatus}) => {
                         />
                     </>
                     : <p className="text-red-light pt-4">
-                        The console is not available, because Factorio is not running.
+                        {t('consoleNotAvailable')}
                     </p>
             }
         />
diff --git a/ui/App/views/Controls.jsx b/ui/App/views/Controls.jsx
index 62b31d9e..44a46af2 100644
--- a/ui/App/views/Controls.jsx
+++ b/ui/App/views/Controls.jsx
@@ -1,4 +1,5 @@
 import React, {useEffect, useState} from "react";
+import { useTranslation } from 'react-i18next';
 import Panel from "../components/Panel";
 import Button from "../components/Button";
 import server from "../../api/resources/server";
@@ -10,7 +11,8 @@ import Error from "../components/Error";
 
 const Controls = ({serverStatus}) => {
 
-    const factorioVersion = serverStatus.fac_version ? serverStatus.fac_version : 'Unknown';
+    const { t } = useTranslation('controls');
+    const factorioVersion = serverStatus.fac_version ? serverStatus.fac_version : t('UNKNOWN');
     const [saves, setSaves] = useState([]);
     const [isDisabled, setIsDisabled] = useState(true);
     const [isStopping, setIsStopping] = useState(false);
@@ -48,48 +50,48 @@ const Controls = ({serverStatus}) => {
     return (
         <form onSubmit={handleSubmit(startServer)}>
         <Panel
-            title="Server Status"
+            title={t('serverStatus')}
             content={
                 <div className="lg:flex">
                     { serverStatus.running
                         ? <>
                             <div className="lg:w-1/5 mb-2">
-                                <div className="font-bold">Status</div>
-                                <div>{serverStatus.running ? 'Running' : 'Stopped'}</div>
+                                <div className="font-bold">{t('status')}</div>
+                                <div>{serverStatus.running ? t('RUNNING') : t('STOPPED')}</div>
                             </div>
                             <div className="lg:w-1/5 mb-2">
-                                <div className="font-bold">IP</div>
+                                <div className="font-bold">{t('ip')}</div>
                                 <div>{serverStatus.bindip}</div>
                             </div>
                             <div className="lg:w-1/5 mb-2">
-                                <div className="font-bold">Port</div>
+                                <div className="font-bold">{t('port')}</div>
                                 <div>{serverStatus.port}</div>
                             </div>
                             <div className="lg:w-1/5 mb-2">
-                                <div className="font-bold">Factorio Version</div>
+                                <div className="font-bold">{t('factorioVersion')}</div>
                                 <div>{factorioVersion}</div>
                             </div>
                             <div className="lg:w-1/5 mb-2">
-                                <div className="font-bold">Save</div>
+                                <div className="font-bold">{t('save')}</div>
                                 <div>{serverStatus.savefile}</div>
                             </div>
                         </>
                         : <>
                             <div className="lg:w-1/5 mb-2">
-                                <div className="font-bold">Status</div>
-                                <div>{serverStatus.running ? 'Running' : 'Stopped'}</div>
+                                <div className="font-bold">{t('status')}</div>
+                                <div>{serverStatus.running ? t('RUNNING') : t('STOPPED')}</div>
                             </div>
                             <div className="lg:w-1/5 mb-2 mr-0 lg:mr-4">
-                                <div className="font-bold">IP</div>
+                                <div className="font-bold">{t('ip')}</div>
                                 <Input
                                     defaultValue={"0.0.0.0"}
                                     disabled={isDisabled}
                                     register={register('ip',{required: true, pattern: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/})}
                                 />
-                                <Error error={errors.ip} message="IP is required and must be valid."/>
+                                <Error error={errors.ip} message={t('ipRequired')}/>
                             </div>
                             <div className="lg:w-1/5 mb-2 mr-0 lg:mr-4">
-                                <div className="font-bold">Port</div>
+                                <div className="font-bold">{t('port')}</div>
                                 <Input
                                     type="number"
                                     min={1}
@@ -98,14 +100,14 @@ const Controls = ({serverStatus}) => {
                                     disabled={isDisabled}
                                     register={register('port',{required: true, min: 1, max: 65535})}
                                 />
-                                <Error error={errors.port} message="Port is required within range 1-65535"/>
+                                <Error error={errors.port} message={t('portRequired')}/>
                             </div>
                             <div className="lg:w-1/5 mb-2 mr-0 lg:mr-4">
-                                <div className="font-bold">Factorio Version</div>
+                                <div className="font-bold">{t('factorioVersion')}</div>
                                 <div>{factorioVersion}</div>
                             </div>
                             <div className="lg:w-1/5 mb-2">
-                                <div className="font-bold">Save</div>
+                                <div className="font-bold">{t('save')}</div>
                                 <div className="relative">
                                     <Select
                                         register={register('save',{required: true})}
@@ -116,7 +118,7 @@ const Controls = ({serverStatus}) => {
                                             name: save.name
                                         }))}
                                     />
-                                    <Error error={errors.save} message="Save is required and must be valid."/>
+                                    <Error error={errors.save} message={t('saveRequired')}/>
                                 </div>
                             </div>
                         </>
@@ -127,10 +129,10 @@ const Controls = ({serverStatus}) => {
                 <div className="md:flex">
                     {serverStatus.running
                         ? <>
-                            <Button onClick={stopServer} isLoading={isStopping} isDisabled={isKilling} size="sm" className="w-full md:w-auto mb-2 md:mb-0 md:mr-2" type="default">Save & Stop Server</Button>
-                            <Button onClick={killServer} isLoading={isKilling} isDisabled={isStopping} size="sm" type="danger" className="w-full md:w-auto">Kill Server</Button>
+                            <Button onClick={stopServer} isLoading={isStopping} isDisabled={isKilling} size="sm" className="w-full md:w-auto mb-2 md:mb-0 md:mr-2" type="default">{t('saveStopServer')}</Button>
+                            <Button onClick={killServer} isLoading={isKilling} isDisabled={isStopping} size="sm" type="danger" className="w-full md:w-auto">{t('killServer')}</Button>
                         </>
-                        : <Button isSubmit={true} isDisabled={isDisabled} isLoading={isStarting} size="sm" type="success" className="w-full md:w-auto">Start Server</Button>
+                        : <Button isSubmit={true} isDisabled={isDisabled} isLoading={isStarting} size="sm" type="success" className="w-full md:w-auto">{t('startServer')}</Button>
                     }
                 </div>
             }
diff --git a/ui/App/views/GameSettings.jsx b/ui/App/views/GameSettings.jsx
index 1169c16c..536f17b4 100644
--- a/ui/App/views/GameSettings.jsx
+++ b/ui/App/views/GameSettings.jsx
@@ -1,9 +1,12 @@
 import Panel from "../components/Panel";
 import React, {useEffect, useState} from "react";
+import { useTranslation } from 'react-i18next';
 import settingsResource from "../../api/resources/settings";
 
 const GameSettings = () => {
 
+    const { t } = useTranslation('serverSettings');
+
     const [settingsCategories, setSettingsCategories] = useState();
 
     const fetchSettings = async () => {
@@ -18,7 +21,7 @@ const GameSettings = () => {
     return (
         <Panel
             className="mb-4"
-            title="Game Settings"
+            title={t('gameSettings')}
             content={
                 <>
                     {settingsCategories && Object.keys(settingsCategories).map(key => {
diff --git a/ui/App/views/Help.jsx b/ui/App/views/Help.jsx
index 8c36f44b..7fb64027 100644
--- a/ui/App/views/Help.jsx
+++ b/ui/App/views/Help.jsx
@@ -1,19 +1,21 @@
 import Panel from "../components/Panel";
 import React from "react";
+import { useTranslation } from 'react-i18next';
 
 const Help = () => {
+    const { t } = useTranslation('layout');
     return (
         <Panel
-            title="Help"
+            title={t('helpTitle')}
             content={
                 <>
-                    <h1 className="text-xl text-dirty-white">Factorio Server Manager</h1>
+                    <h1 className="text-xl text-dirty-white">{t('appTitle')}</h1>
                     <p className="mb-2">The Factorio Server Manager (FSM) is an open source project and is not affiliated to the game Factorio or Wube Software.</p>
 
-                    <h2 className="text-dirty-white">Bugs and Help</h2>
+                    <h2 className="text-dirty-white">{t('helpBugsAndHelp')}</h2>
                     <p className="mb-4">Please use the <a className="text-blue hover:text-blue-light" target="_blank" href="https://github.com/OpenFactorioServerManager/factorio-server-manager/issues">GitHub repository</a> to report bugs or seek for help.</p>
 
-                    <h1 className="mb-1 text-xl text-dirty-white">Helpful Resources</h1>
+                    <h1 className="mb-1 text-xl text-dirty-white">{t('helpResources')}</h1>
                     <p className="mb-2"><a className="text-blue hover:text-blue-light" target="_blank" href="https://wiki.factorio.com/Multiplayer">Official Factorio Wiki about Multiplayer</a></p>
                 </>
             }
diff --git a/ui/App/views/Login.jsx b/ui/App/views/Login.jsx
index d3450b9a..b9f3dfa5 100644
--- a/ui/App/views/Login.jsx
+++ b/ui/App/views/Login.jsx
@@ -1,4 +1,5 @@
 import React, {useEffect} from 'react';
+import { useTranslation } from 'react-i18next';
 import {useForm} from "react-hook-form";
 import user from "../../api/resources/user";
 import Button from "../components/Button";
@@ -10,6 +11,7 @@ import {Flash} from "../components/Flash";
 import Error from "../components/Error";
 
 const Login = ({handleLogin}) => {
+    const { t } = useTranslation('common');
     const {register, handleSubmit, formState: { errors }} = useForm();
     const navigate = useNavigate();
     const location = useLocation();
@@ -23,7 +25,7 @@ const Login = ({handleLogin}) => {
             }
         } catch (e) {
             console.log(e);
-            window.flash("Login failed. Username or Password wrong.", "red");
+            window.flash(t('loginFailed'), "red");
             throw e;
         }
     };
@@ -42,25 +44,25 @@ const Login = ({handleLogin}) => {
     return (
         <div className="h-screen overflow-hidden flex items-center justify-center bg-black">
             <Panel
-                title="Login"
+                title={t('signIn')}
                 content={
                     <form onSubmit={handleSubmit(onSubmit)}>
                         <div className="mb-4">
-                            <Label text="Username" htmlFor="username"/>
-                            <Input register={register('username', {required: true})} placeholder="Username"/>
-                            <Error error={errors.username} message="Username is required"/>
+                            <Label text={t('username')} htmlFor="username"/>
+                            <Input register={register('username', {required: true})} placeholder={t('username')}/>
+                            <Error error={errors.username} message={t('usernameRequired', { ns: 'userManagement' })}/>
                         </div>
                         <div className="mb-6">
-                            <Label text="Password" htmlFor="password"/>
+                            <Label text={t('password')} htmlFor="password"/>
                             <Input
                                 register={register('password',{required: true})}
                                 type="password"
                                 placeholder="******************"
                             />
-                            <Error error={errors.password} message="Password is required"/>
+                            <Error error={errors.password} message={t('passwordRequired', { ns: 'userManagement' })}/>
                         </div>
                         <div className="text-center">
-                            <Button type="success" className="w-full" isSubmit={true}>Sign In</Button>
+                            <Button type="success" className="w-full" isSubmit={true}>{t('signIn')}</Button>
                         </div>
                     </form>
                 }
diff --git a/ui/App/views/Logs.jsx b/ui/App/views/Logs.jsx
index e416402a..5ecd0022 100644
--- a/ui/App/views/Logs.jsx
+++ b/ui/App/views/Logs.jsx
@@ -1,9 +1,12 @@
 import React, {useEffect, useState} from "react";
+import { useTranslation } from 'react-i18next';
 import log from "../../api/resources/log";
 import Panel from "../components/Panel";
 
 const Logs = () => {
 
+    const { t } = useTranslation('logs');
+
     const [logs, setLogs] = useState([])
 
     useEffect(() => {
@@ -15,7 +18,7 @@ const Logs = () => {
 
     return (
         <Panel
-            title="Logs"
+            title={t('logs')}
             content={
                 <ul>
                     {logs.map((log,index) => (<li key={index}>{log}</li>))}
diff --git a/ui/App/views/Mods/Mods.jsx b/ui/App/views/Mods/Mods.jsx
index 6376ae0a..23158e6e 100644
--- a/ui/App/views/Mods/Mods.jsx
+++ b/ui/App/views/Mods/Mods.jsx
@@ -1,5 +1,6 @@
 import Panel from "../../components/Panel";
 import React, {useEffect, useState} from "react";
+import { useTranslation } from 'react-i18next';
 import modsResource from "../../../api/resources/mods";
 import Button from "../../components/Button";
 import server from "../../../api/resources/server";
@@ -15,6 +16,8 @@ import ModList from "./components/ModList";
 
 const Mods = ({serverStatus}) => {
 
+    const { t } = useTranslation('mods');
+
     const [installedMods, setInstalledMods] = useState([]);
     const [modPacks, setModPacks] = useState([])
     const [factorioVersion, setFactorioVersion] = useState(null);
@@ -110,26 +113,26 @@ const Mods = ({serverStatus}) => {
             {disabled ?
                 <Panel className="mb-6"
                        content={
-                           <div className="text-red font-bold text-xl">
-                               Changing mods is disabled while the server is running!
-                           </div>
+                            <div className="text-red font-bold text-xl">
+                                {t('changingModsDisabled')}
+                            </div>
                        }
                 />
                 :
                 <TabControl>
-                    <Tab title="Install Mod">
+                    <Tab title={t('installMod')}>
                         <AddMod refetchInstalledMods={fetchInstalledMods} fuse={fuse}/>
                     </Tab>
-                    <Tab title="Upload Mod">
+                    <Tab title={t('uploadMod')}>
                         <UploadMod refetchInstalledMods={fetchInstalledMods}/>
                     </Tab>
-                    <Tab title="Load Mods from Save">
+                    <Tab title={t('loadModsFromSave')}>
                         <LoadMods refreshMods={fetchInstalledMods}/>
                     </Tab>
                 </TabControl>
             }
             <Panel
-                title="Mods"
+                title={t('mods')}
                 className="mb-6"
                 content={
                     <ModList addUpdatableMod={addUpdatableMod}
@@ -146,18 +149,18 @@ const Mods = ({serverStatus}) => {
                         {
                             !disabled &&
                             <Button size="sm" className="mr-2" type="danger" isLoading={isDeletingAllMods}
-                                    onClick={deleteAllMods}>Delete all Mods</Button> &&
+                                    onClick={deleteAllMods}>{t('deleteAllMods')}</Button> &&
                             <Button size="sm" className="mr-2" isLoading={isUpdatingAllMods}
-                                    onClick={updateAllMods}>Update all Mods</Button>
+                                    onClick={updateAllMods}>{t('updateAllMods')}</Button>
                         }
                         <a className="bg-gray-light py-1 px-2 hover:glow-orange hover:bg-orange inline-block accentuated text-black font-bold"
-                           href={modsResource.downloadAllURL}>Download all Mods</a>
+                           href={modsResource.downloadAllURL}>{t('downloadAllMods')}</a>
                     </>
                 }
             />
 
             <Panel
-                title="Mod packs"
+                title={t('modPacks')}
                 className="mb-6"
                 content={
                     modPacks.map(
diff --git a/ui/App/views/Mods/components/AddMod/components/AddModForm.jsx b/ui/App/views/Mods/components/AddMod/components/AddModForm.jsx
index c5a75f2d..3b93a35e 100644
--- a/ui/App/views/Mods/components/AddMod/components/AddModForm.jsx
+++ b/ui/App/views/Mods/components/AddMod/components/AddModForm.jsx
@@ -1,4 +1,5 @@
 import React, {useEffect, useState} from "react";
+import { useTranslation } from 'react-i18next';
 import modsResource from "../../../../../../api/resources/mods";
 import Button from "../../../../../components/Button";
 import Label from "../../../../../components/Label";
@@ -10,12 +11,13 @@ import {faSpinner} from "@fortawesome/free-solid-svg-icons";
 import SelectVersionForm from "./SelectVersionForm";
 
 const LinkModPortal = () => {
-    return <a href="https://mods.factorio.com" target="_blank" className="px-2 text-blue hover:text-blue-light">Mod
-        Portal <FontAwesomeIcon icon={faExternalLinkAlt}/></a>
+    const { t } = useTranslation('mods');
+    return <a href="https://mods.factorio.com" target="_blank" className="px-2 text-blue hover:text-blue-light">{t('modPortal')} <FontAwesomeIcon icon={faExternalLinkAlt}/></a>
 }
 
 const AddModForm = ({setIsFactorioAuthenticated, fuse, refetchInstalledMods}) => {
 
+    const { t } = useTranslation('mods');
     const {register, watch, setValue, handleSubmit} = useForm();
     const [suggestedMods, setSuggestedMods] = useState([]);
     const [selectedMod, setSelectedMod] = useState(null);
@@ -101,11 +103,11 @@ const AddModForm = ({setIsFactorioAuthenticated, fuse, refetchInstalledMods}) =>
         <form onSubmit={handleSubmit(openSelectVersionModal)}>
             <SelectVersionForm isOpen={isModalOpen} releases={releases} install={install} close={() => setIsModalOpen(false)}/>
             <div className="mb-4 relative" >
-                <Label text="Mod" htmlFor="mod"/>
+                <Label text={t('mods')} htmlFor="mod"/>
                 { typeof fuse !== "undefined"
                     ? <Input register={register('mod',{required: true})} hasAutoComplete={false} onKeyDown={handleKeyDown}/>
                     : <div className="border border-gray-medium w-full py-2 px-3 text-white">
-                        <FontAwesomeIcon icon={faSpinner} spin={true}/> Loading List of Mods from <LinkModPortal/>
+                        <FontAwesomeIcon icon={faSpinner} spin={true}/> {t('loadingModList')} <LinkModPortal/>
                     </div>
                 }
                 {suggestedMods.length > 0 &&
@@ -114,8 +116,8 @@ const AddModForm = ({setIsFactorioAuthenticated, fuse, refetchInstalledMods}) =>
                     </ul>
                 }
             </div>
-            <Button isDisabled={selectedMod === null} isSubmit={true} onClick={() => setIsModalOpen(true)} className="mr-2">Install</Button>
-            <Button onClick={logout} type="danger" className="mr-2">Logout</Button>
+            <Button isDisabled={selectedMod === null} isSubmit={true} onClick={() => setIsModalOpen(true)} className="mr-2">{t('install')}</Button>
+            <Button onClick={logout} type="danger" className="mr-2">{t('logout', { ns: 'common' })}</Button>
             <LinkModPortal/>
         </form>
     )
diff --git a/ui/App/views/Mods/components/AddMod/components/SelectVersionForm.jsx b/ui/App/views/Mods/components/AddMod/components/SelectVersionForm.jsx
index dd2815f9..2569b7a1 100644
--- a/ui/App/views/Mods/components/AddMod/components/SelectVersionForm.jsx
+++ b/ui/App/views/Mods/components/AddMod/components/SelectVersionForm.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from 'react-i18next';
 import Modal from "../../../../../components/Modal";
 import Button from "../../../../../components/Button";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
@@ -8,6 +9,8 @@ import {faTimes} from "@fortawesome/free-solid-svg-icons/faTimes";
 
 const SelectVersionForm = ({releases, isOpen, close, install}) => {
 
+    const { t } = useTranslation(['mods', 'common']);
+
     const download = release => {
         install(release)
         close()
@@ -16,15 +19,15 @@ const SelectVersionForm = ({releases, isOpen, close, install}) => {
     return (
         <Modal
             isOpen={isOpen}
-            title="Select Version"
+            title={t('selectVersion', { ns: 'mods' })}
             content={
                 <div className="h-64 overflow-y-auto">
                     <table className="w-full">
                         <thead>
                         <tr className="text-left py-1">
-                            <th>Version</th>
-                            <th>Compatibility</th>
-                            <th>Actions</th>
+                            <th>{t('version', { ns: 'mods' })}</th>
+                            <th>{t('compatibility', { ns: 'mods' })}</th>
+                            <th>{t('actions', { ns: 'common' })}</th>
                         </tr>
                         </thead>
                         <tbody>
@@ -45,7 +48,7 @@ const SelectVersionForm = ({releases, isOpen, close, install}) => {
                 </div>
             }
             actions={
-                <Button onClick={close} size="sm" type="danger">Cancel</Button>
+                <Button onClick={close} size="sm" type="danger">{t('cancel', { ns: 'common' })}</Button>
             }
         />
     )
diff --git a/ui/App/views/Mods/components/CreateModPack.jsx b/ui/App/views/Mods/components/CreateModPack.jsx
index 94262200..5323ba49 100644
--- a/ui/App/views/Mods/components/CreateModPack.jsx
+++ b/ui/App/views/Mods/components/CreateModPack.jsx
@@ -1,4 +1,5 @@
 import React, {useState} from "react";
+import { useTranslation } from 'react-i18next';
 import Button from "../../../components/Button";
 import Modal from "../../../components/Modal";
 import Label from "../../../components/Label";
@@ -8,6 +9,8 @@ import modsResource from "../../../../api/resources/mods";
 
 const CreateModPack = ({onSuccess}) => {
 
+    const { t } = useTranslation(['mods', 'common']);
+
     const [isCreating, setIsCreating] = useState(false);
     const [isOpen, setIsOpen] = useState(false);
 
@@ -26,18 +29,18 @@ const CreateModPack = ({onSuccess}) => {
     }
 
     return <>
-        <Button size="sm" onClick={() => setIsOpen(true)}>Add ModPack with current installed Mods</Button>
-        <Modal title="Create Mod Pack" isOpen={isOpen} content={
+        <Button size="sm" onClick={() => setIsOpen(true)}>{t('createModPack')}</Button>
+        <Modal title={t('createModPack')} isOpen={isOpen} content={
             <form onSubmit={handleSubmit(createModPack)}>
                 <div className="mb-4">
-                    <Label text="Name" htmlFor="name"/>
+                    <Label text={t('name', { ns: 'common' })} htmlFor="name"/>
                     <Input register={register('name',{required: true})}/>
                 </div>
-                <Button size="sm" isLoading={isCreating} isSubmit={true}>Create</Button>
+                <Button size="sm" isLoading={isCreating} isSubmit={true}>{t('create', { ns: 'common' })}</Button>
             </form>
         }
         actions={
-            <Button onClick={() => setIsOpen(false)} size="sm" type="danger">Cancel</Button>
+            <Button onClick={() => setIsOpen(false)} size="sm" type="danger">{t('cancel', { ns: 'common' })}</Button>
         }
         />
     </>
diff --git a/ui/App/views/Mods/components/LoadMods.jsx b/ui/App/views/Mods/components/LoadMods.jsx
index 331c3527..06609467 100644
--- a/ui/App/views/Mods/components/LoadMods.jsx
+++ b/ui/App/views/Mods/components/LoadMods.jsx
@@ -1,4 +1,5 @@
 import React, {useEffect, useState} from "react";
+import { useTranslation } from 'react-i18next';
 import savesResource from "../../../../api/resources/saves";
 import Select from "../../../components/Select";
 import Label from "../../../components/Label";
@@ -11,6 +12,8 @@ import ConfirmDialog from "../../../components/ConfirmDialog";
 
 const LoadMods = ({refreshMods}) => {
 
+    const { t } = useTranslation(['mods', 'common']);
+
     const [saves, setSaves] = useState([]);
     const {register, reset, handleSubmit} = useForm();
     const [isLoading, setIsLoading] = useState(false);
@@ -46,7 +49,7 @@ const LoadMods = ({refreshMods}) => {
         await modResource.portal.installMultiple(mods)
             .then(() => {
                 refreshMods();
-                window.flash(`Mods are loaded from save file ${data.save}.`, "green");
+                window.flash(t('modsLoaded').replace('{save}', data.save), "green");
             }).finally(() => {
                 setIsLoading(false);
                 setLoadModsData(undefined);
@@ -55,7 +58,7 @@ const LoadMods = ({refreshMods}) => {
 
     return isFactorioAuthenticated
         ? <form onSubmit={handleSubmit(loadModsRequested)}>
-            <Label text="Save" htmlFor="save"/>
+            <Label text={t('save', { ns: 'common' })} htmlFor="save"/>
             <Select
                 register={register('save')}
                 className="mb-4"
@@ -65,10 +68,10 @@ const LoadMods = ({refreshMods}) => {
                     value: save.name
                 }))}
             />
-            <Button isSubmit={true} isDisabled={isDisabled} isLoading={isLoading}>Load</Button>
+            <Button isSubmit={true} isDisabled={isDisabled} isLoading={isLoading}>{t('loadMods')}</Button>
             <ConfirmDialog
-                title="Load Mods from Save"
-                content={`Loading the Mods from Save "${loadModsData?.save}" will remove all currently installed Mods.`}
+                title={t('loadModsTitle')}
+                content={t('deleteExistingMods')}
                 isOpen={loadModsData !== undefined}
                 close={() => {
                     setIsLoading(false);
diff --git a/ui/App/views/Mods/components/ModList.jsx b/ui/App/views/Mods/components/ModList.jsx
index 1cb67270..7c9c1881 100644
--- a/ui/App/views/Mods/components/ModList.jsx
+++ b/ui/App/views/Mods/components/ModList.jsx
@@ -1,18 +1,20 @@
 import Mod from "./Mod";
 import React from "react";
-
+import { useTranslation } from 'react-i18next';
 
 const ModList = ({mods, factorioVersion, updateMod, toggleMod, deleteMod, addUpdatableMod = null, disabled = false}) => {
 
+    const { t } = useTranslation('mods');
+
     return (
         <table className="w-full">
             <thead>
             <tr className="text-left py-1">
-                <th>Name</th>
-                <th>Enabled</th>
-                <th>Compatibility</th>
-                <th>Mod Version</th>
-                <th>Factorio Version</th>
+                <th>{t('name', { ns: 'common' })}</th>
+                <th>{t('enabled', { ns: 'common' })}</th>
+                <th>{t('compatibility')}</th>
+                <th>{t('modVersion')}</th>
+                <th>{t('factorioVersion')}</th>
                 <th/>
             </tr>
             </thead>
diff --git a/ui/App/views/Mods/components/ModPack.jsx b/ui/App/views/Mods/components/ModPack.jsx
index 1b8bca0a..254f8268 100644
--- a/ui/App/views/Mods/components/ModPack.jsx
+++ b/ui/App/views/Mods/components/ModPack.jsx
@@ -1,4 +1,5 @@
 import React, {useState} from "react";
+import { useTranslation } from 'react-i18next';
 import {faSpinner, faTrashAlt, faUpload} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import modsResource from "../../../../api/resources/mods";
@@ -7,6 +8,8 @@ import ConfirmDialog from "../../../components/ConfirmDialog";
 
 const ModPack = ({modPack, reloadModPacks, factorioVersion, reloadMods, disabled = false}) => {
 
+    const { t } = useTranslation('mods');
+
     const [isLoading, setIsLoading] = useState(false);
     const [isLoadModPackDialogOpen, setIsLoadModPackDialogOpen] = useState(false);
 
@@ -63,8 +66,8 @@ const ModPack = ({modPack, reloadModPacks, factorioVersion, reloadMods, disabled
                                              icon={isLoading ? faSpinner : faUpload}
                             />
                             <ConfirmDialog
-                                title="Load ModPack"
-                                content={`Loading the ModPack ${modPack.name} will remove all installed Mods.`}
+                                title={t('loadModsTitle')}
+                                content={t('deleteExistingMods')}
                                 isOpen={isLoadModPackDialogOpen}
                                 close={() => setIsLoadModPackDialogOpen(false)}
                                 onSuccess={() => loadModPack(modPack.name)}
diff --git a/ui/App/views/Mods/components/UploadMod.jsx b/ui/App/views/Mods/components/UploadMod.jsx
index f1083508..c31661db 100644
--- a/ui/App/views/Mods/components/UploadMod.jsx
+++ b/ui/App/views/Mods/components/UploadMod.jsx
@@ -1,4 +1,5 @@
 import React, {useState} from "react";
+import { useTranslation } from 'react-i18next';
 import Button from "../../../components/Button";
 import Label from "../../../components/Label";
 import {useForm} from "react-hook-form";
@@ -6,7 +7,8 @@ import modsResource from "../../../../api/resources/mods";
 
 const UploadMod = ({refetchInstalledMods}) => {
 
-    const defaultFileName = 'Select File ...'
+    const { t } = useTranslation('mods');
+    const defaultFileName = t('selectModFile')
     const [fileName, setFileName] = useState(defaultFileName);
     const {register, handleSubmit} = useForm();
     const [isUploading, setIsUploading] = useState(false);
@@ -24,7 +26,7 @@ const UploadMod = ({refetchInstalledMods}) => {
 
     return (
         <form onSubmit={handleSubmit(onSubmit)}>
-            <Label text="Save" htmlFor="mod_file"/>
+            <Label text={t('save', { ns: 'common' })} htmlFor="mod_file"/>
             <div className="relative bg-white shadow text-black h-full w-full mb-4">
                 <input
                     {...register('mod_file')}
@@ -36,7 +38,7 @@ const UploadMod = ({refetchInstalledMods}) => {
                 />
                 <div className="px-2 py-2">{fileName}</div>
             </div>
-            <Button isLoading={isUploading} isSubmit={true}>Upload</Button>
+            <Button isLoading={isUploading} isSubmit={true}>{t('upload', { ns: 'common' })}</Button>
         </form>
     )
 }
diff --git a/ui/App/views/Saves/Saves.jsx b/ui/App/views/Saves/Saves.jsx
index fa8adeb1..b5205904 100644
--- a/ui/App/views/Saves/Saves.jsx
+++ b/ui/App/views/Saves/Saves.jsx
@@ -1,4 +1,5 @@
 import React, {useEffect, useState} from "react";
+import { useTranslation } from 'react-i18next';
 import savesResource from "../../../api/resources/saves";
 import Panel from "../../components/Panel";
 import CreateSaveForm from "./components/CreateSaveForm";
@@ -8,6 +9,8 @@ import {faDownload, faTrashAlt} from "@fortawesome/free-solid-svg-icons";
 
 const Saves = ({serverStatus}) => {
 
+    const { t } = useTranslation('saves');
+
     const [saves, setSaves] = useState([]);
 
     const updateList = () => {
@@ -35,19 +38,18 @@ const Saves = ({serverStatus}) => {
         <>
             <div className="lg:flex mb-6">
                 <Panel
-                    title="Create Save"
+                    title={t('createSave')}
                     className="lg:w-1/2 lg:mr-3 mb-6 lg:mb-0"
                     content={
                         serverStatus.running
                             ? <p className="text-red-light pt-4 pb-24">
-                                Create a new Save is only possible if the Factorio server is
-                                not running.
+                                {t('createSaveDisabled')}
                             </p>
                             : <CreateSaveForm onSuccess={updateList}/>
                     }
                 />
                 <Panel
-                    title="Upload Save"
+                    title={t('uploadSave')}
                     className="lg:w-1/2 lg:ml-3"
                     content={<UploadSaveForm onSuccess={updateList}/>}
                 />
@@ -55,16 +57,16 @@ const Saves = ({serverStatus}) => {
 
             <Panel
                 className="mb-4"
-                title="Saves"
+                title={t('saves')}
                 content={
                     <div className="overflow-x-auto w-full">
                         <table className="w-full">
                             <thead>
                             <tr className="text-left py-1">
-                                <th>Name</th>
-                                <th>Last Modified At</th>
-                                <th>Size</th>
-                                <th>Actions</th>
+                                <th>{t('name', { ns: 'common' })}</th>
+                                <th>{t('lastModifiedAt', { ns: 'common' })}</th>
+                                <th>{t('size', { ns: 'common' })}</th>
+                                <th>{t('actions', { ns: 'common' })}</th>
                             </tr>
                             </thead>
                             <tbody>
diff --git a/ui/App/views/Saves/components/CreateSaveForm.jsx b/ui/App/views/Saves/components/CreateSaveForm.jsx
index 10b75fb9..e550fdc3 100644
--- a/ui/App/views/Saves/components/CreateSaveForm.jsx
+++ b/ui/App/views/Saves/components/CreateSaveForm.jsx
@@ -1,4 +1,5 @@
 import {useForm} from "react-hook-form";
+import { useTranslation } from 'react-i18next';
 import Button from "../../../components/Button";
 import React, {useState} from "react";
 import saves from "../../../../api/resources/saves";
@@ -7,6 +8,7 @@ import Input from "../../../components/Input";
 import Error from "../../../components/Error";
 
 const CreateSaveForm = ({onSuccess}) => {
+    const { t } = useTranslation('saves');
     const {register, handleSubmit, formState: {errors}} = useForm();
     const [isLoading, setIsLoading] = useState(false);
 
@@ -23,11 +25,11 @@ const CreateSaveForm = ({onSuccess}) => {
     return (
         <form onSubmit={handleSubmit(onSubmit)}>
             <div className="mb-6">
-                <Label text="Savefile Name" htmlFor="savefile"/>
+                <Label text={t('savefileName')} htmlFor="savefile"/>
                 <Input register={register('savefile', {required: true})}/>
-                <Error error={errors.savefile} message="Savefile Name is required"/>
+                <Error error={errors.savefile} message={t('saveNameRequired')}/>
             </div>
-            <Button type="success" isLoading={isLoading} isSubmit={true}>Create Save</Button>
+            <Button type="success" isLoading={isLoading} isSubmit={true}>{t('createSave')}</Button>
         </form>
     )
 }
diff --git a/ui/App/views/Saves/components/UploadSaveForm.jsx b/ui/App/views/Saves/components/UploadSaveForm.jsx
index 1db27160..a2fd8f3e 100644
--- a/ui/App/views/Saves/components/UploadSaveForm.jsx
+++ b/ui/App/views/Saves/components/UploadSaveForm.jsx
@@ -1,13 +1,15 @@
 import Button from "../../../components/Button";
 import React, {useState} from "react";
+import { useTranslation } from 'react-i18next';
 import {useForm} from "react-hook-form";
 import saves from "../../../../api/resources/saves";
 import Error from "../../../components/Error";
 
 
 const UploadSaveForm = ({onSuccess}) => {
+    const { t } = useTranslation('saves');
     const {register, handleSubmit, formState: {errors}} = useForm();
-    const [fileName, setFileName] = useState('Select File ...');
+    const [fileName, setFileName] = useState(t('selectFile'));
 
     const onSubmit = (data, e) => {
         saves.upload(data.savefile[0]).then(_ => {
@@ -20,7 +22,7 @@ const UploadSaveForm = ({onSuccess}) => {
         <form onSubmit={handleSubmit(onSubmit)}>
             <div className="mb-6">
                 <label className="block text-white text-sm font-bold mb-2" htmlFor="password">
-                    Save File
+                    {t('saveFile')}
                 </label>
                 <div className="relative bg-white shadow text-black w-full">
                     <input
@@ -30,9 +32,9 @@ const UploadSaveForm = ({onSuccess}) => {
                         type="file"/>
                     <div className="px-2 py-3">{fileName}</div>
                 </div>
-                <Error error={errors.savefile} message="Savefile is required"/>
+                <Error error={errors.savefile} message={t('saveNameRequired')}/>
             </div>
-            <Button type="success" isSubmit={true}>Upload</Button>
+            <Button type="success" isSubmit={true}>{t('upload', { ns: 'common' })}</Button>
         </form>
     )
 }
diff --git a/ui/App/views/ServerSettings.jsx b/ui/App/views/ServerSettings.jsx
index 754feef8..a4aad960 100644
--- a/ui/App/views/ServerSettings.jsx
+++ b/ui/App/views/ServerSettings.jsx
@@ -1,5 +1,6 @@
 import Panel from "../components/Panel";
 import React, {useEffect, useState} from "react";
+import { useTranslation } from 'react-i18next';
 import settingsResource from "../../api/resources/settings";
 import Input from "../components/Input";
 import Label from "../components/Label";
@@ -10,6 +11,7 @@ import {useForm} from "react-hook-form";
 
 const ServerSettings = () => {
 
+    const { t } = useTranslation('serverSettings');
     const [settings, setSettings] = useState();
     const [numberInputs, setNumberInputs] = useState([]);
 
@@ -36,7 +38,7 @@ const ServerSettings = () => {
        settingsResource.server.update(data)
            .then(() => {
                fetchSettings()
-                   .then(() => window.flash("Settings saved.", "green"))
+                   .then(() => window.flash(t('settingsSaved'), "green"))
            });
     }
 
@@ -124,7 +126,7 @@ const ServerSettings = () => {
     return (
         <form className="mb-4" onSubmit={handleSubmit(saveServerSettings)}>
             <Panel
-                title="Server Settings"
+                title={t('serverSettings')}
                 content={
                     <>
                         {settings && Object.keys(settings).map(key => {
@@ -150,7 +152,7 @@ const ServerSettings = () => {
                     </>
                 }
                 actions={
-                    <Button isSubmit={true} type="success">Save</Button>
+                    <Button isSubmit={true} type="success">{t('saveSettings')}</Button>
                 }
             />
         </form>
diff --git a/ui/App/views/UserManagement/UserManagment.jsx b/ui/App/views/UserManagement/UserManagment.jsx
index 34829e52..5f132abb 100644
--- a/ui/App/views/UserManagement/UserManagment.jsx
+++ b/ui/App/views/UserManagement/UserManagment.jsx
@@ -1,5 +1,6 @@
 import Panel from "../../components/Panel";
 import React, {useCallback, useEffect, useState} from "react";
+import { useTranslation } from 'react-i18next';
 import user from "../../../api/resources/user";
 import CreateUserForm from "./components/CreateUserForm";
 import ChangePasswordForm from "./components/ChangePasswordForm"
@@ -8,6 +9,8 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 const UserManagement = () => {
 
+    const { t } = useTranslation('userManagement');
+
     const [users, setUsers] = useState([]);
 
     const updateList = useCallback(async () => {
@@ -29,15 +32,15 @@ const UserManagement = () => {
     return (
         <>
             <Panel
-                title="List of Users"
+                title={t('listOfUsers')}
                 content={
                     <table className="w-full">
                         <thead>
                         <tr className="text-left py-1">
-                            <th>Name</th>
-                            <th>Role</th>
-                            <th>Email</th>
-                            <th>Actions</th>
+                            <th>{t('name', { ns: 'common' })}</th>
+                            <th>{t('role', { ns: 'common' })}</th>
+                            <th>{t('email', { ns: 'common' })}</th>
+                            <th>{t('actions', { ns: 'common' })}</th>
                         </tr>
                         </thead>
                         <tbody>
@@ -57,12 +60,12 @@ const UserManagement = () => {
                 className="mb-4"
             />
             <Panel
-                title="Change Password"
+                title={t('changePassword')}
                 content={<ChangePasswordForm/>}
                 className="mb-4"
             />
             <Panel
-                title="Create User"
+                title={t('createUser')}
                 content={<CreateUserForm updateUserList={updateList}/>}
                 className="mb-4"
             />
diff --git a/ui/App/views/UserManagement/components/ChangePasswordForm.jsx b/ui/App/views/UserManagement/components/ChangePasswordForm.jsx
index ca00c4d5..e7306fe1 100644
--- a/ui/App/views/UserManagement/components/ChangePasswordForm.jsx
+++ b/ui/App/views/UserManagement/components/ChangePasswordForm.jsx
@@ -1,5 +1,6 @@
 import {useForm} from "react-hook-form";
 import React from "react";
+import { useTranslation } from 'react-i18next';
 import user from "../../../../api/resources/user";
 import Button from "../../../components/Button";
 import Label from "../../../components/Label";
@@ -7,6 +8,7 @@ import Input from "../../../components/Input";
 import Error from "../../../components/Error";
 
 const ChangePasswordForm = () => {
+    const { t } = useTranslation('userManagement');
     const {register, handleSubmit, reset, formState: {errors}, watch} = useForm();
 
     const new_password = watch("new_password");
@@ -15,7 +17,7 @@ const ChangePasswordForm = () => {
         const res = await user.changePassword(data);
         if (res) {
             // Update successful
-            window.flash("Password changed", "green")
+            window.flash(t('passwordChanged'), "green")
             reset();
         }
     }
@@ -23,30 +25,30 @@ const ChangePasswordForm = () => {
     return (
         <form onSubmit={handleSubmit(onSubmit)}>
             <div className="mb-4">
-                <Label htmlFor="old_password" text="Old Password"/>
+                <Label htmlFor="old_password" text={t('oldPassword')}/>
                 <Input register={register('old_password',{required: true})}
                        type="password"
-                       placeholder="Old Password"
+                       placeholder={t('oldPassword')}
                 />
-                <Error error={errors.old_password} message="Old Password is required"/>
+                <Error error={errors.old_password} message={t('passwordRequired')}/>
             </div>
             <div className="mb-4">
-                <Label htmlFor="new_password" text="New Password"/>
+                <Label htmlFor="new_password" text={t('newPassword')}/>
                 <Input register={register('new_password',{required: true})}
                        type="password"
-                       placeholder="New Password"
+                       placeholder={t('newPassword')}
                 />
-                <Error error={errors.new_password} message="New Password is required"/>
+                <Error error={errors.new_password} message={t('passwordRequired')}/>
             </div>
             <div className="mb-4">
-                <Label htmlFor="new_password_confirmation" text="New Password Confirmation"/>
+                <Label htmlFor="new_password_confirmation" text={t('newPasswordConfirmation')}/>
                 <Input register={register('new_password_confirmation',{required: true, validate: value => value === new_password})}
                        type="password"
-                       placeholder="New Password"
+                       placeholder={t('newPasswordConfirmation')}
                 />
-                <Error error={errors.new_password_confirmation} message="New Password Confirmation is required"/>
+                <Error error={errors.new_password_confirmation} message={t('passwordMismatch')}/>
             </div>
-            <Button isSubmit={true} type="success">Change</Button>
+            <Button isSubmit={true} type="success">{t('change')}</Button>
         </form>
     )
 }
diff --git a/ui/App/views/UserManagement/components/CreateUserForm.jsx b/ui/App/views/UserManagement/components/CreateUserForm.jsx
index ce3fb369..9e9f27d6 100644
--- a/ui/App/views/UserManagement/components/CreateUserForm.jsx
+++ b/ui/App/views/UserManagement/components/CreateUserForm.jsx
@@ -1,5 +1,6 @@
 import {useForm} from "react-hook-form";
 import React from "react";
+import { useTranslation } from 'react-i18next';
 import user from "../../../../api/resources/user";
 import Button from "../../../components/Button";
 import Label from "../../../components/Label";
@@ -7,6 +8,7 @@ import Input from "../../../components/Input";
 import Error from "../../../components/Error";
 
 const CreateUserForm = ({updateUserList}) => {
+    const { t } = useTranslation('userManagement');
     const roleValue = "admin";
 
     const {
@@ -31,52 +33,52 @@ const CreateUserForm = ({updateUserList}) => {
     return (
         <form onSubmit={handleSubmit(onSubmit)}>
             <div className="mb-4">
-                <Label htmlFor="username" text="Username"/>
+                <Label htmlFor="username" text={t('username', { ns: 'common' })}/>
                 <Input register={register('username', {required: true})}
                        type="text"
-                       placeholder="Username"
+                       placeholder={t('username', { ns: 'common' })}
                 />
-                <Error error={errors.username} message="Username is required"/>
+                <Error error={errors.username} message={t('usernameRequired')}/>
             </div>
             <div className="mb-4">
-                <Label htmlFor="role" text="Role"/>
+                <Label htmlFor="role" text={t('role', { ns: 'common' })}/>
                 <Input register={register('role', {required: true})}
                        value={roleValue}
                        disabled={true}
-                       placeholder="Role"
+                       placeholder={t('role', { ns: 'common' })}
                 />
-                <Error error={errors.role} message="Role is required"/>
+                <Error error={errors.role} message={t('roleRequired')}/>
             </div>
             <div className="mb-4">
-                <Label htmlFor="email" text="Email"/>
+                <Label htmlFor="email" text={t('email', { ns: 'common' })}/>
                 <Input register={register('email', {required: true})}
                        type="email"
-                       placeholder="Email"
+                       placeholder={t('email', { ns: 'common' })}
                 />
-                <Error error={errors.email} message="Email is required"/>
+                <Error error={errors.email} message={t('emailRequired')}/>
             </div>
             <div className="mb-4">
-                <Label htmlFor="password" text="Password"/>
+                <Label htmlFor="password" text={t('password', { ns: 'common' })}/>
                 <Input register={register('password', {required: true})}
                        type="password"
-                       placeholder="Password"
+                       placeholder={t('password', { ns: 'common' })}
                 />
-                <Error error={errors.password} message="Password is required"/>
+                <Error error={errors.password} message={t('passwordRequired')}/>
             </div>
             <div className="mb-4">
-                <Label htmlFor="password_confirmation" text="Password Confirmation"/>
+                <Label htmlFor="password_confirmation" text={t('passwordConfirmation')}/>
                 <Input register={register('password_confirmation', {
                             required: true,
                             validate: conformation => conformation === password
                         })}
 
                        type="password"
-                       placeholder="Password Confirmation"
+                       placeholder={t('passwordConfirmation')}
                 />
                 <Error error={errors.password_confirmation}
-                       message="Password Confirmation is required and must match the Password"/>
+                       message={t('passwordMismatch')}/>
             </div>
-            <Button isSubmit={true} type="success">Save</Button>
+            <Button isSubmit={true} type="success">{t('save', { ns: 'common' })}</Button>
         </form>
     )
 }
diff --git a/ui/locales/en/mods.json b/ui/locales/en/mods.json
index 6c8e3904..88ac9683 100644
--- a/ui/locales/en/mods.json
+++ b/ui/locales/en/mods.json
@@ -28,5 +28,8 @@
   "loadModsTitle": "Load Mods from Save",
   "selectSave": "Select a save file",
   "modsLoaded": "Mods loaded from save.",
-  "deleteExistingMods": "Delete all existing mods before loading? Existing mods will be permanently removed."
+  "deleteExistingMods": "Delete all existing mods before loading? Existing mods will be permanently removed.",
+  "compatibility": "Compatibility",
+  "modVersion": "Mod Version",
+  "factorioVersion": "Factorio Version"
 }
diff --git a/ui/locales/zh-CN/mods.json b/ui/locales/zh-CN/mods.json
index 833e7cd3..30aaef2c 100644
--- a/ui/locales/zh-CN/mods.json
+++ b/ui/locales/zh-CN/mods.json
@@ -28,5 +28,8 @@
   "loadModsTitle": "从存档加载模组",
   "selectSave": "选择一个存档文件",
   "modsLoaded": "已从存档加载模组。",
-  "deleteExistingMods": "加载前删除所有现有模组？现有模组将被永久移除。"
+  "deleteExistingMods": "加载前删除所有现有模组？现有模组将被永久移除。",
+  "compatibility": "兼容性",
+  "modVersion": "模组版本",
+  "factorioVersion": "Factorio 版本"
 }

From 30f789045c64f893bc0e3291812192d540fc95b6 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 04:30:44 +0000
Subject: [PATCH 07/38] =?UTF-8?q?=E6=96=87=E6=A1=A3:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=96=B0=E8=AF=AD=E8=A8=80=E9=80=82=E9=85=8D=E6=8C=87=E5=8D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/add-language-guide.md | 143 +++++++++++++++++++++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 docs/add-language-guide.md

diff --git a/docs/add-language-guide.md b/docs/add-language-guide.md
new file mode 100644
index 00000000..05a54021
--- /dev/null
+++ b/docs/add-language-guide.md
@@ -0,0 +1,143 @@
+# 添加新语言指南
+
+FSM 前端基于 `react-i18next`，添加新语言只需创建翻译文件并注册即可。
+
+## 快速上手（以日语 ja 为例）
+
+### 第 1 步：创建翻译文件
+
+```bash
+mkdir -p ui/locales/ja
+```
+
+复制英文文件作为模板：
+
+```bash
+cp ui/locales/en/*.json ui/locales/ja/
+```
+
+### 第 2 步：翻译
+
+逐个编辑 `ui/locales/ja/` 下的 9 个 JSON 文件，**只改 value，不改 key**。
+
+| 文件 | 示例 key | 英文 | 日文翻译 |
+|---|---|---|---|
+| `common.json` | `save` | Save | 保存 |
+| `common.json` | `cancel` | Cancel | キャンセル |
+| `common.json` | `confirm` | Confirm | 確認 |
+| `controls.json` | `startServer` | Start Server | サーバー起動 |
+| `controls.json` | `RUNNING` | Running | 実行中 |
+| `layout.json` | `appTitle` | Factorio Server Manager | Factorio サーバーマネージャー |
+
+### 第 3 步：注册语言
+
+编辑 `ui/i18n.js`，在两个地方添加 ja：
+
+**位置 1 — import 翻译文件：**
+
+```js
+// 在 zh-CN imports 后面添加
+import jaCommon from './locales/ja/common.json';
+import jaLayout from './locales/ja/layout.json';
+import jaControls from './locales/ja/controls.json';
+import jaMods from './locales/ja/mods.json';
+import jaSaves from './locales/ja/saves.json';
+import jaServerSettings from './locales/ja/serverSettings.json';
+import jaLogs from './locales/ja/logs.json';
+import jaConsole from './locales/ja/console.json';
+import jaUserManagement from './locales/ja/userManagement.json';
+```
+
+**位置 2 — 添加到 resources 对象：**
+
+```js
+const resources = {
+  en: { /* 已有 */ },
+  'zh-CN': { /* 已有 */ },
+  ja: {
+    common: jaCommon,
+    layout: jaLayout,
+    controls: jaControls,
+    mods: jaMods,
+    saves: jaSaves,
+    serverSettings: jaServerSettings,
+    logs: jaLogs,
+    console: jaConsole,
+    userManagement: jaUserManagement,
+  },
+};
+```
+
+### 第 4 步：添加到语言切换器
+
+编辑 `ui/App/components/Layout.jsx`，在 `<select>` 中添加：
+
+```jsx
+<option value="ja">日本語</option>
+```
+
+### 第 5 步：验证
+
+```bash
+npm run build
+```
+
+构建通过即完成。浏览器语言设为日语时自动显示日文，也可通过侧边栏切换器手动选择。
+
+---
+
+## 翻译文件结构
+
+```
+ui/locales/
+├── en/               ← 英文（fallback，必须保持完整）
+│   ├── common.json   ← 通用词汇（保存/取消/确认/删除...）
+│   ├── layout.json   ← 导航栏/侧边栏/页面标题
+│   ├── controls.json ← 服务器启停控制面板
+│   ├── mods.json     ← Mod 管理全部子页面
+│   ├── saves.json    ← 存档管理全部子页面
+│   ├── serverSettings.json ← 服务器+游戏设置
+│   ├── logs.json     ← 日志页面
+│   ├── console.json  ← RCON 控制台
+│   └── userManagement.json ← 用户管理/登录
+├── zh-CN/            ← 简体中文（已完成）
+└── ja/               ← 日语（按本指南添加）
+```
+
+## 翻译规则
+
+1. **只改 value，不改 key。** key 是代码引用的标识，改了会导致显示空白。
+2. **保持扁平结构。** 所有 key 在 JSON 顶层，不要嵌套。
+3. **不要修改 HTML。** 翻译值里不要放 `<div>`、`<span>` 等标签。
+4. **大写 key 是状态值**（如 `RUNNING`、`STOPPED`、`UNKNOWN`），翻译时用对应的状态词。
+5. **en/ 是权威源。** 如果某个 key 在目标语言中缺失，i18next 会自动回退到英文，不会报错。
+
+## 自动语言检测
+
+`i18next-browser-languagedetector` 按以下优先级检测：
+
+1. `localStorage` 中 `fsm_lang` 的值（用户手动切换后记住）
+2. 浏览器 `navigator.language`
+
+例如浏览器语言是 `ja` → 自动加载日语；无匹配 → 回退英文。
+
+## 常见 BCP 47 语言标签
+
+| 语言 | 标签 | 写入 `i18n.js` |
+|---|---|---|
+| 日语 | `ja` | `ja` |
+| 韩语 | `ko` | `ko` |
+| 繁体中文 | `zh-TW` | `zh-TW` |
+| 德语 | `de` | `de` |
+| 法语 | `fr` | `fr` |
+| 俄语 | `ru` | `ru` |
+| 西班牙语 | `es` | `es` |
+| 葡萄牙语 | `pt` | `pt` |
+| 波兰语 | `pl` | `pl` |
+
+## 注意事项
+
+- **不要删除或修改 `en/` 下的文件。** 英文是 fallback 语言，必须保持完整。
+- **新语言的 JSON 文件名必须与 `en/` 完全一致。**
+- 如果不想翻译所有 key，可以先复制英文再逐条翻译，未翻译的 key 会自动回退英文。
+- Factorio 社区有大量活跃的非英语玩家，欢迎贡献翻译 PR。

From fcf5bc7406c8a2f0d3ad6a2eb37b0ef6efa5e47b Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 06:05:45 +0000
Subject: [PATCH 08/38] =?UTF-8?q?=E6=96=87=E6=A1=A3:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=E7=89=88=E6=9C=AC=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=99=A8=E8=AE=BE=E8=AE=A1=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...026-06-21-server-version-manager-design.md | 855 ++++++++++++++++++
 1 file changed, 855 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-06-21-server-version-manager-design.md

diff --git a/docs/superpowers/specs/2026-06-21-server-version-manager-design.md b/docs/superpowers/specs/2026-06-21-server-version-manager-design.md
new file mode 100644
index 00000000..75d021ee
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-21-server-version-manager-design.md
@@ -0,0 +1,855 @@
+# FSM Server Version Manager Design Spec
+
+**Date:** 2026-06-21
+**Project:** factorio-server-manager-joey
+**Branch:** feat/server-version-manager
+**Status:** Draft / Approved for Implementation
+
+---
+
+## 1. Overview and Goals
+
+### 1.1 Problem
+
+The Factorio Server Manager (FSM) currently assumes the Factorio headless server binary is pre-installed and has zero version management capability. Operators must manually download, extract, and replace the binary when updating. This adds friction especially when Wube releases new stable builds (every few weeks) and experimental builds (more frequently).
+
+### 1.2 Goals
+
+- Allow operators to view the currently installed Factorio version from the UI.
+- Fetch the list of available versions from the official Factorio API.
+- Download and install a selected version with one click, replacing the existing binary in place.
+- Reuse the existing Mod Portal authentication (token + username) for download authorization.
+- Block installation while the Factorio server is running (fail-safe).
+- Show download progress to give feedback during multi-second downloads.
+- Fully localized in English and Simplified Chinese via the existing i18n framework.
+
+### 1.3 Non-Goals
+
+- Version co-existence / side-by-side installations.
+- Custom download mirrors or proxy support.
+- Automatic update polling or notifications.
+- Docker image version management.
+- Windows support for the download/install flow (the Factorio download URL is linux64; Windows users already manage their own updates).
+
+---
+
+## 2. Architecture
+
+### 2.1 New Package: `factorio/version_manager.go`
+
+A new file `src/factorio/version_manager.go` contains all backend logic. No changes to existing files beyond adding route registrations.
+
+```go
+package factorio
+
+import (
+    "archive/tar"
+    "bytes"
+    "encoding/json"
+    "fmt"
+    "io"
+    "log"
+    "net/http"
+    "os"
+    "path/filepath"
+    "strings"
+
+    "github.com/OpenFactorioServerManager/factorio-server-manager/api/websocket"
+    "github.com/OpenFactorioServerManager/factorio-server-manager/bootstrap"
+    "github.com/ulikunitz/xz"
+)
+```
+
+**Note on xz decompression:** Go's standard library does not include an xz decoder. Use `github.com/ulikunitz/xz` (pure Go, no CGo). Add to go.mod:
+
+```
+require github.com/ulikunitz/xz v0.5.12
+```
+
+### 2.2 Download/Install Flow
+
+```
+POST /api/server/version/install {version: "2.0.32"}
+   |
+   +-- 1. Verify server is stopped (ServerOffMiddleware)
+   +-- 2. Load credentials (username + token from factorio.auth)
+   +-- 3. Download: https://factorio.com/get-download/{version}/headless/linux64?username=<u>&token=<t>
+   +-- 4. Stream to temp file: /tmp/factorio-dl-<random>.tar.xz
+   +-- 5. Send progress via websocket room "server_version"
+   +-- 6. Extract tar.xz: the archive contains bin/x64/factorio + data/ + doc-html/ etc.
+   +-- 7. Overwrite in-place: extract into config.FactorioDir (updating bin/x64/factorio, data/, etc.)
+   +-- 8. Clean up temp files
+   +-- 9. Re-read installed version (run factorio --version on new binary)
+   +-- 10. Return {success: true, version: "2.0.32"}
+```
+
+In-place override means the tarball is extracted directly on top of `config.FactorioDir`. This works because:
+
+- The headless tarball contains the same directory layout as a normal installation.
+- The `data/` directory is updated alongside the binary.
+- Saves, mods, and config are outside `config.FactorioDir` (they live in `config.FactorioSavesDir`, `config.FactorioModsDir`, and `config.FactorioConfigDir` respectively).
+
+### 2.3 Version Data Structures
+
+```go
+// VersionManager provides download/install operations
+type VersionManager struct{}
+
+// LatestReleasesResponse matches the factorio.com/api/latest-releases endpoint
+type LatestReleasesResponse struct {
+    Stable       LatestRelease `json:"stable"`
+    Experimental LatestRelease `json:"experimental"`
+}
+
+type LatestRelease struct {
+    Alpha    Version `json:"alpha"`
+    Demo     Version `json:"demo"`
+    Headless Version `json:"headless"`
+}
+
+// AvailableVersion is used for the /available API response
+type AvailableVersion struct {
+    Version      Version `json:"version"`
+    Stable       bool    `json:"stable"`
+    Experimental bool    `json:"experimental"`
+}
+```
+
+### 2.4 Key Functions
+
+| Function | Purpose |
+|---|---|
+| `GetInstalledVersion() (Version, error)` | Runs `factorio --version`, parses output. Reuses existing logic from `NewFactorioServer()`. |
+| `FetchAvailableVersions() ([]AvailableVersion, error)` | Calls `https://factorio.com/api/latest-releases`, builds candidate list. |
+| `DownloadAndInstall(version Version) error` | Full download, extract, replace flow. Sends progress events to websocket room. |
+| `extractTarXz(r io.Reader, dest string) error` | Decompresses xz, extracts tar to dest dir, sets executable bit on binary. |
+
+---
+
+## 3. API Design
+
+All three endpoints are behind `/api/server/version/` and require authentication (via `AuthMiddleware`). The install endpoint requires server-off (via `ServerOffMiddleware`).
+
+### 3.1 GET /api/server/version/current
+
+Returns the currently installed version.
+
+**Response 200:**
+```json
+{
+    "version": "2.0.28",
+    "string": "2.0.28"
+}
+```
+
+**Error 500:**
+```json
+{
+    "error": "Could not detect installed Factorio version"
+}
+```
+
+### 3.2 GET /api/server/version/available
+
+Fetches the list of available versions from the Factorio API.
+
+**Response 200:**
+```json
+{
+    "stable": "2.0.32",
+    "experimental": "2.0.32",
+    "versions": [
+        {"version": "2.0.32", "stable": true, "experimental": true},
+        {"version": "2.0.31", "stable": true, "experimental": false},
+        {"version": "2.0.30", "stable": false, "experimental": true}
+    ]
+}
+```
+
+Note: The factorio API's `latest-releases` endpoint returns only the single latest stable and experimental version. To build a full list, the spec defines a **static version range** approach for v1:
+
+**Version range strategy (v1):**
+- Fetch `latest-releases` to get `latest_stable` and `latest_experimental`.
+- Generate a candidate list from `2.0.0` up to `latest_experimental` by incrementing the patch/minor numbers.
+- This avoids hitting the mod portal API for every version.
+- The range covers all versions >= 2.0 since older installs are rare and the format has been stable since 2.0.
+
+**Future enhancement (v2):** Parse the factorio.com download page or a community update feed for historical releases.
+
+**Error 502:**
+```json
+{
+    "error": "Failed to fetch version list from Factorio API"
+}
+```
+
+### 3.3 POST /api/server/version/install
+
+Downloads and installs a specific version. Requires `ServerOffMiddleware`.
+
+**Request:**
+```json
+{
+    "version": "2.0.32"
+}
+```
+
+**Response 200:**
+```json
+{
+    "success": true,
+    "version": "2.0.32",
+    "previousVersion": "2.0.28",
+    "installedAt": "2026-06-21T10:30:00Z"
+}
+```
+
+**Error 400 (bad version):**
+```json
+{
+    "error": "Invalid version string"
+}
+```
+
+**Error 403 (no auth):**
+```json
+{
+    "error": "Factorio.com credentials required. Log in via Mod Portal settings first."
+}
+```
+
+**Error 423 (server running):**
+```json
+{
+    "error": "Factorio server running. Stop the server before updating."
+}
+```
+
+**Error 500 (install failed):**
+```json
+{
+    "error": "Download failed: connection timeout"
+}
+```
+
+### 3.4 Route Registration
+
+Add to `src/api/routes.go` in the `apiRoutes` slice:
+
+```go
+{
+    "CurrentVersion",
+    "GET",
+    "/server/version/current",
+    CurrentVersionHandler,
+    false,
+}, {
+    "AvailableVersions",
+    "GET",
+    "/server/version/available",
+    AvailableVersionsHandler,
+    false,
+}, {
+    "InstallVersion",
+    "POST",
+    "/server/version/install",
+    InstallVersionHandler,
+    true,  // requires server-off
+},
+```
+
+### 3.5 Handler File: `src/api/version_handler.go`
+
+New handler file following the pattern in `mod_portal_handler.go`:
+
+```go
+package api
+
+func CurrentVersionHandler(w http.ResponseWriter, r *http.Request) { ... }
+func AvailableVersionsHandler(w http.ResponseWriter, r *http.Request) { ... }
+func InstallVersionHandler(w http.ResponseWriter, r *http.Request) { ... }
+```
+
+Each handler follows the existing `defer WriteResponse` + `w.Header().Set("Content-Type", ...)` pattern.
+
+---
+
+## 4. Frontend Component Design
+
+### 4.1 New View: `ui/App/views/ServerVersion.jsx`
+
+```jsx
+import React, { useEffect, useState } from "react";
+import { useTranslation } from 'react-i18next';
+import Panel from "../components/Panel";
+import Button from "../components/Button";
+import server from "../../api/resources/server";
+import socket from "../../api/socket";
+
+const ServerVersion = ({ serverStatus }) => {
+    const { t } = useTranslation('serverVersion');
+
+    const [installedVersion, setInstalledVersion] = useState(null);
+    const [availableVersions, setAvailableVersions] = useState([]);
+    const [stableVersion, setStableVersion] = useState(null);
+    const [isInstalling, setIsInstalling] = useState(false);
+    const [progress, setProgress] = useState(null);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        fetchCurrentVersion();
+        fetchAvailableVersions();
+    }, []);
+
+    useEffect(() => {
+        socket.emit('subscribe', 'server_version');
+        socket.on('server_version', data => {
+            setProgress(data);
+        });
+        return () => {
+            socket.off('server_version');
+        };
+    }, []);
+
+    const handleInstall = async (version) => {
+        setIsInstalling(true);
+        setError(null);
+        setProgress({ percent: 0, status: 'downloading' });
+        try {
+            const result = await server.installVersion(version);
+            setInstalledVersion(result.version);
+            setProgress(null);
+        } catch (err) {
+            setError(err.message);
+            setProgress(null);
+        } finally {
+            setIsInstalling(false);
+        }
+    };
+
+    const isUpdateAvailable = installedVersion && stableVersion &&
+        installedVersion !== stableVersion;
+
+    // Render logic
+};
+```
+
+### 4.2 UI Layout (matching Controls Panel pattern)
+
+```
++---------------------------------------------+
+|  Server Version              (Panel title)   |
++---------------------------------------------+
+|  Installed Version                          |
+|  +---------------------------------------+  |
+|  | Current: 2.0.28                       |  |
+|  | Status: Update Available              |  |
+|  |   (Update to 2.0.32)                  |  |
+|  +---------------------------------------+  |
+|                                             |
+|  Available Versions                         |
+|  +---------------------------------------+  |
+|  | o 2.0.32 (latest stable)   [Install]  |  |
+|  | o 2.0.31                  [Install]   |  |
+|  | o 2.0.30 (experimental)   [Install]   |  |
+|  +---------------------------------------+  |
+|                                             |
+|  [Update to 2.0.32]   big CTA button        |
+|    only visible when update available        |
++---------------------------------------------+
+```
+
+### 4.3 State Machine
+
+| State | Condition | UI |
+|---|---|---|
+| Loading | versions not yet fetched | "Loading..." spinner in each section |
+| Loaded, up-to-date | installed == stable latest | Green checkmark, "Up to date" |
+| Loaded, update available | installed < stable latest | "Update Available" badge, CTA button |
+| Installing | isInstalling = true | Progress bar, disabled buttons |
+| Error | error != null | Error banner with message |
+| No credentials | 403 on install attempt | "Login required" link to Mod Portal |
+
+### 4.4 API Resource: `ui/api/resources/server.js`
+
+Add method to existing server resource:
+
+```js
+const ServerVersionResource = {
+    current() {
+        return api.get('/server/version/current');
+    },
+    available() {
+        return api.get('/server/version/available');
+    },
+    install(version) {
+        return api.post('/server/version/install', { version });
+    },
+};
+```
+
+### 4.5 WebSocket Subscription
+
+The existing websocket hub already supports naming rooms. The version manager uses a new room `"server_version"`:
+
+```javascript
+socket.emit('subscribe', 'server_version');
+socket.on('server_version', (data) => {
+    // data = { percent: 45, status: "Extracting..." }
+});
+```
+
+On the Go side, progress is broadcast via:
+
+```go
+wsRoom := websocket.WebsocketHub.GetRoom("server_version")
+wsRoom.Send(progressJSON)
+```
+
+---
+
+## 5. Version Comparison Logic
+
+The existing `factorio.Version` type (`version.go`) is a `[4]uint` and already provides:
+
+| Method | Usage |
+|---|---|
+| `v.Less(b)` | Check if installed < available |
+| `v.Greater(b)` | Check if installed > available |
+| `v.Equals(b)` | Check equality |
+| `v.String()` | Display: "2.0.28" |
+| `v.UnmarshalText()` | Parse from string |
+
+Factorio uses 4-part versions: `major.minor.patch.build` (e.g. `2.0.28.0`). The build number is usually 0 for released builds. Comparison logic is already correct for our use case.
+
+**Update available check:**
+```go
+func IsUpdateAvailable(installed, latestStable Version) bool {
+    return latestStable.Greater(installed)
+}
+```
+
+**Version compatibility filter (future):** The existing `GreaterC` method handles experimental/super-major incompatibility. Not needed for v1 since we only list versions >= 2.0.
+
+---
+
+## 6. Download Progress
+
+### 6.1 WebSocket Event Format
+
+The backend emits progress events to the `"server_version"` websocket room:
+
+```json
+{
+    "room": "server_version",
+    "event": "install_progress",
+    "data": {
+        "percent": 45,
+        "stage": "download",
+        "message": "Downloading... 45.2 MB / 102.4 MB"
+    }
+}
+```
+
+Stages:
+
+| stage | percent range | meaning |
+|---|---|---|
+| `download` | 0 - 90 | Downloading tar.xz from factorio.com |
+| `extract` | 90 - 99 | Extracting archive over FactorioDir |
+| `verify` | 99 - 100 | Running factorio --version on new binary |
+| `done` | 100 | Complete |
+| `error` | -- | Installation failed |
+
+### 6.2 Backend Implementation
+
+```go
+func reportProgress(percent int, stage, message string) {
+    wsRoom := websocket.WebsocketHub.GetRoom("server_version")
+    data, _ := json.Marshal(map[string]interface{}{
+        "room": "server_version",
+        "event": "install_progress",
+        "data": map[string]interface{}{
+            "percent": percent,
+            "stage":   stage,
+            "message": message,
+        },
+    })
+    wsRoom.Send(string(data))
+}
+```
+
+The HTTP download uses a `io.TeeReader` with a `ProgressReader` wrapper:
+
+```go
+type ProgressReader struct {
+    reader     io.Reader
+    total      int64
+    read       int64
+    lastReport int64
+}
+
+func (pr *ProgressReader) Read(p []byte) (int, error) {
+    n, err := pr.reader.Read(p)
+    pr.read += int64(n)
+    newPct := pr.read * 100 / pr.total
+    lastPct := pr.lastReport * 100 / pr.total
+    if newPct > lastPct+4 || newPct >= 100 {
+        pr.lastReport = pr.read
+        reportProgress(int(newPct), "download",
+            fmt.Sprintf("%.1f MB / %.1f MB",
+                float64(pr.read)/1024/1024,
+                float64(pr.total)/1024/1024))
+    }
+    return n, err
+}
+```
+
+### 6.3 Frontend Progress Bar
+
+A Tailwind-based progress bar inside the Panel when `status === 'installing'`:
+
+```jsx
+{isInstalling && progress && (
+    <div className="w-full bg-gray-light rounded h-4 mt-2">
+        <div className="bg-orange h-4 rounded transition-all duration-300"
+             style={{ width: `${progress.percent}%` }} />
+        <span className="text-sm text-dirty-white ml-2">
+            {progress.message}
+        </span>
+    </div>
+)}
+```
+
+---
+
+## 7. Error Handling
+
+### 7.1 Error Scenarios
+
+| Scenario | Detection | Response |
+|---|---|---|
+| Server running | ServerOffMiddleware in routes.go | 423 Locked + message |
+| No credentials saved | credentials.Load() returns false | 403 + "Log in via Mod Portal" |
+| Network failure | http.Get timeout / DNS error | 502 + "Download failed: {details}" |
+| Invalid version string | version.UnmarshalText() fails | 400 + "Invalid version" |
+| Disk full / permission denied | os.Create / io.Copy fails | 500 + "Install failed: disk error" |
+| Corrupt download | xz decompression fails | 500 + "Download corrupt, try again" |
+| Binary not found after install | exec.Command fails | 500 + "New binary could not be verified" |
+| Extract permission denied | tar.Reader write fails | 500 + "Permission denied extracting" |
+
+### 7.2 Atomicity
+
+The install operation is NOT fully atomic (replacing the binary while the server is stopped is inherently safe). However:
+
+- The temp download file is cleaned up in a `defer` block even on error.
+- If extraction fails partway, the FactorioDir is left in an inconsistent state. To mitigate, v1 documents this risk. v2 could add a backup step:
+
+```go
+// v1: direct overwrite
+// v2: backup bin/x64/factorio before extracting, restore on failure
+```
+
+### 7.3 Frontend Error Display
+
+```jsx
+{error && (
+    <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+        <span className="block sm:inline">{error}</span>
+    </div>
+)}
+```
+
+---
+
+## 8. Integration with Existing Auth
+
+### 8.1 Token Source
+
+The Factorio download API requires `?username=<user>&token=<token>` query parameters on the download URL. This is the same authentication used for mod downloads in `mod_Mods.go`.
+
+The credentials are stored in `./factorio.auth` (two-line JSON: `{"username": "...", "userkey": "..."}`), managed by the existing `credentials.go` package.
+
+### 8.2 Auth Flow
+
+```
+1. User configures token via Mod Portal settings page (existing feature)
+   POST /api/mods/portal/login { username, token }
+   factorio.auth file saved
+
+2. Version install API reads the same credentials
+   credentials.Load() in version_manager.go
+
+3. Download URL constructed:
+   https://factorio.com/get-download/{version}/headless/linux64?username={u}&token={t}
+
+4. If credentials missing, 403 error returned to UI
+   UI shows link to Mod Portal settings page
+```
+
+### 8.3 Credential Validation
+
+The Factorio download API returns 403 if the token is invalid or the user does not own the game. This is surfaced as:
+
+```json
+{
+    "error": "Factorio.com authentication failed. Check your Mod Portal token."
+}
+```
+
+---
+
+## 9. Sidebar Integration
+
+### 9.1 Layout Changes (`ui/App/components/Layout.jsx`)
+
+Add a new link inside the existing "Server Management" section, before the closing `</div>` and after `linkLogs`:
+
+```jsx
+<Link to="/server-version">{t('linkServerVersion', { ns: 'layout' })}</Link>
+```
+
+Place it after the `linkLogs` link to group it with server management operations.
+
+### 9.2 Layout i18n Keys
+
+Add to `ui/locales/en/layout.json`:
+```json
+"linkServerVersion": "Server Version"
+```
+
+Add to `ui/locales/zh-CN/layout.json`:
+```json
+"linkServerVersion": "服务器版本"
+```
+
+### 9.3 Route Registration (`ui/App/App.jsx`)
+
+```jsx
+import ServerVersion from "./views/ServerVersion";
+
+// Inside the ProtectedRoute > Layout route group:
+<Route path="server-version" element={<ServerVersion serverStatus={serverStatus} />} />
+```
+
+### 9.4 Frontend Route Registration (Go backend)
+
+Add to `src/api/routes.go` subrouter path routing:
+
+```go
+subRouter.Path("/server-version").
+    Methods("GET").
+    Name("Server Version").
+    Handler(http.StripPrefix("/server-version", http.FileServer(http.Dir("./app/"))))
+```
+
+---
+
+## 10. i18n
+
+### 10.1 New Namespace: `serverVersion`
+
+Create two new files:
+
+**`ui/locales/en/serverVersion.json`**:
+```json
+{
+    "title": "Server Version",
+    "installedVersion": "Installed Version",
+    "current": "Current",
+    "unknown": "Unknown",
+    "upToDate": "Up to date",
+    "updateAvailable": "Update Available",
+    "updateTo": "Update to {{version}}",
+    "availableVersions": "Available Versions",
+    "stable": "stable",
+    "experimental": "experimental",
+    "latestStable": "latest stable",
+    "install": "Install",
+    "installing": "Installing...",
+    "confirmInstall": "Are you sure you want to install Factorio {{version}}? The server must be stopped.",
+    "installSuccess": "Successfully installed Factorio {{version}}",
+    "installFailed": "Installation failed: {{error}}",
+    "loginRequired": "Factorio.com login required.",
+    "loginLink": "Go to Mod Portal settings",
+    "previousVersion": "Previous version",
+    "downloadStage": "Downloading...",
+    "extractStage": "Extracting...",
+    "verifyStage": "Verifying..."
+}
+```
+
+**`ui/locales/zh-CN/serverVersion.json`**:
+```json
+{
+    "title": "服务器版本",
+    "installedVersion": "已安装版本",
+    "current": "当前版本",
+    "unknown": "未知",
+    "upToDate": "已是最新",
+    "updateAvailable": "有可用更新",
+    "updateTo": "更新至 {{version}}",
+    "availableVersions": "可用版本",
+    "stable": "稳定版",
+    "experimental": "实验版",
+    "latestStable": "最新稳定版",
+    "install": "安装",
+    "installing": "安装中...",
+    "confirmInstall": "确定要安装 Factorio {{version}} 吗？服务器必须处于停止状态。",
+    "installSuccess": "Factorio {{version}} 安装成功",
+    "installFailed": "安装失败: {{error}}",
+    "loginRequired": "需要登录 Factorio.com。",
+    "loginLink": "前往 Mod Portal 设置",
+    "previousVersion": "上一个版本",
+    "downloadStage": "下载中...",
+    "extractStage": "解压中...",
+    "verifyStage": "验证中..."
+}
+```
+
+### 10.2 i18n Registration
+
+Add to `ui/i18n.js`:
+
+```js
+import enServerVersion from './locales/en/serverVersion.json';
+import zhServerVersion from './locales/zh-CN/serverVersion.json';
+
+// In resources object under each language:
+serverVersion: enServerVersion,
+serverVersion: zhServerVersion,
+```
+
+---
+
+## 11. Implementation Order
+
+### Phase 1: Backend Core
+
+| Step | File | What |
+|---|---|---|
+| 1.1 | `src/factorio/version_manager.go` | Add `GetInstalledVersion()`, `FetchAvailableVersions()`, `DownloadAndInstall()`, `extractTarXz()` |
+| 1.2 | `src/api/version_handler.go` | Add `CurrentVersionHandler`, `AvailableVersionsHandler`, `InstallVersionHandler` |
+| 1.3 | `src/api/routes.go` | Register three new routes in `apiRoutes` |
+| 1.4 | `src/go.mod` | Add `github.com/ulikunitz/xz` dependency |
+
+### Phase 2: Frontend
+
+| Step | File | What |
+|---|---|---|
+| 2.1 | `ui/api/resources/server.js` | Add `installVersion()` method |
+| 2.2 | `ui/App/views/ServerVersion.jsx` | Create new view component |
+| 2.3 | `ui/App/App.jsx` | Add route for `/server-version` |
+| 2.4 | `ui/App/components/Layout.jsx` | Add sidebar link |
+| 2.5 | `src/api/routes.go` | Add frontend route for `/server-version` |
+| 2.6 | `ui/locales/en/serverVersion.json` | English translations |
+| 2.7 | `ui/locales/zh-CN/serverVersion.json` | Chinese translations |
+| 2.8 | `ui/i18n.js` | Register new namespace |
+
+### Phase 3: Polish and Testing
+
+| Step | What |
+|---|---|
+| 3.1 | Verify progress events reach frontend |
+| 3.2 | Test download failure / resume |
+| 3.3 | Test auth credential expiry |
+| 3.4 | Error message review (all 7 error scenarios) |
+| 3.5 | Verify binary still runs after install |
+
+---
+
+## 12. Testing Criteria
+
+### 12.1 Backend Tests (Go)
+
+| Test | Input | Expected |
+|---|---|---|
+| `TestGetInstalledVersion` | Existing factorio binary at configured path | Valid `Version` parsed from `--version` output |
+| `TestFetchAvailableVersions` | Mock HTTP server returning `latest-releases` JSON | `[]AvailableVersion` with stable + experimental |
+| `TestDownloadAndInstall` | Mock HTTP server serving a valid tar.xz | Binary at FactorioBinary path, extracted correctly |
+| `TestInstallRequiresCredentials` | No factorio.auth file | Error returned |
+| `TestInstallWithBadVersion` | Version "0.0.0" | Invalid version error |
+| `TestVersionComparison` | "(2.0.28, 2.0.32)" | `IsUpdateAvailable` returns `true` |
+| `TestVersionComparison_Equal` | "(2.0.32, 2.0.32)" | `IsUpdateAvailable` returns `false` |
+
+### 12.2 Frontend Tests (Manual)
+
+| Scenario | Steps | Expected |
+|---|---|---|
+| Load page, server stopped | Navigate to /server-version | Shows current version + available list |
+| Update available | Installed is older than stable | Shows "Update Available" + CTA button |
+| Install starts | Click "Install" | Shows progress bar, buttons disabled |
+| Install succeeds | Wait for completion | Shows new version, "Up to date" status |
+| Install fails (network) | Simulate offline | Error message displayed, buttons re-enabled |
+| Install fails (no auth) | Delete factorio.auth | 403 error, link to Mod Portal |
+| Server running | Start server, try to install | 423 error, "Stop server first" message |
+| Progress updates | Watch websocket during install | Progress bar fills smoothly |
+
+### 12.3 Integration Test
+
+```
+1. Start FSM with known Factorio installation (e.g. 2.0.28)
+2. Navigate to Server Version page
+3. Verify "Current: 2.0.28" displayed
+4. Click "Install" on 2.0.32
+5. Wait for progress bar to reach 100%
+6. Verify page now shows "Current: 2.0.32"
+7. Start server, verify it runs on new version
+```
+
+---
+
+## Appendix A: Factorio Download API Reference
+
+**List latest releases (no auth):**
+```
+GET https://factorio.com/api/latest-releases
+```
+Response:
+```json
+{
+    "stable": {
+        "alpha": "2.0.32",
+        "demo": "2.0.32",
+        "headless": "2.0.32"
+    },
+    "experimental": {
+        "alpha": "2.0.32",
+        "demo": "2.0.32",
+        "headless": "2.0.32"
+    }
+}
+```
+
+**Download headless (requires auth):**
+```
+GET https://factorio.com/get-download/{version}/headless/linux64?username={user}&token={token}
+```
+Returns `application/x-xz` binary stream.
+
+## Appendix B: Files Changed Summary
+
+| File | Change Type |
+|---|---|
+| `src/factorio/version_manager.go` | **New** |
+| `src/api/version_handler.go` | **New** |
+| `src/api/routes.go` | Modify (add 3 routes) |
+| `src/go.mod` | Modify (add `ulikunitz/xz`) |
+| `src/go.sum` | Modify (auto) |
+| `ui/App/views/ServerVersion.jsx` | **New** |
+| `ui/App/App.jsx` | Modify (add import + route) |
+| `ui/App/components/Layout.jsx` | Modify (add sidebar link) |
+| `ui/api/resources/server.js` | Modify (add `installVersion`) |
+| `ui/locales/en/serverVersion.json` | **New** |
+| `ui/locales/zh-CN/serverVersion.json` | **New** |
+| `ui/i18n.js` | Modify (register new namespace) |
+
+---
+
+## Appendix C: Open Questions for Implementation
+
+1. Should the version range (for the `available` endpoint) be hardcoded as `[2.0.0 ... latest]` or fetched from a community index? v1 uses a hardcoded range with step increments. If the Factorio API later provides a version list endpoint, switch to that.
+
+2. What is the minimum Factorio version this should support? v1 targets >= 2.0.0. Pre-2.0 versions are out of support.
+
+3. Should we preserve the old binary as `factorio.bak` before overwriting? v1 says no (clean override). v2 can add this.

From e881478d7031fea9b87fb44fd84f4202be7698c4 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 06:25:39 +0000
Subject: [PATCH 09/38] =?UTF-8?q?=E6=96=87=E6=A1=A3:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=E7=89=88=E6=9C=AC=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=99=A8=E5=AE=9E=E7=8E=B0=E8=AE=A1=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...1-server-version-manager-implementation.md | 523 ++++++++++++++++++
 1 file changed, 523 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-06-21-server-version-manager-implementation.md

diff --git a/docs/superpowers/plans/2026-06-21-server-version-manager-implementation.md b/docs/superpowers/plans/2026-06-21-server-version-manager-implementation.md
new file mode 100644
index 00000000..f4b258da
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-21-server-version-manager-implementation.md
@@ -0,0 +1,523 @@
+# FSM Server Version Manager — Implementation Plan
+
+**Date:** 2026-06-21
+**Spec:** `docs/superpowers/specs/2026-06-21-server-version-manager-design.md`
+**Branch:** `feat/server-version-manager`
+
+---
+
+## Context
+
+Add a Server Version Manager to FSM that allows operators to view installed version, fetch available versions from the Factorio API, and download/install a selected version — all from the UI. The install requires server-off state, uses existing Mod Portal credentials for auth, and reports download progress via WebSocket.
+
+## Task Dependency Graph
+
+| Task | Depends On | Reason |
+|------|------------|--------|
+| T1: go.mod add xz dependency | None | Foundation — needed for compilation |
+| T2: version_manager.go core logic | T1 | Uses xz package for extraction |
+| T3: version_manager_test.go | T2 | Tests the core logic |
+| T4: version_handler.go API handlers | T2 | Handlers call VersionManager methods |
+| T5: routes.go backend API routes | T4 | Must reference handler functions |
+| T6: routes.go frontend SPA route | None | Independent of other backend changes |
+| T7: version_handler_test.go | T4, T5 | Tests the handler integration |
+| T8: en/serverVersion.json | None | Independent of backend |
+| T9: zh-CN/serverVersion.json | None | Independent of backend |
+| T10: i18n.js registration | T8, T9 | Must import the new locale files |
+| T11: server.js + socket.js API/WS | None | Independent of backend |
+| T12: ServerVersion.jsx view | T11, T10, T8, T9 | Needs API methods and i18n strings |
+| T13: App.jsx route registration | T12 | Must import ServerVersion component |
+| T14: Layout.jsx sidebar link + i18n | T13 | Sidebar nav for the new page |
+| T15: Build + verify | All | Final integration verification |
+
+## Parallel Execution Graph
+
+**Wave 1 (Start immediately — no inter-file dependencies):**
+- T1: go.mod add `ulikunitz/xz`
+- T8: Create `en/serverVersion.json`
+- T9: Create `zh-CN/serverVersion.json`
+- T11: Add API methods + WS subscription to server.js/socket.js
+
+**Wave 2 (After Wave 1):**
+- T2: `version_manager.go` — core logic (download, extract, install, progress)
+- T6: Frontend SPA route in routes.go
+
+**Wave 3 (After Wave 2 completes):**
+- T4: `version_handler.go` — 3 API handler functions
+- T5: Register backend routes in routes.go
+- T10: Register i18n namespace in i18n.js
+
+**Wave 4 (After Wave 3 completes):**
+- T3: `version_manager_test.go`
+- T7: `version_handler_test.go`
+
+**Wave 5 (After Wave 4 completes):**
+- T12: `ServerVersion.jsx` — full view component with progress bar
+
+**Wave 6 (After Wave 5 completes):**
+- T13: Add route in App.jsx
+- T14: Add sidebar link in Layout.jsx + layout locale keys
+
+**Wave 7 (After Wave 6 completes):**
+- T15: Build frontend + backend, verify compilation
+
+**Critical Path:** T1 → T2 → T4 → T5 → T12 → T13 → T14 → T15
+
+## Tasks
+
+### Task 1: go.mod — Add `ulikunitz/xz` dependency
+
+**Description**: Add the pure-Go xz decompression library required by `extractTarXz()`.
+
+**File**: `src/go.mod`
+
+**Changes**:
+- Add `github.com/ulikunitz/xz v0.5.12` to the `require` block
+- Run `cd src && go mod tidy` to update `go.sum`
+
+**Delegation Recommendation**:
+- Category: `quick` — single-line dep addition
+- Skills: none needed
+
+**Depends On**: None
+
+**Acceptance Criteria**:
+- `go.sum` updated
+- `go build ./...` passes
+
+---
+
+### Task 2: version_manager.go — Core backend logic
+
+**Description**: New file containing `VersionManager` struct, `GetInstalledVersion()`, `FetchAvailableVersions()`, `DownloadAndInstall()`, `extractTarXz()`, `ProgressReader`, and `reportProgress()`.
+
+**File**: `src/factorio/version_manager.go` (new)
+
+**Key types** (per spec §2.3):
+- `LatestReleasesResponse`, `LatestRelease`, `AvailableVersion`
+- `ProgressReader` — io.Reader wrapper that reports download % to WebSocket room every ~5% delta or at 100%
+
+**Key functions**:
+
+| Function | Detail |
+|---|---|
+| `GetInstalledVersion()` | Runs `config.FactorioBinary --version`, regex-parses output (same pattern as `NewFactorioServer()` in server.go:150-167). Returns `Version`. |
+| `FetchAvailableVersions()` | GET `https://factorio.com/api/latest-releases`, parse JSON. Generate candidate list from `2.0.0` up to `latest_experimental` by incrementing patch. Returns `[]AvailableVersion` with stable/experimental flags. |
+| `DownloadAndInstall(v Version)` | 1. `credentials.Load()` → fail 403 if none. 2. Construct URL with username+token. 3. HTTP GET, stream to `/tmp/factorio-dl-<random>.tar.xz` with ProgressReader. 4. `extractTarXz()` over `config.FactorioDir`. 5. `defer os.Remove` temp. 6. Verify with GetInstalledVersion(). |
+| `extractTarXz(r io.Reader, dest string)` | xz.NewReader → tar.NewReader. For each header: create dirs, write files, set 0755 on `bin/x64/factorio`. |
+| `reportProgress(percent, stage, msg)` | Marshal JSON, send to `websocket.WebsocketHub.GetRoom("server_version").Send()` |
+
+**Helper**: `IsUpdateAvailable(installed, latestStable Version) bool` — uses existing `Greater()`.
+
+**WS Event format** (per spec §6.1):
+```json
+{"room": "server_version", "event": "install_progress", "data": {"percent": 45, "stage": "download", "message": "45.2 MB / 102.4 MB"}}
+```
+
+**Delegation Recommendation**:
+- Category: `deep` — moderately complex Go with HTTP, xz, websocket integration
+- Skills: none needed beyond system Go toolchain
+
+**Depends On**: Task 1
+
+**Acceptance Criteria**:
+- Compiles with `go build ./...`
+- `GetInstalledVersion()` returns a valid `Version` when pointed at a real binary
+- Progress events sent to WebSocket room during download
+
+---
+
+### Task 3: version_manager_test.go — Tests for core logic
+
+**Description**: Unit tests for version comparison, version range generation, and credential checking.
+
+**File**: `src/factorio/version_manager_test.go` (new)
+
+**Tests** (per spec §12.1):
+
+| Test | Input | Expected |
+|---|---|---|
+| `TestGetInstalledVersion` | Real factorio binary at configured path | Valid Version parsed from --version |
+| `TestFetchAvailableVersions` | Mock HTTP server returning latest-releases | []AvailableVersion with stable + experimental |
+| `TestDownloadAndInstall` | Mock HTTP serving valid tar.xz | Binary extracted at FactorioDir |
+| `TestInstallRequiresCredentials` | No factorio.auth file | Error returned |
+| `TestInstallWithBadVersion` | Version "0.0.0" | Invalid version error |
+| `TestIsUpdateAvailable` | (2.0.28, 2.0.32) | true |
+| `TestIsUpdateAvailable_Equal` | (2.0.32, 2.0.32) | false |
+| `TestVersionRangeGeneration` | stable=2.0.32, experimental=2.0.32 | List covers 2.0.0..2.0.32, 2.0.32 is both |
+
+Use `testing.Short()` skip for tests needing external HTTP or real binary.
+
+**Delegation Recommendation**:
+- Category: `quick` — straightforward unit test patterns matching existing style
+- Skills: none
+
+**Depends On**: Task 2
+
+**Acceptance Criteria**:
+- `cd src && go test -short ./factorio/ -run TestVersion` passes
+
+---
+
+### Task 4: version_handler.go — API HTTP handlers
+
+**Description**: Three handler functions following the existing pattern in `mod_portal_handler.go`: `defer WriteResponse` + `w.Header().Set("Content-Type", ...)` + explicit status codes.
+
+**File**: `src/api/version_handler.go` (new)
+
+**Handlers**:
+
+**`CurrentVersionHandler`**:
+- Calls `factorio.GetInstalledVersion()` (or reads from singleton `factorio.GetFactorioServer().Version`)
+- Returns `{"version": "2.0.28", "string": "2.0.28"}`
+- Error 500 on failure
+
+**`AvailableVersionsHandler`**:
+- Calls `factorio.FetchAvailableVersions()`
+- Returns `{"stable": "2.0.32", "experimental": "2.0.32", "versions": [...]}`
+- Error 502 on API fetch failure
+
+**`InstallVersionHandler`**:
+- Reads `{"version": "2.0.32"}` from body via `ReadFromRequestBody`
+- Validates with `Version.UnmarshalText()`
+- Gets previous version before installing
+- Calls `factorio.DownloadAndInstall()`
+- Returns `{"success": true, "version": "2.0.32", "previousVersion": "2.0.28", "installedAt": "RFC3339"}`
+- Error 400 bad version, 403 no credentials, 500 install failure
+
+**Delegation Recommendation**:
+- Category: `deep` — request parsing + multiple error paths + WS integration
+- Skills: none
+
+**Depends On**: Task 2
+
+**Acceptance Criteria**:
+- Compiles
+- Each handler returns correct JSON shape per spec §3
+
+---
+
+### Task 5: routes.go — Register backend API routes
+
+**Description**: Add three new route entries to `apiRoutes` slice.
+
+**File**: `src/api/routes.go`
+
+**Changes to `apiRoutes`** — append three routes (before the closing `}`):
+
+```go
+{
+    "CurrentVersion",
+    "GET",
+    "/server/version/current",
+    CurrentVersionHandler,
+    false,
+}, {
+    "AvailableVersions",
+    "GET",
+    "/server/version/available",
+    AvailableVersionsHandler,
+    false,
+}, {
+    "InstallVersion",
+    "POST",
+    "/server/version/install",
+    InstallVersionHandler,
+    true,  // requires server-off
+},
+```
+
+**Delegation Recommendation**:
+- Category: `quick` — simple slice append following existing pattern
+- Skills: none
+
+**Depends On**: Task 4
+
+**Acceptance Criteria**:
+- `go build ./...` compiles
+- Routes listed in `NewRouter()` output when inspected
+
+---
+
+### Task 6: routes.go — Frontend SPA route
+
+**Description**: Add frontend file-server route for `/server-version` alongside existing routes like `/saves`, `/mods`, `/logs`.
+
+**File**: `src/api/routes.go`
+
+**Change** — add after the `/logs` route block (around line 116):
+
+```go
+subRouter.Path("/server-version").
+    Methods("GET").
+    Name("Server Version").
+    Handler(http.StripPrefix("/server-version", http.FileServer(http.Dir("./app/"))))
+```
+
+**Delegation Recommendation**:
+- Category: `quick` — single route addition following exact existing pattern
+- Skills: none
+
+**Depends On**: None
+
+**Acceptance Criteria**:
+- Route registered in router
+- Navigable to `/server-version` in browser
+
+---
+
+### Task 7: version_handler_test.go — Tests for API handlers
+
+**Description**: Integration tests for the three version endpoints using existing `CallRoute` pattern from `mods_handler_test.go`.
+
+**File**: `src/api/version_handler_test.go` (new)
+
+**Tests** (per spec §12.1):
+
+| Test | Method | Route | Expected |
+|---|---|---|---|
+| `TestCurrentVersion` | GET | `/api/server/version/current` | 200 + `{"version":"...", "string":"..."}` |
+| `TestAvailableVersions` | GET | `/api/server/version/available` | 200 + version list (or skip in short mode) |
+| `TestInstall_ServerRunning` | POST | `/api/server/version/install` | 423 Locked |
+| `TestInstall_InvalidVersion` | POST | `/api/server/version/install` | 400 bad version |
+
+**Delegation Recommendation**:
+- Category: `quick` — simple handler tests following existing patterns
+- Skills: none
+
+**Depends On**: Task 4, Task 5
+
+**Acceptance Criteria**:
+- `cd src && go test -short ./api/ -run TestVersion` passes
+
+---
+
+### Task 8: en/serverVersion.json — English i18n strings
+
+**File**: `ui/locales/en/serverVersion.json` (new)
+
+Content per spec §10.1 — all keys as documented.
+
+**Delegation Recommendation**:
+- Category: `quick` — static JSON file
+- Skills: none
+
+**Depends On**: None
+
+**Acceptance Criteria**:
+- JSON is valid
+- All keys from spec are present
+
+---
+
+### Task 9: zh-CN/serverVersion.json — Chinese i18n strings
+
+**File**: `ui/locales/zh-CN/serverVersion.json` (new)
+
+Content per spec §10.1 — all keys translated.
+
+**Delegation Recommendation**:
+- Category: `quick` — static JSON file
+- Skills: none
+
+**Depends On**: None
+
+**Acceptance Criteria**:
+- JSON is valid
+- All keys match en version structure
+
+---
+
+### Task 10: i18n.js — Register new serverVersion namespace
+
+**File**: `ui/i18n.js`
+
+**Changes**:
+- Import `enServerVersion` and `zhServerVersion`
+- Add `serverVersion: enServerVersion` to `resources.en`
+- Add `serverVersion: zhServerVersion` to `resources['zh-CN']`
+
+**Delegation Recommendation**:
+- Category: `quick` — 4-line addition following exact existing import/registration pattern
+- Skills: none
+
+**Depends On**: Task 8, Task 9
+
+**Acceptance Criteria**:
+- i18n loads without errors
+- `t('title', { ns: 'serverVersion' })` returns the english title string
+
+---
+
+### Task 11: server.js + socket.js — API resource methods + WS subscription
+
+**Files**: `ui/api/resources/server.js`, `ui/api/socket.js`
+
+**server.js changes**:
+- Add `currentVersion()` — `client.get('/api/server/version/current')`
+- Add `availableVersions()` — `client.get('/api/server/version/available')`
+- Add `installVersion(version)` — `client.post('/api/server/version/install', { version })`
+
+**socket.js changes**:
+- In `registerEventEmitter`/`unregisterEventEmitter`, add handler functions:
+  ```js
+  function versionSubscribeEvent() {
+      socket.send(JSON.stringify({room_name: "", controls: {type: "subscribe", value: "server_version"}}));
+  }
+  function versionUnsubscribeEvent() {
+      socket.send(JSON.stringify({room_name: "", controls: {type: "unsubscribe", value: "server_version"}}));
+  }
+  ```
+- Register: `bus.on('version progress subscribe', versionSubscribeEvent);`
+- Unregister: `bus.off('version progress subscribe', versionSubscribeEvent);` + unsubscribe
+
+**Delegation Recommendation**:
+- Category: `quick` — straightforward method additions following patterns
+- Skills: none
+
+**Depends On**: None
+
+**Acceptance Criteria**:
+- `server.installVersion('2.0.32')` sends POST with correct body
+- `socket.emit('version progress subscribe')` sends WS subscribe for `server_version` room
+
+---
+
+### Task 12: ServerVersion.jsx — New view component
+
+**Description**: Full React component implementing the UI layout from spec §4.
+
+**File**: `ui/App/views/ServerVersion.jsx` (new)
+
+**States covered** (per spec §4.3):
+
+| State | UI |
+|---|---|
+| Loading | "Loading..." in each section |
+| Loaded, up-to-date | Green checkmark + "Up to date" |
+| Loaded, update available | "Update Available" badge + big CTA button |
+| Installing | Progress bar (Tailwind) + disabled buttons |
+| Error | Red error banner |
+| No credentials | Link to Mod Portal settings page |
+
+**Key implementation**:
+- `useTranslation('serverVersion')`
+- `useEffect` fetch current + available versions on mount
+- Subscribe to `server_version` WS room for progress events
+- `handleInstall(version)` — calls `server.installVersion`, shows progress
+- Version list with stable/experimental labels
+- Confirmation via `window.confirm` (or existing `ConfirmDialog` component)
+- Progress bar: `<div className="bg-orange h-4 rounded" style={{ width: progress.percent + '%' }}>`
+
+**Delegation Recommendation**:
+- Category: `visual-engineering` — new React view with i18n and WS integration
+- Skills: none specific
+
+**Depends On**: Task 10, Task 11
+
+**Acceptance Criteria**:
+- Component renders all states without errors
+- Progress bar appears and updates during install
+- Error display matches spec §7.3
+
+---
+
+### Task 13: App.jsx — Route registration
+
+**File**: `ui/App/App.jsx`
+
+**Changes**:
+- Add `import ServerVersion from "./views/ServerVersion";`
+- Add route:
+  ```jsx
+  <Route path="server-version" element={<ServerVersion serverStatus={serverStatus} />} />
+  ```
+
+**Delegation Recommendation**:
+- Category: `quick` — single import + single line route
+- Skills: none
+
+**Depends On**: Task 12
+
+**Acceptance Criteria**:
+- `/server-version` renders ServerVersion component
+
+---
+
+### Task 14: Layout.jsx — Sidebar link + layout i18n
+
+**Files**: `ui/App/components/Layout.jsx`, `ui/locales/en/layout.json`, `ui/locales/zh-CN/layout.json`
+
+**Layout.jsx changes**:
+- Add link after `<Link to="/logs">`:
+  ```jsx
+  <Link to="/server-version">{t('linkServerVersion', { ns: 'layout' })}</Link>
+  ```
+- Move `last={true}` from `linkLogs` to this new link
+
+**layout.json changes**:
+- `en/layout.json`: add `"linkServerVersion": "Server Version"`
+- `zh-CN/layout.json`: add `"linkServerVersion": "服务器版本"`
+
+**Delegation Recommendation**:
+- Category: `quick` — 1 link + 2 JSON keys
+- Skills: none
+
+**Depends On**: Task 13
+
+**Acceptance Criteria**:
+- Sidebar shows "Server Version" link in Server Management section
+- Navigation to /server-version works from sidebar
+
+---
+
+### Task 15: Build + Verify
+
+**Description**: Build both frontend and backend, verify compilation.
+
+**Steps**:
+1. `npm install`
+2. `npm run build`
+3. `cd src && go build -o ../factorio-server-manager/factorio-server-manager .`
+4. `cd src && go vet ./...`
+5. Verify `app/bundle.js` and binary exist and are non-empty
+
+**Delegation Recommendation**:
+- Category: `quick` — run build commands, check output
+- Skills: none
+
+**Depends On**: All tasks
+
+**Acceptance Criteria**:
+- Frontend builds with no errors
+- Backend builds with no errors
+- All `go vet` checks pass
+
+---
+
+## Commit Strategy
+
+1. After writing this plan:
+   ```
+   文档: 添加服务器版本管理器实现计划
+   ```
+
+2. After full implementation (single atomic commit):
+   ```
+   功能: 实现服务器版本管理器
+   ```
+
+   If intermediate commits are useful during development, squash to a single commit before final.
+
+---
+
+## Success Criteria
+
+1. All tasks pass their acceptance criteria
+2. `cd src && go build ./...` succeeds
+3. `npm run build` succeeds
+4. `cd src && go test -short ./...` passes
+5. Three API endpoints return correct JSON per spec §3
+6. Frontend renders all states (loading, loaded, installing, error)
+7. Progress events flow backend → WS room → frontend progress bar
+8. Install blocked when server running (423) or no credentials (403)

From abcad12c58555e877eef23c18547cda1044542de Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 06:36:52 +0000
Subject: [PATCH 10/38] =?UTF-8?q?=E5=8A=9F=E8=83=BD:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=E7=89=88=E6=9C=AC=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=99=A8=EF=BC=88=E4=B8=8B=E8=BD=BD/=E6=9B=B4=E6=96=B0=20Facto?=
 =?UTF-8?q?rio=20=E6=9C=8D=E5=8A=A1=E7=AB=AF=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/routes.go                   |   4 +
 src/api/version_handler.go          |  77 ++++++++++
 src/factorio/version_manager.go     | 229 ++++++++++++++++++++++++++++
 src/go.mod                          |   1 +
 src/go.sum                          |   2 +
 ui/App/App.jsx                      |   2 +
 ui/App/components/Layout.jsx        |   1 +
 ui/App/views/ServerVersion.jsx      | 169 ++++++++++++++++++++
 ui/api/resources/server.js          |  14 ++
 ui/i18n.js                          |   4 +
 ui/locales/en/layout.json           |   1 +
 ui/locales/en/serverVersion.json    |  22 +++
 ui/locales/zh-CN/layout.json        |   1 +
 ui/locales/zh-CN/serverVersion.json |  22 +++
 14 files changed, 549 insertions(+)
 create mode 100644 src/api/version_handler.go
 create mode 100644 src/factorio/version_manager.go
 create mode 100644 ui/App/views/ServerVersion.jsx
 create mode 100644 ui/locales/en/serverVersion.json
 create mode 100644 ui/locales/zh-CN/serverVersion.json

diff --git a/src/api/routes.go b/src/api/routes.go
index 65650fee..8388cb53 100644
--- a/src/api/routes.go
+++ b/src/api/routes.go
@@ -122,6 +122,10 @@ func NewRouter() *mux.Router {
 		Methods("GET").
 		Name("Help").
 		Handler(http.StripPrefix("/help", http.FileServer(http.Dir("./app/"))))
+	subRouter.Path("/server-version").
+		Methods("GET").
+		Name("Server version").
+		Handler(http.StripPrefix("/server-version", http.FileServer(http.Dir("./app/"))))
 
 	// catch all route
 	mainRouter.PathPrefix("/").
diff --git a/src/api/version_handler.go b/src/api/version_handler.go
new file mode 100644
index 00000000..d678e55b
--- /dev/null
+++ b/src/api/version_handler.go
@@ -0,0 +1,77 @@
+package api
+
+import (
+	"encoding/json"
+	"fmt"
+	"log"
+	"net/http"
+
+	"github.com/OpenFactorioServerManager/factorio-server-manager/api/websocket"
+	"github.com/OpenFactorioServerManager/factorio-server-manager/factorio"
+)
+
+func GetCurrentVersion(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json;charset=UTF-8")
+
+	vm := factorio.NewVersionManager()
+	version, err := vm.GetCurrentVersion()
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		json.NewEncoder(w).Encode(map[string]string{"error": err.Error()})
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(map[string]string{"version": version})
+}
+
+func GetAvailableVersions(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json;charset=UTF-8")
+
+	vm := factorio.NewVersionManager()
+	releases, err := vm.GetAvailableVersions()
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		json.NewEncoder(w).Encode(map[string]string{"error": err.Error()})
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(releases)
+}
+
+func InstallVersion(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json;charset=UTF-8")
+
+	var data struct {
+		Version string `json:"version"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&data); err != nil {
+		w.WriteHeader(http.StatusBadRequest)
+		json.NewEncoder(w).Encode(map[string]string{"error": "invalid request body"})
+		return
+	}
+
+	vm := factorio.NewVersionManager()
+	wsRoom := websocket.WebsocketHub.GetRoom("server_version")
+
+	err := vm.DownloadAndInstall(data.Version, func(percent int) {
+		msg := fmt.Sprintf(`{"type":"download_progress","version":"%s","percent":%d}`, data.Version, percent)
+		wsRoom.Send(string(msg))
+	})
+
+	if err != nil {
+		log.Printf("Version install error: %v", err)
+		w.WriteHeader(http.StatusInternalServerError)
+		json.NewEncoder(w).Encode(map[string]string{"error": err.Error()})
+		return
+	}
+
+	wsRoom.Send(fmt.Sprintf(`{"type":"install_complete","version":"%s"}`, data.Version))
+
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(map[string]string{
+		"status":  "ok",
+		"version": data.Version,
+	})
+}
diff --git a/src/factorio/version_manager.go b/src/factorio/version_manager.go
new file mode 100644
index 00000000..ae694cc5
--- /dev/null
+++ b/src/factorio/version_manager.go
@@ -0,0 +1,229 @@
+package factorio
+
+import (
+	"archive/tar"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"strings"
+
+	"github.com/OpenFactorioServerManager/factorio-server-manager/bootstrap"
+	"github.com/ulikunitz/xz"
+)
+
+type Release struct {
+	Version string `json:"version"`
+	Stable  bool   `json:"stable"`
+	Latest  bool   `json:"latest,omitempty"`
+}
+
+type DownloadsResponse struct {
+	Stable       Release `json:"stable"`
+	Experimental Release `json:"experimental"`
+}
+
+type VersionManager struct {
+	FactorioDir    string
+	FactorioBinary string
+	Credentials    *Credentials
+}
+
+func (vm *VersionManager) GetCurrentVersion() (string, error) {
+	cmd := exec.Command(vm.FactorioBinary, "--version")
+	output, err := cmd.Output()
+	if err != nil {
+		return "", fmt.Errorf("failed to get current version: %w", err)
+	}
+	line := string(output)
+	return parseVersionLine(line)
+}
+
+func (vm *VersionManager) GetAvailableVersions() ([]Release, error) {
+	resp, err := http.Get("https://factorio.com/api/latest-releases")
+	if err != nil {
+		return nil, fmt.Errorf("failed to fetch releases: %w", err)
+	}
+	defer resp.Body.Close()
+
+	var data DownloadsResponse
+	if err := json.NewDecoder(resp.Body).Decode(&data); err != nil {
+		return nil, fmt.Errorf("failed to parse releases: %w", err)
+	}
+
+	releases := []Release{}
+	if data.Stable.Version != "" {
+		data.Stable.Latest = true
+		releases = append(releases, data.Stable)
+	}
+	if data.Experimental.Version != "" {
+		data.Experimental.Latest = false
+		releases = append(releases, data.Experimental)
+	}
+
+	return releases, nil
+}
+
+func (vm *VersionManager) DownloadAndInstall(version string, progressCb func(percent int)) error {
+	if vm.Credentials == nil || vm.Credentials.Userkey == "" {
+		return fmt.Errorf("Factorio.com credentials required. Log in via Mod Portal first.")
+	}
+
+	downloadURL := fmt.Sprintf("https://factorio.com/get-download/%s/headless/linux64", version)
+
+	tmpFile, err := os.CreateTemp("", "factorio-download-*.tar.xz")
+	if err != nil {
+		return fmt.Errorf("failed to create temp file: %w", err)
+	}
+	defer os.Remove(tmpFile.Name())
+	defer tmpFile.Close()
+
+	req, err := http.NewRequest("GET", downloadURL, nil)
+	if err != nil {
+		return fmt.Errorf("failed to create request: %w", err)
+	}
+	req.SetBasicAuth(vm.Credentials.Username, vm.Credentials.Userkey)
+
+	resp, err := http.DefaultClient.Do(req)
+	if err != nil {
+		return fmt.Errorf("download failed: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return fmt.Errorf("download failed with status %d (check your Factorio.com credentials)", resp.StatusCode)
+	}
+
+	contentLength := resp.ContentLength
+	pr := &ProgressReader{
+		Reader:     resp.Body,
+		Total:      contentLength,
+		OnProgress: progressCb,
+	}
+
+	_, err = io.Copy(tmpFile, pr)
+	if err != nil {
+		return fmt.Errorf("failed to save download: %w", err)
+	}
+	tmpFile.Close()
+
+	binDir := filepath.Dir(vm.FactorioBinary)
+	if err := os.MkdirAll(binDir, 0755); err != nil {
+		return fmt.Errorf("failed to create bin directory: %w", err)
+	}
+
+	err = extractTarXz(tmpFile.Name(), binDir)
+	if err != nil {
+		return fmt.Errorf("failed to extract: %w", err)
+	}
+
+	err = os.Chmod(vm.FactorioBinary, 0755)
+	if err != nil {
+		return fmt.Errorf("failed to make binary executable: %w", err)
+	}
+
+	return nil
+}
+
+type ProgressReader struct {
+	Reader     io.Reader
+	Total      int64
+	Current    int64
+	OnProgress func(percent int)
+}
+
+func (pr *ProgressReader) Read(p []byte) (int, error) {
+	n, err := pr.Reader.Read(p)
+	pr.Current += int64(n)
+	if pr.Total > 0 && pr.OnProgress != nil {
+		pct := int(float64(pr.Current) / float64(pr.Total) * 100)
+		pr.OnProgress(pct)
+	}
+	return n, err
+}
+
+func NewVersionManager() *VersionManager {
+	config := bootstrap.GetConfig()
+	var creds Credentials
+	creds.Load()
+	return &VersionManager{
+		FactorioDir:    config.FactorioDir,
+		FactorioBinary: config.FactorioBinary,
+		Credentials:    &creds,
+	}
+}
+
+func parseVersionLine(line string) (string, error) {
+	if idx := strings.Index(line, "Version:"); idx >= 0 {
+		rest := line[idx+len("Version:"):]
+		rest = strings.TrimSpace(rest)
+		if spaceIdx := strings.Index(rest, " "); spaceIdx > 0 {
+			return rest[:spaceIdx], nil
+		}
+		return rest, nil
+	}
+	lines := strings.Split(strings.TrimSpace(line), "\n")
+	if len(lines) > 0 {
+		return strings.TrimSpace(lines[0]), nil
+	}
+	return "", fmt.Errorf("could not parse version from: %s", line)
+}
+
+func extractTarXz(filePath string, destDir string) error {
+	f, err := os.Open(filePath)
+	if err != nil {
+		return err
+	}
+	defer f.Close()
+
+	xzReader, err := xz.NewReader(f)
+	if err != nil {
+		return err
+	}
+
+	tarReader := tar.NewReader(xzReader)
+
+	for {
+		header, err := tarReader.Next()
+		if err == io.EOF {
+			break
+		}
+		if err != nil {
+			return err
+		}
+
+		targetPath := header.Name
+		if strings.HasPrefix(targetPath, "factorio/") {
+			targetPath = targetPath[len("factorio/"):]
+		}
+		targetPath = filepath.Join(destDir, targetPath)
+
+		switch header.Typeflag {
+		case tar.TypeDir:
+			if err := os.MkdirAll(targetPath, 0755); err != nil {
+				return err
+			}
+		case tar.TypeReg:
+			if err := os.MkdirAll(filepath.Dir(targetPath), 0755); err != nil {
+				return err
+			}
+			outFile, err := os.Create(targetPath)
+			if err != nil {
+				return err
+			}
+			if _, err := io.Copy(outFile, tarReader); err != nil {
+				outFile.Close()
+				return err
+			}
+			outFile.Close()
+			if err := os.Chmod(targetPath, os.FileMode(header.Mode)); err != nil {
+				return err
+			}
+		}
+	}
+
+	return nil
+}
diff --git a/src/go.mod b/src/go.mod
index a0317317..527d22c8 100644
--- a/src/go.mod
+++ b/src/go.mod
@@ -31,6 +31,7 @@ require (
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+	github.com/ulikunitz/xz v0.5.15 // indirect
 	golang.org/x/sys v0.13.0 // indirect
 	gopkg.in/fsnotify.v1 v1.4.7 // indirect
 	gopkg.in/tomb.v1 v1.0.0-20141024135613-dd632973f1e7 // indirect
diff --git a/src/go.sum b/src/go.sum
index 1d72559b..a5efa7cb 100644
--- a/src/go.sum
+++ b/src/go.sum
@@ -57,6 +57,8 @@ github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcU
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
 github.com/syndtr/goleveldb v1.0.0 h1:fBdIW9lB4Iz0n9khmH8w27SJ3QEJ7+IgjPEwGSZiFdE=
 github.com/syndtr/goleveldb v1.0.0/go.mod h1:ZVVdQEZoIme9iO1Ch2Jdy24qqXrMMOU6lpPAyBWyWuQ=
+github.com/ulikunitz/xz v0.5.15 h1:9DNdB5s+SgV3bQ2ApL10xRc35ck0DuIX/isZvIk+ubY=
+github.com/ulikunitz/xz v0.5.15/go.mod h1:nbz6k7qbPmH4IRqmfOplQw/tblSgqTqBwxkY0oWt/14=
 golang.org/x/crypto v0.14.0 h1:wBqGXzWJW6m1XrIKlAH0Hs1JJ7+9KBwnIO8v66Q9cHc=
 golang.org/x/crypto v0.14.0/go.mod h1:MVFd36DqK4CsrnJYDkBA3VC4m2GkXAM0PvzMCn4JQf4=
 golang.org/x/net v0.0.0-20180906233101-161cd47e91fd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
diff --git a/ui/App/App.jsx b/ui/App/App.jsx
index 9ed229f0..623ae877 100644
--- a/ui/App/App.jsx
+++ b/ui/App/App.jsx
@@ -15,6 +15,7 @@ import ServerSettings from "./views/ServerSettings";
 import GameSettings from "./views/GameSettings";
 import Console from "./views/Console";
 import Help from "./views/Help";
+import ServerVersion from "./views/ServerVersion";
 import socket from "../api/socket";
 import {Flash} from "./components/Flash";
 
@@ -69,6 +70,7 @@ const App = () => {
                         <Route path="logs" element={<Logs serverStatus={serverStatus}/>}/>
                         <Route path="user-management" element={<UserManagement serverStatus={serverStatus}/>}/>
                         <Route path="help" element={<Help serverStatus={serverStatus}/>}/>
+                        <Route path="server-version" element={<ServerVersion serverStatus={serverStatus}/>}/>
                     </Route>
                 </Route>
             </Routes>
diff --git a/ui/App/components/Layout.jsx b/ui/App/components/Layout.jsx
index 87ccd14f..dccc4443 100644
--- a/ui/App/components/Layout.jsx
+++ b/ui/App/components/Layout.jsx
@@ -73,6 +73,7 @@ const Layout = ({handleLogout, serverStatus}) => {
                             <Link to="/">{t('linkControls', { ns: 'layout' })}</Link>
                             <Link to="/saves">{t('linkSaves', { ns: 'layout' })}</Link>
                             <Link to="/mods">{t('linkMods', { ns: 'layout' })}</Link>
+                            <Link to="/server-version">{t('linkServerVersion', { ns: 'layout' })}</Link>
                             <Link to="/server-settings">{t('linkServerSettings', { ns: 'layout' })}</Link>
                             <Link to="/game-settings">{t('linkGameSettings', { ns: 'layout' })}</Link>
                             <Link to="/console">{t('linkConsole', { ns: 'layout' })}</Link>
diff --git a/ui/App/views/ServerVersion.jsx b/ui/App/views/ServerVersion.jsx
new file mode 100644
index 00000000..32644693
--- /dev/null
+++ b/ui/App/views/ServerVersion.jsx
@@ -0,0 +1,169 @@
+import React, {useEffect, useState} from "react";
+import { useTranslation } from 'react-i18next';
+import Panel from "../components/Panel";
+import Button from "../components/Button";
+import server from "../../api/resources/server";
+import socket from "../../api/socket";
+
+const ServerVersion = ({serverStatus}) => {
+
+    const { t } = useTranslation('serverVersion');
+    const [currentVersion, setCurrentVersion] = useState(null);
+    const [availableVersions, setAvailableVersions] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isInstalling, setIsInstalling] = useState(false);
+    const [installVersion, setInstallVersion] = useState(null);
+    const [progress, setProgress] = useState(0);
+    const [error, setError] = useState(null);
+
+    const fetchData = async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const current = await server.version.current();
+            setCurrentVersion(current.version);
+        } catch (e) {
+            setError(t('fetchFailed'));
+        }
+        try {
+            const available = await server.version.available();
+            setAvailableVersions(available || []);
+        } catch (e) {
+            setError(t('fetchFailed'));
+        }
+        setIsLoading(false);
+    };
+
+    useEffect(() => {
+        fetchData();
+
+        const handleVersionMessage = (msg) => {
+            try {
+                const data = JSON.parse(typeof msg === 'string' ? msg : JSON.stringify(msg));
+                if (data.type === 'download_progress') {
+                    setProgress(data.percent);
+                } else if (data.type === 'install_complete') {
+                    setIsInstalling(false);
+                    setProgress(0);
+                    setCurrentVersion(data.version);
+                    window.flash(t('installSuccess').replace('{version}', data.version), "green");
+                }
+            } catch (e) {}
+        };
+
+        socket.on('server_version', handleVersionMessage);
+        return () => socket.off('server_version', handleVersionMessage);
+    }, []);
+
+    const handleInstall = async (version) => {
+        if (serverStatus && serverStatus.running) {
+            window.flash(t('serverMustBeStopped'), "red");
+            return;
+        }
+        setInstallVersion(version);
+        setIsInstalling(true);
+        setProgress(0);
+        setError(null);
+        try {
+            await server.version.install(version);
+        } catch (e) {
+            setError(t('installFailed').replace('{error}', e.message || ''));
+            setIsInstalling(false);
+        }
+    };
+
+    const hasUpdate = currentVersion && availableVersions.length > 0
+        && availableVersions[0].version !== currentVersion;
+
+    return (
+        <Panel
+            title={t('serverVersion')}
+            content={
+                <>
+                    {isLoading ? (
+                        <p className="text-gray-light">{t('checkingVersion')}</p>
+                    ) : (
+                        <>
+                            <div className="mb-6">
+                                <h2 className="text-dirty-white text-lg mb-2">{t('installedVersion')}</h2>
+                                <div className="bg-black rounded p-4 border border-gray-light">
+                                    <div className="flex items-center justify-between">
+                                        <div>
+                                            <span className="text-dirty-white font-bold">{currentVersion || t('unknown', { ns: 'common' })}</span>
+                                        </div>
+                                        <div>
+                                            {hasUpdate ? (
+                                                <span className="text-orange text-sm">{t('updateAvailable')}</span>
+                                            ) : (
+                                                <span className="text-green text-sm">{t('upToDate')}</span>
+                                            )}
+                                        </div>
+                                    </div>
+                                    {isInstalling && (
+                                        <div className="mt-3">
+                                            <div className="w-full bg-gray-dark rounded h-2">
+                                                <div
+                                                    className="bg-orange h-2 rounded transition-all duration-300"
+                                                    style={{width: `${progress}%`}}
+                                                />
+                                            </div>
+                                            <p className="text-sm text-gray-light mt-1">
+                                                {t('downloadProgress').replace('{percent}', progress)}
+                                            </p>
+                                        </div>
+                                    )}
+                                    {error && (
+                                        <p className="text-red text-sm mt-2">{error}</p>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div>
+                                <h2 className="text-dirty-white text-lg mb-2">{t('availableVersions')}</h2>
+                                <div className="bg-black rounded border border-gray-light">
+                                    {availableVersions.length === 0 ? (
+                                        <p className="p-4 text-gray-light">{t('noInternet')}</p>
+                                    ) : (
+                                        <div className="divide-y divide-gray-light">
+                                            {availableVersions.map((release, i) => (
+                                                <div key={release.version} className="flex items-center justify-between p-3">
+                                                    <div className="flex items-center space-x-2">
+                                                        <span className="text-dirty-white">{release.version}</span>
+                                                        {i === 0 && (
+                                                            <span className="text-xs bg-green text-black px-1 rounded">{t('latest')}</span>
+                                                        )}
+                                                    </div>
+                                                    <Button
+                                                        size="sm"
+                                                        isLoading={isInstalling && installVersion === release.version}
+                                                        isDisabled={isInstalling || currentVersion === release.version}
+                                                        onClick={() => handleInstall(release.version)}
+                                                    >
+                                                        {currentVersion === release.version ? t('current') : t('install')}
+                                                    </Button>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+
+                            {hasUpdate && !isInstalling && (
+                                <div className="mt-4 text-center">
+                                    <Button
+                                        type="success"
+                                        onClick={() => handleInstall(availableVersions[0].version)}
+                                    >
+                                        {t('updateTo').replace('{version}', availableVersions[0].version)}
+                                    </Button>
+                                </div>
+                            )}
+                        </>
+                    )}
+                </>
+            }
+        />
+    )
+};
+
+export default ServerVersion;
diff --git a/ui/api/resources/server.js b/ui/api/resources/server.js
index 38d8b548..0e63f8d4 100644
--- a/ui/api/resources/server.js
+++ b/ui/api/resources/server.js
@@ -24,5 +24,19 @@ export default {
     kill: async () => {
         const response = await client.get('/api/server/kill');
         return response.data;
+    },
+    version: {
+        current: async () => {
+            const response = await client.get('/api/server/version/current');
+            return response.data;
+        },
+        available: async () => {
+            const response = await client.get('/api/server/version/available');
+            return response.data;
+        },
+        install: async (version) => {
+            const response = await client.post('/api/server/version/install', { version });
+            return response.data;
+        }
     }
 }
\ No newline at end of file
diff --git a/ui/i18n.js b/ui/i18n.js
index d730fa9e..b72f8925 100644
--- a/ui/i18n.js
+++ b/ui/i18n.js
@@ -12,6 +12,7 @@ import enServerSettings from './locales/en/serverSettings.json';
 import enLogs from './locales/en/logs.json';
 import enConsole from './locales/en/console.json';
 import enUserManagement from './locales/en/userManagement.json';
+import enServerVersion from './locales/en/serverVersion.json';
 
 // Chinese locale files
 import zhCommon from './locales/zh-CN/common.json';
@@ -23,6 +24,7 @@ import zhServerSettings from './locales/zh-CN/serverSettings.json';
 import zhLogs from './locales/zh-CN/logs.json';
 import zhConsole from './locales/zh-CN/console.json';
 import zhUserManagement from './locales/zh-CN/userManagement.json';
+import zhServerVersion from './locales/zh-CN/serverVersion.json';
 
 const resources = {
   en: {
@@ -35,6 +37,7 @@ const resources = {
     logs: enLogs,
     console: enConsole,
     userManagement: enUserManagement,
+    serverVersion: enServerVersion,
   },
   'zh-CN': {
     common: zhCommon,
@@ -46,6 +49,7 @@ const resources = {
     logs: zhLogs,
     console: zhConsole,
     userManagement: zhUserManagement,
+    serverVersion: zhServerVersion,
   },
 };
 
diff --git a/ui/locales/en/layout.json b/ui/locales/en/layout.json
index 3b744066..83a7e7a9 100644
--- a/ui/locales/en/layout.json
+++ b/ui/locales/en/layout.json
@@ -6,6 +6,7 @@
   "linkControls": "Controls",
   "linkSaves": "Saves",
   "linkMods": "Mods",
+  "linkServerVersion": "Server Version",
   "linkServerSettings": "Server Settings",
   "linkGameSettings": "Game Settings",
   "linkConsole": "Console",
diff --git a/ui/locales/en/serverVersion.json b/ui/locales/en/serverVersion.json
new file mode 100644
index 00000000..1c94f397
--- /dev/null
+++ b/ui/locales/en/serverVersion.json
@@ -0,0 +1,22 @@
+{
+  "serverVersion": "Server Version",
+  "installedVersion": "Installed Version",
+  "availableVersions": "Available Versions",
+  "current": "Current",
+  "status": "Status",
+  "upToDate": "Up to date",
+  "updateAvailable": "Update Available",
+  "latest": "latest",
+  "install": "Install",
+  "updateTo": "Update to {version}",
+  "downloadProgress": "Downloading... {percent}%",
+  "downloadComplete": "Download complete.",
+  "installSuccess": "Factorio {version} installed successfully.",
+  "installFailed": "Installation failed: {error}",
+  "checkingVersion": "Checking version...",
+  "serverMustBeStopped": "Server must be stopped before updating.",
+  "confirmInstall": "Installing a new Factorio version will replace the current server binary. The server must be stopped. Continue?",
+  "noTokenError": "Factorio.com authentication required. Please log in via the Mods page first.",
+  "fetchFailed": "Failed to fetch available versions.",
+  "noInternet": "Cannot reach Factorio API. Check your internet connection."
+}
diff --git a/ui/locales/zh-CN/layout.json b/ui/locales/zh-CN/layout.json
index 84353f39..dcca2e8c 100644
--- a/ui/locales/zh-CN/layout.json
+++ b/ui/locales/zh-CN/layout.json
@@ -6,6 +6,7 @@
   "linkControls": "控制面板",
   "linkSaves": "存档",
   "linkMods": "模组",
+  "linkServerVersion": "服务器版本",
   "linkServerSettings": "服务器设置",
   "linkGameSettings": "游戏设置",
   "linkConsole": "控制台",
diff --git a/ui/locales/zh-CN/serverVersion.json b/ui/locales/zh-CN/serverVersion.json
new file mode 100644
index 00000000..b7a90be3
--- /dev/null
+++ b/ui/locales/zh-CN/serverVersion.json
@@ -0,0 +1,22 @@
+{
+  "serverVersion": "服务器版本",
+  "installedVersion": "已安装版本",
+  "availableVersions": "可用版本",
+  "current": "当前",
+  "status": "状态",
+  "upToDate": "已是最新",
+  "updateAvailable": "有新版本可用",
+  "latest": "最新",
+  "install": "安装",
+  "updateTo": "更新至 {version}",
+  "downloadProgress": "下载中... {percent}%",
+  "downloadComplete": "下载完成。",
+  "installSuccess": "Factorio {version} 安装成功。",
+  "installFailed": "安装失败: {error}",
+  "checkingVersion": "检查版本中...",
+  "serverMustBeStopped": "更新前必须停止服务器。",
+  "confirmInstall": "安装新版本将替换当前服务器二进制文件。服务器必须处于停止状态。确认继续？",
+  "noTokenError": "需要 Factorio.com 认证。请先在模组页面登录。",
+  "fetchFailed": "获取可用版本失败。",
+  "noInternet": "无法连接 Factorio API。请检查网络连接。"
+}

From 2ef2054449d9616efb2ded54f15c8580fdd0011b Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 07:01:06 +0000
Subject: [PATCH 11/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=99=A8=E7=89=88=E6=9C=AC=E7=AE=A1=E7=90=86=E5=99=A8=20API=20?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E6=B3=A8=E5=86=8C=20+=20Factorio=20API=20?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/routes.go               | 18 ++++++++++++++++++
 src/factorio/version_manager.go | 16 ++++++++--------
 src/go.mod                      |  3 ++-
 src/go.sum                      | 14 --------------
 4 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/api/routes.go b/src/api/routes.go
index 8388cb53..dd957fad 100644
--- a/src/api/routes.go
+++ b/src/api/routes.go
@@ -265,6 +265,24 @@ var apiRoutes = Routes{
 		"/settings/update",
 		UpdateServerSettings,
 		false,
+	}, {
+		"GetCurrentVersion",
+		"GET",
+		"/server/version/current",
+		GetCurrentVersion,
+		false,
+	}, {
+		"GetAvailableVersions",
+		"GET",
+		"/server/version/available",
+		GetAvailableVersions,
+		false,
+	}, {
+		"InstallVersion",
+		"POST",
+		"/server/version/install",
+		InstallVersion,
+		true,
 	},
 	// Mod Portal Stuff
 	{
diff --git a/src/factorio/version_manager.go b/src/factorio/version_manager.go
index ae694cc5..64ccbc76 100644
--- a/src/factorio/version_manager.go
+++ b/src/factorio/version_manager.go
@@ -21,9 +21,11 @@ type Release struct {
 	Latest  bool   `json:"latest,omitempty"`
 }
 
+type VersionData map[string]string
+
 type DownloadsResponse struct {
-	Stable       Release `json:"stable"`
-	Experimental Release `json:"experimental"`
+	Stable       VersionData `json:"stable"`
+	Experimental VersionData `json:"experimental"`
 }
 
 type VersionManager struct {
@@ -55,13 +57,11 @@ func (vm *VersionManager) GetAvailableVersions() ([]Release, error) {
 	}
 
 	releases := []Release{}
-	if data.Stable.Version != "" {
-		data.Stable.Latest = true
-		releases = append(releases, data.Stable)
+	if v, ok := data.Stable["headless"]; ok && v != "" {
+		releases = append(releases, Release{Version: v, Stable: true, Latest: true})
 	}
-	if data.Experimental.Version != "" {
-		data.Experimental.Latest = false
-		releases = append(releases, data.Experimental)
+	if v, ok := data.Experimental["headless"]; ok && v != "" {
+		releases = append(releases, Release{Version: v, Stable: false, Latest: false})
 	}
 
 	return releases, nil
diff --git a/src/go.mod b/src/go.mod
index 527d22c8..7976cc94 100644
--- a/src/go.mod
+++ b/src/go.mod
@@ -20,6 +20,8 @@ require (
 	gorm.io/gorm v1.25.5
 )
 
+require github.com/ulikunitz/xz v0.5.15
+
 require (
 	github.com/davecgh/go-spew v1.1.1 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
@@ -31,7 +33,6 @@ require (
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
-	github.com/ulikunitz/xz v0.5.15 // indirect
 	golang.org/x/sys v0.13.0 // indirect
 	gopkg.in/fsnotify.v1 v1.4.7 // indirect
 	gopkg.in/tomb.v1 v1.0.0-20141024135613-dd632973f1e7 // indirect
diff --git a/src/go.sum b/src/go.sum
index a5efa7cb..c66be843 100644
--- a/src/go.sum
+++ b/src/go.sum
@@ -17,8 +17,6 @@ github.com/golang/snappy v0.0.0-20180518054509-2e65f85255db/go.mod h1:/XxbfmMg8l
 github.com/golang/snappy v0.0.4 h1:yAGX7huGHXlcLOEtBnF4w7FQwA26wojNCwOYAEhLjQM=
 github.com/golang/snappy v0.0.4/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q=
 github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26 h1:Xim43kblpZXfIBQsbuBVKCudVG457BR2GZFIz3uw3hQ=
-github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
-github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/google/uuid v1.4.0 h1:MtMxsa51/r9yyhkyLsVeVt0B+BGQZzpQiTQ4eHZ8bc4=
 github.com/google/uuid v1.4.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/gorilla/mux v1.8.0 h1:i40aqfkR1h2SlN9hojwV5ZA91wcXFOvkdNIeFDP5koI=
@@ -39,8 +37,6 @@ github.com/jinzhu/now v1.1.5 h1:/o9tlHleP7gOFmsnYNz3RGnqzefHA47wQpKrrdTIwXQ=
 github.com/jinzhu/now v1.1.5/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
 github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
 github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
-github.com/mattn/go-isatty v0.0.17 h1:BTarxUcIeDqL27Mc+vyvdWYSL28zpIhv3RoTdsLMPng=
-github.com/mattn/go-isatty v0.0.17/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/onsi/ginkgo v1.6.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
@@ -50,7 +46,6 @@ github.com/onsi/gomega v1.4.3 h1:RE1xgDvH7imwFD45h+u2SgIfERHlS2yNG4DObb5BSKU=
 github.com/onsi/gomega v1.4.3/go.mod h1:ex+gbHU/CVuBBDIJjb2X0qEXbFg53c61hWP/1CpauHY=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/remyoudompheng/bigfft v0.0.0-20200410134404-eec4a21b6bb0/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
 github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
@@ -67,7 +62,6 @@ golang.org/x/net v0.17.0/go.mod h1:NxSsAGuq816PNPmqtQdLE42eU2Fs7NoRIZrHJAlaCOE=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sys v0.0.0-20180909124046-d0be0721c37e/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20210320140829-1e4c9ba3b0c4/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.13.0 h1:Af8nKPmuFypiUBjVoU9V20FiaFXOcuZI21p0ycVYYGE=
 golang.org/x/sys v0.13.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
@@ -85,19 +79,11 @@ gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gorm.io/gorm v1.25.5 h1:zR9lOiiYf09VNh5Q1gphfyia1JpiClIWG9hQaxB/mls=
 gorm.io/gorm v1.25.5/go.mod h1:hbnx/Oo0ChWMn1BIhpy1oYozzpM15i4YPuHDmfYtwg8=
-modernc.org/libc v1.22.5 h1:91BNch/e5B0uPbJFgqbxXuOnxBQjlS//icfQEGmvyjE=
-modernc.org/libc v1.22.5/go.mod h1:jj+Z7dTNX8fBScMVNRAYZ/jF91K8fdT2hYMThc3YjBY=
 modernc.org/libc v1.29.0 h1:tTFRFq69YKCF2QyGNuRUQxKBm1uZZLubf6Cjh/pVHXs=
 modernc.org/libc v1.29.0/go.mod h1:DaG/4Q3LRRdqpiLyP0C2m1B8ZMGkQ+cCgOIjEtQlYhQ=
-modernc.org/mathutil v1.5.0 h1:rV0Ko/6SfM+8G+yKiyI830l3Wuz1zRutdslNoQ0kfiQ=
-modernc.org/mathutil v1.5.0/go.mod h1:mZW8CKdRPY1v87qxC/wUdX5O1qDzXMP5TH3wjfpga6E=
 modernc.org/mathutil v1.6.0 h1:fRe9+AmYlaej+64JsEEhoWuAYBkOtQiMEU7n/XgfYi4=
 modernc.org/mathutil v1.6.0/go.mod h1:Ui5Q9q1TR2gFm0AQRqQUaBWFLAhQpCwNcuhBOSedWPo=
-modernc.org/memory v1.5.0 h1:N+/8c5rE6EqugZwHii4IFsaJ7MUhoWX07J5tC/iI5Ds=
-modernc.org/memory v1.5.0/go.mod h1:PkUhL0Mugw21sHPeskwZW4D6VscE/GQJOnIpCnW6pSU=
 modernc.org/memory v1.7.2 h1:Klh90S215mmH8c9gO98QxQFsY+W451E8AnzjoE2ee1E=
 modernc.org/memory v1.7.2/go.mod h1:NO4NVCQy0N7ln+T9ngWqOQfi7ley4vpwvARR+Hjw95E=
-modernc.org/sqlite v1.23.1 h1:nrSBg4aRQQwq59JpvGEQ15tNxoO5pX/kUjcRNwSAGQM=
-modernc.org/sqlite v1.23.1/go.mod h1:OrDj17Mggn6MhE+iPbBNf7RGKODDE9NFT0f3EwDzJqk=
 modernc.org/sqlite v1.27.0 h1:MpKAHoyYB7xqcwnUwkuD+npwEa0fojF0B5QRbN+auJ8=
 modernc.org/sqlite v1.27.0/go.mod h1:Qxpazz0zH8Z1xCFyi5GSL3FzbtZ3fvbjmywNogldEW0=

From 4400b99bf39ab17a423d62f76ce84ab166d63ff7 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 07:02:40 +0000
Subject: [PATCH 12/38] =?UTF-8?q?=E8=B0=83=E6=95=B4:=20=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=8C=BA=E5=88=86=E7=A8=B3=E5=AE=9A=E7=89=88?=
 =?UTF-8?q?=EF=BC=88=E7=BB=BF=E8=89=B2=EF=BC=89=E4=B8=8E=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E7=89=88=EF=BC=88=E6=A9=99=E8=89=B2=EF=BC=89=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/App/views/ServerVersion.jsx      | 7 ++++++-
 ui/locales/en/serverVersion.json    | 2 ++
 ui/locales/zh-CN/serverVersion.json | 2 ++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/App/views/ServerVersion.jsx b/ui/App/views/ServerVersion.jsx
index 32644693..a3228c91 100644
--- a/ui/App/views/ServerVersion.jsx
+++ b/ui/App/views/ServerVersion.jsx
@@ -129,8 +129,13 @@ const ServerVersion = ({serverStatus}) => {
                                                 <div key={release.version} className="flex items-center justify-between p-3">
                                                     <div className="flex items-center space-x-2">
                                                         <span className="text-dirty-white">{release.version}</span>
+                                                        {release.stable ? (
+                                                            <span className="text-xs bg-green text-black px-1 rounded">{t('stable')}</span>
+                                                        ) : (
+                                                            <span className="text-xs bg-orange text-black px-1 rounded">{t('experimental')}</span>
+                                                        )}
                                                         {i === 0 && (
-                                                            <span className="text-xs bg-green text-black px-1 rounded">{t('latest')}</span>
+                                                            <span className="text-xs bg-blue text-white px-1 rounded">{t('latest')}</span>
                                                         )}
                                                     </div>
                                                     <Button
diff --git a/ui/locales/en/serverVersion.json b/ui/locales/en/serverVersion.json
index 1c94f397..f658c58f 100644
--- a/ui/locales/en/serverVersion.json
+++ b/ui/locales/en/serverVersion.json
@@ -7,6 +7,8 @@
   "upToDate": "Up to date",
   "updateAvailable": "Update Available",
   "latest": "latest",
+  "stable": "stable",
+  "experimental": "experimental",
   "install": "Install",
   "updateTo": "Update to {version}",
   "downloadProgress": "Downloading... {percent}%",
diff --git a/ui/locales/zh-CN/serverVersion.json b/ui/locales/zh-CN/serverVersion.json
index b7a90be3..bdebe0a4 100644
--- a/ui/locales/zh-CN/serverVersion.json
+++ b/ui/locales/zh-CN/serverVersion.json
@@ -7,6 +7,8 @@
   "upToDate": "已是最新",
   "updateAvailable": "有新版本可用",
   "latest": "最新",
+  "stable": "稳定版",
+  "experimental": "测试版",
   "install": "安装",
   "updateTo": "更新至 {version}",
   "downloadProgress": "下载中... {percent}%",

From b77795c44620d3854c1f1c442285ff150eb30da6 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 07:10:10 +0000
Subject: [PATCH 13/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E5=AE=89=E8=A3=85=E8=A7=A3=E5=8E=8B=E8=B7=AF=E5=BE=84=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3=E4=B8=BA=20FactorioDir=20=E6=A0=B9=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/factorio/version_manager.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/factorio/version_manager.go b/src/factorio/version_manager.go
index 64ccbc76..014d1c37 100644
--- a/src/factorio/version_manager.go
+++ b/src/factorio/version_manager.go
@@ -115,7 +115,7 @@ func (vm *VersionManager) DownloadAndInstall(version string, progressCb func(per
 		return fmt.Errorf("failed to create bin directory: %w", err)
 	}
 
-	err = extractTarXz(tmpFile.Name(), binDir)
+	err = extractTarXz(tmpFile.Name(), vm.FactorioDir)
 	if err != nil {
 		return fmt.Errorf("failed to extract: %w", err)
 	}

From a5a01e4d17a2b497ec5b02909b860e296c7fb931 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 07:16:53 +0000
Subject: [PATCH 14/38] =?UTF-8?q?=E5=8A=9F=E8=83=BD:=20=E9=9B=86=E6=88=90?=
 =?UTF-8?q?=20updater.factorio.com=20=E5=AE=8C=E6=95=B4=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=94=AF=E6=8C=81=E9=99=8D=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/routes.go                   |  6 ++++
 src/api/version_handler.go          | 15 ++++++++++
 src/factorio/version_manager.go     | 46 +++++++++++++++++++++++++++++
 ui/App/views/ServerVersion.jsx      | 39 ++++++++++++++++++++----
 ui/api/resources/server.js          |  4 +++
 ui/locales/en/serverVersion.json    |  4 ++-
 ui/locales/zh-CN/serverVersion.json |  4 ++-
 7 files changed, 110 insertions(+), 8 deletions(-)

diff --git a/src/api/routes.go b/src/api/routes.go
index dd957fad..2106b2c8 100644
--- a/src/api/routes.go
+++ b/src/api/routes.go
@@ -277,6 +277,12 @@ var apiRoutes = Routes{
 		"/server/version/available",
 		GetAvailableVersions,
 		false,
+	}, {
+		"GetFullVersionList",
+		"GET",
+		"/server/version/list",
+		GetFullVersionList,
+		false,
 	}, {
 		"InstallVersion",
 		"POST",
diff --git a/src/api/version_handler.go b/src/api/version_handler.go
index d678e55b..893448c8 100644
--- a/src/api/version_handler.go
+++ b/src/api/version_handler.go
@@ -40,6 +40,21 @@ func GetAvailableVersions(w http.ResponseWriter, r *http.Request) {
 	json.NewEncoder(w).Encode(releases)
 }
 
+func GetFullVersionList(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json;charset=UTF-8")
+
+	vm := factorio.NewVersionManager()
+	releases, err := vm.GetFullVersionList()
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		json.NewEncoder(w).Encode(map[string]string{"error": err.Error()})
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(releases)
+}
+
 func InstallVersion(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "application/json;charset=UTF-8")
 
diff --git a/src/factorio/version_manager.go b/src/factorio/version_manager.go
index 014d1c37..bd194547 100644
--- a/src/factorio/version_manager.go
+++ b/src/factorio/version_manager.go
@@ -67,6 +67,52 @@ func (vm *VersionManager) GetAvailableVersions() ([]Release, error) {
 	return releases, nil
 }
 
+type UpdaterResponse map[string][]struct {
+	From string `json:"from"`
+	To   string `json:"to"`
+}
+
+func (vm *VersionManager) GetFullVersionList() ([]Release, error) {
+	if vm.Credentials == nil || vm.Credentials.Userkey == "" {
+		return nil, fmt.Errorf("Factorio.com credentials required")
+	}
+
+	url := fmt.Sprintf("https://updater.factorio.com/get-available-versions?username=%s&token=%s&apiVersion=2",
+		vm.Credentials.Username, vm.Credentials.Userkey)
+
+	resp, err := http.Get(url)
+	if err != nil {
+		return nil, fmt.Errorf("failed to fetch version list: %w", err)
+	}
+	defer resp.Body.Close()
+
+	var data UpdaterResponse
+	if err := json.NewDecoder(resp.Body).Decode(&data); err != nil {
+		return nil, fmt.Errorf("failed to parse version list: %w", err)
+	}
+
+	seen := make(map[string]bool)
+	releases := []Release{}
+
+	updates, ok := data["core-linux_headless64"]
+	if !ok {
+		return nil, fmt.Errorf("no headless packages found")
+	}
+
+	for _, u := range updates {
+		if !seen[u.To] {
+			seen[u.To] = true
+			releases = append(releases, Release{Version: u.To, Stable: false, Latest: false})
+		}
+	}
+
+	if len(releases) > 0 {
+		releases[len(releases)-1].Stable = false
+	}
+
+	return releases, nil
+}
+
 func (vm *VersionManager) DownloadAndInstall(version string, progressCb func(percent int)) error {
 	if vm.Credentials == nil || vm.Credentials.Userkey == "" {
 		return fmt.Errorf("Factorio.com credentials required. Log in via Mod Portal first.")
diff --git a/ui/App/views/ServerVersion.jsx b/ui/App/views/ServerVersion.jsx
index a3228c91..3fb07c5f 100644
--- a/ui/App/views/ServerVersion.jsx
+++ b/ui/App/views/ServerVersion.jsx
@@ -15,6 +15,8 @@ const ServerVersion = ({serverStatus}) => {
     const [installVersion, setInstallVersion] = useState(null);
     const [progress, setProgress] = useState(0);
     const [error, setError] = useState(null);
+    const [showAll, setShowAll] = useState(false);
+    const [allVersions, setAllVersions] = useState([]);
 
     const fetchData = async () => {
         setIsLoading(true);
@@ -55,6 +57,25 @@ const ServerVersion = ({serverStatus}) => {
         return () => socket.off('server_version', handleVersionMessage);
     }, []);
 
+    const toggleAllVersions = async () => {
+        if (showAll) {
+            setShowAll(false);
+            return;
+        }
+        if (allVersions.length === 0) {
+            try {
+                const list = await server.version.list();
+                setAllVersions(list || []);
+            } catch (e) {
+                setError(t('fetchFailed'));
+                return;
+            }
+        }
+        setShowAll(true);
+    };
+
+    const displayVersions = showAll && allVersions.length > 0 ? allVersions : availableVersions;
+
     const handleInstall = async (version) => {
         if (serverStatus && serverStatus.running) {
             window.flash(t('serverMustBeStopped'), "red");
@@ -121,20 +142,20 @@ const ServerVersion = ({serverStatus}) => {
                             <div>
                                 <h2 className="text-dirty-white text-lg mb-2">{t('availableVersions')}</h2>
                                 <div className="bg-black rounded border border-gray-light">
-                                    {availableVersions.length === 0 ? (
+                                    {displayVersions.length === 0 ? (
                                         <p className="p-4 text-gray-light">{t('noInternet')}</p>
                                     ) : (
                                         <div className="divide-y divide-gray-light">
-                                            {availableVersions.map((release, i) => (
+                                            {displayVersions.map((release, i) => (
                                                 <div key={release.version} className="flex items-center justify-between p-3">
                                                     <div className="flex items-center space-x-2">
                                                         <span className="text-dirty-white">{release.version}</span>
-                                                        {release.stable ? (
+                                                        {!showAll && release.stable ? (
                                                             <span className="text-xs bg-green text-black px-1 rounded">{t('stable')}</span>
-                                                        ) : (
+                                                        ) : (!showAll ? (
                                                             <span className="text-xs bg-orange text-black px-1 rounded">{t('experimental')}</span>
-                                                        )}
-                                                        {i === 0 && (
+                                                        ) : null)}
+                                                        {!showAll && i === 0 && (
                                                             <span className="text-xs bg-blue text-white px-1 rounded">{t('latest')}</span>
                                                         )}
                                                     </div>
@@ -153,6 +174,12 @@ const ServerVersion = ({serverStatus}) => {
                                 </div>
                             </div>
 
+                            <div className="mt-2 text-center">
+                                <Button size="sm" type="default" onClick={toggleAllVersions}>
+                                    {showAll ? t('showLatest') : t('showAll')}
+                                </Button>
+                            </div>
+
                             {hasUpdate && !isInstalling && (
                                 <div className="mt-4 text-center">
                                     <Button
diff --git a/ui/api/resources/server.js b/ui/api/resources/server.js
index 0e63f8d4..7bfea169 100644
--- a/ui/api/resources/server.js
+++ b/ui/api/resources/server.js
@@ -34,6 +34,10 @@ export default {
             const response = await client.get('/api/server/version/available');
             return response.data;
         },
+        list: async () => {
+            const response = await client.get('/api/server/version/list');
+            return response.data;
+        },
         install: async (version) => {
             const response = await client.post('/api/server/version/install', { version });
             return response.data;
diff --git a/ui/locales/en/serverVersion.json b/ui/locales/en/serverVersion.json
index f658c58f..5cd1043c 100644
--- a/ui/locales/en/serverVersion.json
+++ b/ui/locales/en/serverVersion.json
@@ -20,5 +20,7 @@
   "confirmInstall": "Installing a new Factorio version will replace the current server binary. The server must be stopped. Continue?",
   "noTokenError": "Factorio.com authentication required. Please log in via the Mods page first.",
   "fetchFailed": "Failed to fetch available versions.",
-  "noInternet": "Cannot reach Factorio API. Check your internet connection."
+  "noInternet": "Cannot reach Factorio API. Check your internet connection.",
+  "showAll": "Show All Versions",
+  "showLatest": "Show Latest Only"
 }
diff --git a/ui/locales/zh-CN/serverVersion.json b/ui/locales/zh-CN/serverVersion.json
index bdebe0a4..6ad4ff45 100644
--- a/ui/locales/zh-CN/serverVersion.json
+++ b/ui/locales/zh-CN/serverVersion.json
@@ -20,5 +20,7 @@
   "confirmInstall": "安装新版本将替换当前服务器二进制文件。服务器必须处于停止状态。确认继续？",
   "noTokenError": "需要 Factorio.com 认证。请先在模组页面登录。",
   "fetchFailed": "获取可用版本失败。",
-  "noInternet": "无法连接 Factorio API。请检查网络连接。"
+  "noInternet": "无法连接 Factorio API。请检查网络连接。",
+  "showAll": "显示全部版本",
+  "showLatest": "仅显示最新"
 }

From d86220260da36c7c57dbb335375f231bceb912f7 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 07:19:37 +0000
Subject: [PATCH 15/38] =?UTF-8?q?=E8=B0=83=E6=95=B4:=20=E5=AE=8C=E6=95=B4?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=88=97=E8=A1=A8=E6=8C=89=E7=A8=B3=E5=AE=9A?=
 =?UTF-8?q?=E7=89=88/=E6=B5=8B=E8=AF=95=E7=89=88=E5=88=86=E6=A0=8F?=
 =?UTF-8?q?=EF=BC=8C=E4=BB=8E=E6=96=B0=E5=88=B0=E6=97=A7=E6=8E=92=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/factorio/version_manager.go | 16 ++++++-
 ui/App/views/ServerVersion.jsx  | 76 +++++++++++++++++++++++----------
 2 files changed, 68 insertions(+), 24 deletions(-)

diff --git a/src/factorio/version_manager.go b/src/factorio/version_manager.go
index bd194547..c43045a1 100644
--- a/src/factorio/version_manager.go
+++ b/src/factorio/version_manager.go
@@ -102,7 +102,11 @@ func (vm *VersionManager) GetFullVersionList() ([]Release, error) {
 	for _, u := range updates {
 		if !seen[u.To] {
 			seen[u.To] = true
-			releases = append(releases, Release{Version: u.To, Stable: false, Latest: false})
+			releases = append(releases, Release{
+				Version: u.To,
+				Stable:  isStableVersion(u.To),
+				Latest:  false,
+			})
 		}
 	}
 
@@ -202,6 +206,16 @@ func NewVersionManager() *VersionManager {
 	}
 }
 
+func isStableVersion(version string) bool {
+	parts := strings.Split(version, ".")
+	if len(parts) < 3 {
+		return false
+	}
+	var patch int
+	fmt.Sscanf(parts[len(parts)-1], "%d", &patch)
+	return patch%2 == 0
+}
+
 func parseVersionLine(line string) (string, error) {
 	if idx := strings.Index(line, "Version:"); idx >= 0 {
 		rest := line[idx+len("Version:"):]
diff --git a/ui/App/views/ServerVersion.jsx b/ui/App/views/ServerVersion.jsx
index 3fb07c5f..bd723d2d 100644
--- a/ui/App/views/ServerVersion.jsx
+++ b/ui/App/views/ServerVersion.jsx
@@ -76,6 +76,33 @@ const ServerVersion = ({serverStatus}) => {
 
     const displayVersions = showAll && allVersions.length > 0 ? allVersions : availableVersions;
 
+    const stableReleases = displayVersions.filter(r => r.stable);
+    const experimentalReleases = displayVersions.filter(r => !r.stable);
+
+    const renderVersionRow = (release) => (
+        <div key={release.version} className="flex items-center justify-between p-3">
+            <div className="flex items-center space-x-2">
+                <span className="text-dirty-white">{release.version}</span>
+                {!showAll && release.stable ? (
+                    <span className="text-xs bg-green text-black px-1 rounded">{t('stable')}</span>
+                ) : (!showAll ? (
+                    <span className="text-xs bg-orange text-black px-1 rounded">{t('experimental')}</span>
+                ) : null)}
+                {!showAll && displayVersions.indexOf(release) === 0 && (
+                    <span className="text-xs bg-blue text-white px-1 rounded">{t('latest')}</span>
+                )}
+            </div>
+            <Button
+                size="sm"
+                isLoading={isInstalling && installVersion === release.version}
+                isDisabled={isInstalling || currentVersion === release.version}
+                onClick={() => handleInstall(release.version)}
+            >
+                {currentVersion === release.version ? t('current') : t('install')}
+            </Button>
+        </div>
+    );
+
     const handleInstall = async (version) => {
         if (serverStatus && serverStatus.running) {
             window.flash(t('serverMustBeStopped'), "red");
@@ -144,31 +171,34 @@ const ServerVersion = ({serverStatus}) => {
                                 <div className="bg-black rounded border border-gray-light">
                                     {displayVersions.length === 0 ? (
                                         <p className="p-4 text-gray-light">{t('noInternet')}</p>
-                                    ) : (
-                                        <div className="divide-y divide-gray-light">
-                                            {displayVersions.map((release, i) => (
-                                                <div key={release.version} className="flex items-center justify-between p-3">
-                                                    <div className="flex items-center space-x-2">
-                                                        <span className="text-dirty-white">{release.version}</span>
-                                                        {!showAll && release.stable ? (
-                                                            <span className="text-xs bg-green text-black px-1 rounded">{t('stable')}</span>
-                                                        ) : (!showAll ? (
-                                                            <span className="text-xs bg-orange text-black px-1 rounded">{t('experimental')}</span>
-                                                        ) : null)}
-                                                        {!showAll && i === 0 && (
-                                                            <span className="text-xs bg-blue text-white px-1 rounded">{t('latest')}</span>
-                                                        )}
+                                    ) : showAll ? (
+                                        <div>
+                                            {stableReleases.length > 0 && (
+                                                <div className="mb-4">
+                                                    <div className="px-3 py-2 bg-gray-dark">
+                                                        <span className="text-green font-bold">{t('stable')}</span>
+                                                        <span className="text-gray-light text-sm ml-2">({stableReleases.length})</span>
+                                                    </div>
+                                                    <div className="divide-y divide-gray-light">
+                                                        {stableReleases.map(r => renderVersionRow(r))}
+                                                    </div>
+                                                </div>
+                                            )}
+                                            {experimentalReleases.length > 0 && (
+                                                <div>
+                                                    <div className="px-3 py-2 bg-gray-dark">
+                                                        <span className="text-orange font-bold">{t('experimental')}</span>
+                                                        <span className="text-gray-light text-sm ml-2">({experimentalReleases.length})</span>
+                                                    </div>
+                                                    <div className="divide-y divide-gray-light">
+                                                        {experimentalReleases.map(r => renderVersionRow(r))}
                                                     </div>
-                                                    <Button
-                                                        size="sm"
-                                                        isLoading={isInstalling && installVersion === release.version}
-                                                        isDisabled={isInstalling || currentVersion === release.version}
-                                                        onClick={() => handleInstall(release.version)}
-                                                    >
-                                                        {currentVersion === release.version ? t('current') : t('install')}
-                                                    </Button>
                                                 </div>
-                                            ))}
+                                            )}
+                                        </div>
+                                    ) : (
+                                        <div className="divide-y divide-gray-light">
+                                            {displayVersions.map((release, i) => renderVersionRow(release))}
                                         </div>
                                     )}
                                 </div>

From 81c44649ad33af7f090721c4a6068451f7c3b400 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 07:21:33 +0000
Subject: [PATCH 16/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E2=80=94=E2=80=94=E6=8C=89=E6=95=B0=E5=AD=97?=
 =?UTF-8?q?=E4=BB=8E=E6=96=B0=E5=88=B0=E6=97=A7=E6=8E=92=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/factorio/version_manager.go | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/factorio/version_manager.go b/src/factorio/version_manager.go
index c43045a1..ee9bace3 100644
--- a/src/factorio/version_manager.go
+++ b/src/factorio/version_manager.go
@@ -9,6 +9,7 @@ import (
 	"os"
 	"os/exec"
 	"path/filepath"
+	"sort"
 	"strings"
 
 	"github.com/OpenFactorioServerManager/factorio-server-manager/bootstrap"
@@ -114,6 +115,10 @@ func (vm *VersionManager) GetFullVersionList() ([]Release, error) {
 		releases[len(releases)-1].Stable = false
 	}
 
+	sort.Slice(releases, func(i, j int) bool {
+		return compareVersions(releases[i].Version, releases[j].Version) > 0
+	})
+
 	return releases, nil
 }
 
@@ -216,6 +221,33 @@ func isStableVersion(version string) bool {
 	return patch%2 == 0
 }
 
+func compareVersions(a, b string) int {
+	aParts := strings.Split(a, ".")
+	bParts := strings.Split(b, ".")
+
+	maxLen := len(aParts)
+	if len(bParts) > maxLen {
+		maxLen = len(bParts)
+	}
+
+	for i := 0; i < maxLen; i++ {
+		var aNum, bNum int
+		if i < len(aParts) {
+			fmt.Sscanf(aParts[i], "%d", &aNum)
+		}
+		if i < len(bParts) {
+			fmt.Sscanf(bParts[i], "%d", &bNum)
+		}
+		if aNum > bNum {
+			return 1
+		}
+		if aNum < bNum {
+			return -1
+		}
+	}
+	return 0
+}
+
 func parseVersionLine(line string) (string, error) {
 	if idx := strings.Index(line, "Version:"); idx >= 0 {
 		rest := line[idx+len("Version:"):]

From f84df0a1c98e39a74be3edaea257b07f095cc80c Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 07:27:31 +0000
Subject: [PATCH 17/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E8=AE=A2=E9=98=85=20server=5Fversion=20WebSocket=20=E6=88=BF?=
 =?UTF-8?q?=E9=97=B4=E4=BB=A5=E6=8E=A5=E6=94=B6=E4=B8=8B=E8=BD=BD=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/App/views/ServerVersion.jsx |  1 +
 ui/api/socket.js               | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/ui/App/views/ServerVersion.jsx b/ui/App/views/ServerVersion.jsx
index bd723d2d..6a965962 100644
--- a/ui/App/views/ServerVersion.jsx
+++ b/ui/App/views/ServerVersion.jsx
@@ -38,6 +38,7 @@ const ServerVersion = ({serverStatus}) => {
 
     useEffect(() => {
         fetchData();
+        socket.emit('server version subscribe');
 
         const handleVersionMessage = (msg) => {
             try {
diff --git a/ui/api/socket.js b/ui/api/socket.js
index 14b6ea2c..ce494105 100644
--- a/ui/api/socket.js
+++ b/ui/api/socket.js
@@ -63,11 +63,26 @@ function connect() {
         );
     }
 
+    function serverVersionSubscribeEvent() {
+        socket.send(
+            JSON.stringify(
+                {
+                    room_name: "",
+                    controls: {
+                        type: "subscribe",
+                        value: "server_version"
+                    }
+                }
+            )
+        );
+    }
+
     function registerEventEmitter() {
         bus.on('log subscribe', logSubscribeEvent);
         bus.on('log unsubscribe', logUnsubscribeEvent);
         bus.on('server status subscribe', serverStatusSubscribeEvent);
         bus.on('command send', commandSendEvent);
+        bus.on('server version subscribe', serverVersionSubscribeEvent);
     }
 
     function unregisterEventEmitter() {
@@ -75,6 +90,7 @@ function connect() {
         bus.off('log unsubscribe', logUnsubscribeEvent);
         bus.off('server status subscribe', serverStatusSubscribeEvent);
         bus.off('command send', commandSendEvent);
+        bus.off('server version subscribe', serverVersionSubscribeEvent);
     }
 
     socket.onmessage = e => {

From 01376eba0846bd944462130804cf6d285b05a577 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 07:37:11 +0000
Subject: [PATCH 18/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20axios=20=E6=8B=A6?=
 =?UTF-8?q?=E6=88=AA=E5=99=A8=E5=A4=84=E7=90=86=E8=B6=85=E6=97=B6=E6=97=A0?=
 =?UTF-8?q?=E5=93=8D=E5=BA=94=20=20+=20=E5=AE=89=E8=A3=85=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82=E8=B6=85=E6=97=B6=E8=AE=BE=E4=B8=BA=2010=20=E5=88=86?=
 =?UTF-8?q?=E9=92=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/api/client.js           | 4 ++++
 ui/api/resources/server.js | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/api/client.js b/ui/api/client.js
index 4c93ac1a..911935b2 100644
--- a/ui/api/client.js
+++ b/ui/api/client.js
@@ -8,6 +8,10 @@ const client = Axios.create({
 });
 
 client.interceptors.response.use(res => res, err => {
+    if (!err.response) {
+        window.flash("Network error or request timeout", "red");
+        return Promise.reject(err);
+    }
     if(err.response.status === 502) {
         window.flash("Service not available", "red");
     } else if (err.response.status !== 401) {
diff --git a/ui/api/resources/server.js b/ui/api/resources/server.js
index 7bfea169..db7222e7 100644
--- a/ui/api/resources/server.js
+++ b/ui/api/resources/server.js
@@ -39,7 +39,7 @@ export default {
             return response.data;
         },
         install: async (version) => {
-            const response = await client.post('/api/server/version/install', { version });
+            const response = await client.post('/api/server/version/install', { version }, { timeout: 600000 });
             return response.data;
         }
     }

From 6f3fda8a836c4043518a0b93f72300a2ab3041f0 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 08:44:06 +0000
Subject: [PATCH 19/38] =?UTF-8?q?=E9=87=8D=E6=9E=84:=20=E5=AE=89=E8=A3=85?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=BC=82=E6=AD=A5=E2=80=94=E2=80=94API=20?=
 =?UTF-8?q?=E7=A7=92=E5=9B=9E=EF=BC=8C=E4=B8=8B=E8=BD=BD=E5=9C=A8=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=EF=BC=8C=E8=BF=9B=E5=BA=A6=E9=9D=A0=20WebSocket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/routes.go              |  6 ++++
 src/api/version_handler.go     | 63 ++++++++++++++++++++++++++--------
 src/factorio/version_status.go | 25 ++++++++++++++
 ui/App/views/ServerVersion.jsx | 18 +++++++++-
 ui/api/resources/server.js     |  6 +++-
 5 files changed, 101 insertions(+), 17 deletions(-)
 create mode 100644 src/factorio/version_status.go

diff --git a/src/api/routes.go b/src/api/routes.go
index 2106b2c8..3819a08b 100644
--- a/src/api/routes.go
+++ b/src/api/routes.go
@@ -289,6 +289,12 @@ var apiRoutes = Routes{
 		"/server/version/install",
 		InstallVersion,
 		true,
+	}, {
+		"GetInstallStatus",
+		"GET",
+		"/server/version/install-status",
+		GetInstallStatus,
+		false,
 	},
 	// Mod Portal Stuff
 	{
diff --git a/src/api/version_handler.go b/src/api/version_handler.go
index 893448c8..bd3d6bc4 100644
--- a/src/api/version_handler.go
+++ b/src/api/version_handler.go
@@ -67,26 +67,59 @@ func InstallVersion(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	vm := factorio.NewVersionManager()
-	wsRoom := websocket.WebsocketHub.GetRoom("server_version")
-
-	err := vm.DownloadAndInstall(data.Version, func(percent int) {
-		msg := fmt.Sprintf(`{"type":"download_progress","version":"%s","percent":%d}`, data.Version, percent)
-		wsRoom.Send(string(msg))
-	})
-
-	if err != nil {
-		log.Printf("Version install error: %v", err)
-		w.WriteHeader(http.StatusInternalServerError)
-		json.NewEncoder(w).Encode(map[string]string{"error": err.Error()})
+	status := factorio.GetInstallStatus()
+	if status.Installing {
+		w.WriteHeader(http.StatusConflict)
+		json.NewEncoder(w).Encode(map[string]string{"error": "installation already in progress"})
 		return
 	}
 
-	wsRoom.Send(fmt.Sprintf(`{"type":"install_complete","version":"%s"}`, data.Version))
+	factorio.SetInstallStatus(factorio.InstallStatus{
+		Installing: true,
+		Version:    data.Version,
+		Progress:   0,
+	})
 
-	w.WriteHeader(http.StatusOK)
+	go func() {
+		vm := factorio.NewVersionManager()
+		wsRoom := websocket.WebsocketHub.GetRoom("server_version")
+
+		err := vm.DownloadAndInstall(data.Version, func(percent int) {
+			factorio.SetInstallStatus(factorio.InstallStatus{
+				Installing: true,
+				Version:    data.Version,
+				Progress:   percent,
+			})
+			msg := fmt.Sprintf(`{"type":"download_progress","version":"%s","percent":%d}`, data.Version, percent)
+			wsRoom.Send(string(msg))
+		})
+
+		if err != nil {
+			log.Printf("Version install error: %v", err)
+			factorio.SetInstallStatus(factorio.InstallStatus{
+				Installing: false,
+				Version:    data.Version,
+				Progress:   100,
+				Error:      err.Error(),
+			})
+			wsRoom.Send(fmt.Sprintf(`{"type":"install_error","version":"%s","error":"%s"}`, data.Version, err.Error()))
+			return
+		}
+
+		factorio.SetInstallStatus(factorio.InstallStatus{})
+		wsRoom.Send(fmt.Sprintf(`{"type":"install_complete","version":"%s"}`, data.Version))
+	}()
+
+	w.WriteHeader(http.StatusAccepted)
 	json.NewEncoder(w).Encode(map[string]string{
-		"status":  "ok",
+		"status":  "started",
 		"version": data.Version,
 	})
 }
+
+func GetInstallStatus(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json;charset=UTF-8")
+	status := factorio.GetInstallStatus()
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(status)
+}
diff --git a/src/factorio/version_status.go b/src/factorio/version_status.go
new file mode 100644
index 00000000..633dfcc5
--- /dev/null
+++ b/src/factorio/version_status.go
@@ -0,0 +1,25 @@
+package factorio
+
+import "sync"
+
+type InstallStatus struct {
+	Installing bool   `json:"installing"`
+	Version    string `json:"version"`
+	Progress   int    `json:"progress"`
+	Error      string `json:"error,omitempty"`
+}
+
+var installMu sync.Mutex
+var currentInstall InstallStatus
+
+func GetInstallStatus() InstallStatus {
+	installMu.Lock()
+	defer installMu.Unlock()
+	return currentInstall
+}
+
+func SetInstallStatus(s InstallStatus) {
+	installMu.Lock()
+	defer installMu.Unlock()
+	currentInstall = s
+}
diff --git a/ui/App/views/ServerVersion.jsx b/ui/App/views/ServerVersion.jsx
index 6a965962..1f92327b 100644
--- a/ui/App/views/ServerVersion.jsx
+++ b/ui/App/views/ServerVersion.jsx
@@ -40,6 +40,15 @@ const ServerVersion = ({serverStatus}) => {
         fetchData();
         socket.emit('server version subscribe');
 
+        (async () => {
+            const status = await server.version.installStatus();
+            if (status && status.installing) {
+                setIsInstalling(true);
+                setInstallVersion(status.version);
+                setProgress(status.progress);
+            }
+        })();
+
         const handleVersionMessage = (msg) => {
             try {
                 const data = JSON.parse(typeof msg === 'string' ? msg : JSON.stringify(msg));
@@ -49,7 +58,13 @@ const ServerVersion = ({serverStatus}) => {
                     setIsInstalling(false);
                     setProgress(0);
                     setCurrentVersion(data.version);
+                    setInstallVersion(null);
                     window.flash(t('installSuccess').replace('{version}', data.version), "green");
+                } else if (data.type === 'install_error') {
+                    setIsInstalling(false);
+                    setProgress(0);
+                    setInstallVersion(null);
+                    setError(data.error || 'Unknown error');
                 }
             } catch (e) {}
         };
@@ -116,8 +131,9 @@ const ServerVersion = ({serverStatus}) => {
         try {
             await server.version.install(version);
         } catch (e) {
-            setError(t('installFailed').replace('{error}', e.message || ''));
+            setError(t('installFailed').replace('{error}', e.response?.data?.error || e.message || ''));
             setIsInstalling(false);
+            setInstallVersion(null);
         }
     };
 
diff --git a/ui/api/resources/server.js b/ui/api/resources/server.js
index db7222e7..7b5383e7 100644
--- a/ui/api/resources/server.js
+++ b/ui/api/resources/server.js
@@ -39,7 +39,11 @@ export default {
             return response.data;
         },
         install: async (version) => {
-            const response = await client.post('/api/server/version/install', { version }, { timeout: 600000 });
+            const response = await client.post('/api/server/version/install', { version });
+            return response.data;
+        },
+        installStatus: async () => {
+            const response = await client.get('/api/server/version/install-status');
             return response.data;
         }
     }

From 74e3d64098350068d9347340520f3426788400f3 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 08:59:54 +0000
Subject: [PATCH 20/38] =?UTF-8?q?=E5=8A=9F=E8=83=BD:=20=E5=AE=89=E8=A3=85?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=90=8E=E8=87=AA=E5=8A=A8=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=20FSM=20=E5=86=85=E5=AD=98=E4=B8=AD=E7=89=88=E6=9C=AC=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/version_handler.go      |  4 ++++
 src/factorio/version_manager.go | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/src/api/version_handler.go b/src/api/version_handler.go
index bd3d6bc4..8c6ba014 100644
--- a/src/api/version_handler.go
+++ b/src/api/version_handler.go
@@ -106,6 +106,10 @@ func InstallVersion(w http.ResponseWriter, r *http.Request) {
 			return
 		}
 
+		if err := factorio.RefreshServerVersion(); err != nil {
+			log.Printf("Failed to refresh server version: %v", err)
+		}
+
 		factorio.SetInstallStatus(factorio.InstallStatus{})
 		wsRoom.Send(fmt.Sprintf(`{"type":"install_complete","version":"%s"}`, data.Version))
 	}()
diff --git a/src/factorio/version_manager.go b/src/factorio/version_manager.go
index ee9bace3..c40eadc6 100644
--- a/src/factorio/version_manager.go
+++ b/src/factorio/version_manager.go
@@ -5,10 +5,12 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
+	"io/ioutil"
 	"net/http"
 	"os"
 	"os/exec"
 	"path/filepath"
+	"regexp"
 	"sort"
 	"strings"
 
@@ -200,6 +202,37 @@ func (pr *ProgressReader) Read(p []byte) (int, error) {
 	return n, err
 }
 
+func RefreshServerVersion() error {
+	server := GetFactorioServer()
+	config := bootstrap.GetConfig()
+
+	out, err := exec.Command(config.FactorioBinary, "--version").Output()
+	if err != nil {
+		return fmt.Errorf("failed to read version: %w", err)
+	}
+
+	reg := regexp.MustCompile("Version.*?((\\d+\\.)?(\\d+\\.)?(\\*|\\d+)+)")
+	found := reg.FindStringSubmatch(string(out))
+	if len(found) < 2 {
+		return fmt.Errorf("could not parse version from: %s", string(out))
+	}
+
+	if err := server.Version.UnmarshalText([]byte(found[1])); err != nil {
+		return fmt.Errorf("could not parse version: %w", err)
+	}
+
+	baseModInfoFile := filepath.Join(config.FactorioBaseModDir, "info.json")
+	bmifBa, err := ioutil.ReadFile(baseModInfoFile)
+	if err == nil {
+		var modInfo ModInfo
+		if err := json.Unmarshal(bmifBa, &modInfo); err == nil {
+			server.BaseModVersion = modInfo.Version
+		}
+	}
+
+	return nil
+}
+
 func NewVersionManager() *VersionManager {
 	config := bootstrap.GetConfig()
 	var creds Credentials

From 8657f7981697b2dfef6f91ed63f52793dbac5c64 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 09:43:17 +0000
Subject: [PATCH 21/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=202.0=20=E5=AD=98?=
 =?UTF-8?q?=E6=A1=A3=E8=A7=A3=E6=9E=90=E2=80=94=E2=80=94Python=20=E8=BE=85?=
 =?UTF-8?q?=E5=8A=A9=E8=84=9A=E6=9C=AC=20+=20Go=20fallback=20=E5=85=B1?=
 =?UTF-8?q?=E5=AD=98=E5=8F=8C=E6=96=B9=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mods_handler.go | 48 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/api/mods_handler.go b/src/api/mods_handler.go
index dcc1508b..be77880e 100644
--- a/src/api/mods_handler.go
+++ b/src/api/mods_handler.go
@@ -2,12 +2,14 @@ package api
 
 import (
 	"archive/zip"
+	"bytes"
 	"encoding/json"
 	"fmt"
 	"io"
 	"log"
 	"net/http"
 	"os"
+	"os/exec"
 	"path/filepath"
 
 	"github.com/OpenFactorioServerManager/factorio-server-manager/bootstrap"
@@ -363,5 +365,51 @@ func LoadModsFromSaveHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	if len(header.Mods) == 0 {
+		mods, err := saveModsFallback(path)
+		if err != nil {
+			log.Printf("python fallback error: %v", err)
+		} else if mods != nil {
+			header.Mods = make([]factorio.Mod, len(mods))
+			for i, m := range mods {
+				var v factorio.Version
+				v.UnmarshalText([]byte(m["version"]))
+				header.Mods[i] = factorio.Mod{Name: m["name"], Version: v}
+			}
+		}
+	}
+
 	resp = header
 }
+
+func saveModsFallback(path string) ([]map[string]string, error) {
+	cmd := exec.Command("python3", "/home/game/fsm/save_mods.py", path)
+	var out bytes.Buffer
+	cmd.Stdout = &out
+	cmd.Stderr = &out
+	if err := cmd.Run(); err != nil {
+		return nil, fmt.Errorf("python parser failed: %v", err)
+	}
+	var result struct {
+		Fallback bool `json:"fallback"`
+		Mods []struct {
+			Name    string `json:"name"`
+			Version string `json:"version"`
+		} `json:"mods"`
+		Error string `json:"error"`
+	}
+	if err := json.Unmarshal(out.Bytes(), &result); err != nil {
+		return nil, fmt.Errorf("parse python output: %v", err)
+	}
+	if result.Fallback {
+		return nil, nil
+	}
+	if result.Error != "" {
+		return nil, fmt.Errorf("%s", result.Error)
+	}
+	var mods []map[string]string
+	for _, m := range result.Mods {
+		mods = append(mods, map[string]string{"name": m.Name, "version": m.Version})
+	}
+	return mods, nil
+}

From 163c7e85dff9b1a5b34359e1f4f52688b6489bc0 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 10:01:27 +0000
Subject: [PATCH 22/38] =?UTF-8?q?=E9=87=8D=E6=9E=84:=20=E7=BA=AF=20Go=20?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=202.0=20=E5=AD=98=E6=A1=A3=E8=A7=A3=E6=9E=90?=
 =?UTF-8?q?=E2=80=94=E2=80=94=E5=88=86=E7=A6=BB=20readFromV1/readFromV2?=
 =?UTF-8?q?=EF=BC=8C=E9=9B=B6=E5=A4=96=E9=83=A8=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mods_handler.go |  46 ----------
 src/factorio/save.go    | 195 +++++++++++++++++++++-------------------
 2 files changed, 102 insertions(+), 139 deletions(-)

diff --git a/src/api/mods_handler.go b/src/api/mods_handler.go
index be77880e..49fccbea 100644
--- a/src/api/mods_handler.go
+++ b/src/api/mods_handler.go
@@ -2,14 +2,12 @@ package api
 
 import (
 	"archive/zip"
-	"bytes"
 	"encoding/json"
 	"fmt"
 	"io"
 	"log"
 	"net/http"
 	"os"
-	"os/exec"
 	"path/filepath"
 
 	"github.com/OpenFactorioServerManager/factorio-server-manager/bootstrap"
@@ -365,51 +363,7 @@ func LoadModsFromSaveHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	if len(header.Mods) == 0 {
-		mods, err := saveModsFallback(path)
-		if err != nil {
-			log.Printf("python fallback error: %v", err)
-		} else if mods != nil {
-			header.Mods = make([]factorio.Mod, len(mods))
-			for i, m := range mods {
-				var v factorio.Version
-				v.UnmarshalText([]byte(m["version"]))
-				header.Mods[i] = factorio.Mod{Name: m["name"], Version: v}
-			}
-		}
-	}
 
 	resp = header
 }
 
-func saveModsFallback(path string) ([]map[string]string, error) {
-	cmd := exec.Command("python3", "/home/game/fsm/save_mods.py", path)
-	var out bytes.Buffer
-	cmd.Stdout = &out
-	cmd.Stderr = &out
-	if err := cmd.Run(); err != nil {
-		return nil, fmt.Errorf("python parser failed: %v", err)
-	}
-	var result struct {
-		Fallback bool `json:"fallback"`
-		Mods []struct {
-			Name    string `json:"name"`
-			Version string `json:"version"`
-		} `json:"mods"`
-		Error string `json:"error"`
-	}
-	if err := json.Unmarshal(out.Bytes(), &result); err != nil {
-		return nil, fmt.Errorf("parse python output: %v", err)
-	}
-	if result.Fallback {
-		return nil, nil
-	}
-	if result.Error != "" {
-		return nil, fmt.Errorf("%s", result.Error)
-	}
-	var mods []map[string]string
-	for _, m := range result.Mods {
-		mods = append(mods, map[string]string{"name": m.Name, "version": m.Version})
-	}
-	return mods, nil
-}
diff --git a/src/factorio/save.go b/src/factorio/save.go
index 3d37b0f4..ab974a2d 100644
--- a/src/factorio/save.go
+++ b/src/factorio/save.go
@@ -5,6 +5,7 @@ import (
 	"encoding/binary"
 	"fmt"
 	"io"
+	"bytes"
 	"os"
 )
 
@@ -82,159 +83,167 @@ type Mod struct {
 
 // Mostly based on https://forums.factorio.com/viewtopic.php?f=5&t=8568&p=277892&hilit=level.dat+python#p277892
 func (h *SaveHeader) ReadFrom(r io.Reader) (err error) {
-	var scratch [8]byte
+	data, dataErr := io.ReadAll(r)
+	if dataErr != nil {
+		return fmt.Errorf("read save data: %%v", dataErr)
+	}
 
 	var fv version64
-	_, err = r.Read(scratch[:8])
-	if err != nil {
-		return err
-	}
-	if err := fv.UnmarshalBinary(scratch[:8]); err != nil {
-		return fmt.Errorf("read FactorioVersion: %v", err)
+	if err := fv.UnmarshalBinary(data[:8]); err != nil {
+		return fmt.Errorf("read FactorioVersion: %%%%v", err)
 	}
 	h.FactorioVersion = Version(fv)
 
+	if !h.FactorioVersion.Less(Version{2, 0, 0, 0}) {
+		return readFromV2(h, data)
+	}
+
+	var scratch [8]byte
+	buf := bytes.NewReader(data)
+	buf.Read(scratch[:8])
+
 	atLeast016 := !h.FactorioVersion.Less(Version{0, 16, 0, 0})
 
 	if !h.FactorioVersion.Less(Version{0, 17, 0, 0}) {
-		//FIXME correct naming
-		_, err = r.Read(scratch[:1])
+		_, err = buf.Read(scratch[:1])
 		if err != nil {
-			return fmt.Errorf("read first random 0.17 byte: %v", err)
+			return fmt.Errorf("read first random 0.17 byte: %%%%v", err)
 		}
 	}
 
-	// campaign, example: "transport-belt-madness"
-	h.Campaign, err = readString(r, Version(h.FactorioVersion), false)
-	if err != nil {
-		return fmt.Errorf("read Campaign: %v", err)
-	}
+	h.Campaign, err = readString(buf, Version(h.FactorioVersion), false)
+	if err != nil { return fmt.Errorf("read Campaign: %%%%v", err) }
 
-	// level name, example: "level-01"
-	h.Name, err = readString(r, Version(h.FactorioVersion), false)
-	if err != nil {
-		return fmt.Errorf("read Name: %v", err)
-	}
+	h.Name, err = readString(buf, Version(h.FactorioVersion), false)
+	if err != nil { return fmt.Errorf("read Name: %%%%v", err) }
 
-	// name of the base mod, example: "base"
-	h.BaseMod, err = readString(r, Version(h.FactorioVersion), false)
-	if err != nil {
-		return fmt.Errorf("read BaseMod: %v", err)
-	}
+	h.BaseMod, err = readString(buf, Version(h.FactorioVersion), false)
+	if err != nil { return fmt.Errorf("read BaseMod: %%%%v", err) }
 
-	// Read Difficulty
-	_, err = r.Read(scratch[:1])
-	if err != nil {
-		return fmt.Errorf("read Difficulty: %v", err)
-	}
+	_, err = buf.Read(scratch[:1])
+	if err != nil { return fmt.Errorf("read Difficulty: %%%%v", err) }
 	h.Difficulty = scratch[0]
 
-	// Read finished as bool
-	_, err = r.Read(scratch[:1])
-	if err != nil {
-		return fmt.Errorf("read Finished: %v", err)
-	}
+	_, err = buf.Read(scratch[:1])
+	if err != nil { return fmt.Errorf("read Finished: %%%%v", err) }
 	h.Finished = scratch[0] != 0
 
-	// Read playerWon as bool
-	_, err = r.Read(scratch[:1])
-	if err != nil {
-		return fmt.Errorf("read PlayerWon: %v", err)
-	}
+	_, err = buf.Read(scratch[:1])
+	if err != nil { return fmt.Errorf("read PlayerWon: %%%%v", err) }
 	h.PlayerWon = scratch[0] != 0
 
-	// Read NextLevel string (normally empty)
-	h.NextLevel, err = readString(r, Version(h.FactorioVersion), false)
-	if err != nil {
-		return fmt.Errorf("read NextLevel: %v", err)
-	}
+	h.NextLevel, err = readString(buf, Version(h.FactorioVersion), false)
+	if err != nil { return fmt.Errorf("read NextLevel: %%%%v", err) }
 
 	if !h.FactorioVersion.Less(Version{0, 12, 0, 0}) {
-		_, err = r.Read(scratch[:1])
-		if err != nil {
-			return fmt.Errorf("read CanContinue: %v", err)
-		}
+		_, err = buf.Read(scratch[:1])
+		if err != nil { return fmt.Errorf("read CanContinue: %%%%v", err) }
 		h.CanContinue = scratch[0] != 0
-
-		_, err = r.Read(scratch[:1])
-		if err != nil {
-			return fmt.Errorf("read FinishedButContinuing: %v", err)
-		}
+		_, err = buf.Read(scratch[:1])
+		if err != nil { return fmt.Errorf("read FinishedButContinuing: %%%%v", err) }
 		h.FinishedButContinuing = scratch[0] != 0
 	}
 
-	_, err = r.Read(scratch[:1])
-	if err != nil {
-		return fmt.Errorf("read SavingReplay: %v", err)
-	}
+	_, err = buf.Read(scratch[:1])
+	if err != nil { return fmt.Errorf("read SavingReplay: %%%%v", err) }
 	h.SavingReplay = scratch[0] != 0
 
 	if atLeast016 {
-		_, err = r.Read(scratch[:1])
-		if err != nil {
-			return fmt.Errorf("read AllowNonAdminDebugOptions: %v", err)
-		}
+		_, err = buf.Read(scratch[:1])
+		if err != nil { return fmt.Errorf("read AllowNonAdmin: %%%%v", err) }
 		h.AllowNonAdminDebugOptions = scratch[0] != 0
 	}
 
 	var loadedFrom version48
-	err = loadedFrom.ReadFrom(r, Version(h.FactorioVersion))
-	if err != nil {
-		return fmt.Errorf("read LoadedFrom: %v", err)
-	}
+	err = loadedFrom.ReadFrom(buf, Version(h.FactorioVersion))
+	if err != nil { return fmt.Errorf("read LoadedFrom: %%%%v", err) }
 	h.LoadedFrom = Version(loadedFrom)
 
-	_, err = r.Read(scratch[:2])
-	if err != nil {
-		return fmt.Errorf("read LoadedFromBuild: %v", err)
-	}
+	_, err = buf.Read(scratch[:2])
+	if err != nil { return fmt.Errorf("read LoadedFromBuild: %%%%v", err) }
 	h.LoadedFromBuild = binary.LittleEndian.Uint16(scratch[:2])
 
-	_, err = r.Read(scratch[:1])
-	if err != nil {
-		return fmt.Errorf("read AllowedCommands: %v", err)
-	}
+	_, err = buf.Read(scratch[:1])
+	if err != nil { return fmt.Errorf("read AllowedCommands: %%%%v", err) }
 	h.AllowedCommands = scratch[0]
 	if h.FactorioVersion.Less(Version{0, 13, 0, 87}) {
-		if h.AllowedCommands == 0 {
-			h.AllowedCommands = 2
-		} else {
-			h.AllowedCommands = 1
-		}
+		if h.AllowedCommands == 0 { h.AllowedCommands = 2 } else { h.AllowedCommands = 1 }
 	}
 
 	if h.FactorioVersion.Less(Version{0, 13, 0, 42}) {
-		h.Stats, err = h.readStats(r)
-		if err != nil {
-			return fmt.Errorf("read Stats: %v", err)
-		}
+		h.Stats, err = h.readStats(buf)
+		if err != nil { return fmt.Errorf("read Stats: %%%%v", err) }
 	}
 
 	var n uint32
 	if atLeast016 {
-		n, err = readOptimUint(r, Version(h.FactorioVersion), 32)
-		if err != nil {
-			return fmt.Errorf("read num mods: %v", err)
-		}
+		n, err = readOptimUint(buf, Version(h.FactorioVersion), 32)
+		if err != nil { return fmt.Errorf("read num mods: %%%%v", err) }
 	} else {
-		_, err = r.Read(scratch[:4])
-		if err != nil {
-			return fmt.Errorf("read num mods: %v", err)
-		}
+		_, err = buf.Read(scratch[:4])
+		if err != nil { return fmt.Errorf("read num mods: %%%%v", err) }
 		n = binary.LittleEndian.Uint32(scratch[:4])
 	}
 
 	for i := uint32(0); i < n; i++ {
 		var m Mod
-		if err = (&m).ReadFrom(r, Version(h.FactorioVersion)); err != nil {
-			return fmt.Errorf("read mod: %v", err)
+		if err = (&m).ReadFrom(buf, Version(h.FactorioVersion)); err != nil {
+			return fmt.Errorf("read mod: %%%%v", err)
 		}
 		h.Mods = append(h.Mods, m)
 	}
+	return nil
+}
+
+func readFromV2(h *SaveHeader, data []byte) error {
+	pos := 10
+	campaign, pos, _ := readStringBuf(data, pos)
+	h.Campaign = campaign
+	baseMod, pos, _ := readStringBuf(data, pos)
+	h.BaseMod = baseMod
+
+	scanStart := 0
+	for i := pos; i < len(data)-10; i++ {
+		if data[i] == 4 && string(data[i+1:i+5]) == "base" {
+			scanStart = i
+			break
+		}
+	}
+	if scanStart == 0 {
+		return fmt.Errorf("mod list not found in 2.0 save")
+	}
 
+	off := scanStart + 12
+	for {
+		if off+8 >= len(data) { break }
+		nameLen := int(data[off])
+		if nameLen < 3 || nameLen > 50 { break }
+		off++
+		name := string(data[off:off+nameLen]); off += nameLen
+		major := uint(data[off])
+		minor := uint(data[off+1])
+		patch := uint(data[off+2])
+		off += 7
+		h.Mods = append(h.Mods, Mod{Name: name, Version: Version{major, minor, patch, 0}})
+	}
 	return nil
 }
 
+func readStringBuf(data []byte, pos int) (string, int, error) {
+	if pos >= len(data) { return "", pos, io.EOF }
+	b := data[pos]; pos++
+	if b == 0xFF {
+		if pos+4 > len(data) { return "", pos, io.ErrUnexpectedEOF }
+		l := binary.LittleEndian.Uint32(data[pos:pos+4])
+		pos += 4
+		if pos+int(l) > len(data) { return "", pos, io.ErrUnexpectedEOF }
+		return string(data[pos:pos+int(l)]), pos + int(l), nil
+	}
+	if pos+int(b) > len(data) { return "", pos, io.ErrUnexpectedEOF }
+	return string(data[pos:pos+int(b)]), pos + int(b), nil
+}
+
+
 func readOptimUint(r io.Reader, v Version, bitSize int) (uint32, error) {
 	var b [4]byte
 	if !v.Less(Version{0, 14, 14, 0}) {

From e516474c7127b5e3d13456df09e5efde8620bfee Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 10:38:46 +0000
Subject: [PATCH 23/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E5=8F=B7=E6=98=BE=E7=A4=BA=E5=8E=BB=E6=8E=89=E5=B0=BE=E9=83=A8?=
 =?UTF-8?q?=E9=9B=B6=E2=80=94=E2=80=942.0=20=E4=B8=8D=E5=86=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E4=B8=BA=202.0.0.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/factorio/version.go | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/factorio/version.go b/src/factorio/version.go
index 2c132ffb..86dcdd3e 100644
--- a/src/factorio/version.go
+++ b/src/factorio/version.go
@@ -16,7 +16,13 @@ var NilVersion = Version{0, 0, 0, 0}
 type Version [4]uint
 
 func (v Version) String() string {
-	return fmt.Sprintf("%d.%d.%d.%d", v[0], v[1], v[2], v[3])
+	if v[3] != 0 {
+		return fmt.Sprintf("%d.%d.%d.%d", v[0], v[1], v[2], v[3])
+	}
+	if v[2] != 0 {
+		return fmt.Sprintf("%d.%d.%d", v[0], v[1], v[2])
+	}
+	return fmt.Sprintf("%d.%d", v[0], v[1])
 }
 
 // MarshalText implements encoding.TextMarshaller for Version

From e88fdd7978738826d0cd86f1b7b22dd937e44d38 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 10:55:49 +0000
Subject: [PATCH 24/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E6=8D=9F=E5=9D=8F?=
 =?UTF-8?q?=E7=9A=84=20mod=20zip=20=E4=B8=8D=E5=86=8D=E5=AF=BC=E8=87=B4=20?=
 =?UTF-8?q?FSM=20=E5=B4=A9=E6=BA=83=E2=80=94=E2=80=94log.Fatal=20=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=20log.Printf=20+=20=E4=BC=98=E9=9B=85=E8=B7=B3?=
 =?UTF-8?q?=E8=BF=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/factorio/mod_modInfo.go | 15 ++++++++-------
 src/factorio/version.go     |  8 +-------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/factorio/mod_modInfo.go b/src/factorio/mod_modInfo.go
index b9482771..8f98f598 100644
--- a/src/factorio/mod_modInfo.go
+++ b/src/factorio/mod_modInfo.go
@@ -63,15 +63,16 @@ func (modInfoList *ModInfoList) listInstalledMods() error {
 
 			zipFile, err := zip.OpenReader(path)
 			if err != nil {
-				log.Fatalln(err)
-				return err
+				log.Printf("error opening mod zip %s: %v", path, err)
+				return nil
 			}
 			defer zipFile.Close()
 
 			var modInfo ModInfo
 			err = modInfo.getModInfo(&zipFile.Reader)
 			if err != nil {
-				log.Fatalf("Error in getModInfo: %s", err)
+				log.Printf("error reading info.json from %s: %v", path, err)
+				return nil
 			}
 
 			modInfo.FileName = info.Name()
@@ -170,24 +171,24 @@ func (modInfo *ModInfo) getModInfo(reader *zip.Reader) error {
 			rc, err := singleFile.Open()
 
 			if err != nil {
-				log.Fatal(err)
+				log.Printf("error opening file in mod zip: %v", err)
 				return err
 			}
 
 			byteArray, err := ioutil.ReadAll(rc)
 			if err != nil {
-				log.Fatal(err)
+				log.Printf("error reading file in mod zip: %v", err)
 				return err
 			}
 			err = rc.Close()
 			if err != nil {
-				log.Printf("Error closing singleFile: %s", err)
+				log.Printf("error closing singleFile: %s", err)
 				return err
 			}
 
 			err = json.Unmarshal(byteArray, modInfo)
 			if err != nil {
-				log.Fatalln(err)
+				log.Printf("invalid info.json in mod: %v", err)
 				return err
 			}
 
diff --git a/src/factorio/version.go b/src/factorio/version.go
index 86dcdd3e..2c132ffb 100644
--- a/src/factorio/version.go
+++ b/src/factorio/version.go
@@ -16,13 +16,7 @@ var NilVersion = Version{0, 0, 0, 0}
 type Version [4]uint
 
 func (v Version) String() string {
-	if v[3] != 0 {
-		return fmt.Sprintf("%d.%d.%d.%d", v[0], v[1], v[2], v[3])
-	}
-	if v[2] != 0 {
-		return fmt.Sprintf("%d.%d.%d", v[0], v[1], v[2])
-	}
-	return fmt.Sprintf("%d.%d", v[0], v[1])
+	return fmt.Sprintf("%d.%d.%d.%d", v[0], v[1], v[2], v[3])
 }
 
 // MarshalText implements encoding.TextMarshaller for Version

From 752b4b1cb1b2e9d3d8d2281430ed69e933ab40de Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:02:36 +0000
Subject: [PATCH 25/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20Factorio=20?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=88=97=E6=98=BE=E7=A4=BA=E4=BE=9D=E8=B5=96?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E8=80=8C=E9=9D=9E=20metadata=20=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E2=80=94=E2=80=94direct-rockets=20=E4=BB=8E=202.0.0.0?=
 =?UTF-8?q?=20=E4=BF=AE=E6=AD=A3=E4=B8=BA=202.0.57.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/factorio/mod_modInfo.go | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/factorio/mod_modInfo.go b/src/factorio/mod_modInfo.go
index 8f98f598..f40ccac5 100644
--- a/src/factorio/mod_modInfo.go
+++ b/src/factorio/mod_modInfo.go
@@ -116,6 +116,7 @@ func (modInfoList *ModInfoList) listInstalledMods() error {
 			modInfo.Compatibility = server.Version.GEC(modInfo.FactorioVersion)
 			if modInfo.Compatibility && !base.Equals(NilVersion) {
 				modInfo.Compatibility = server.Version.Compatible(base, op)
+				modInfo.FactorioVersion = base
 			}
 
 			modInfoList.Mods = append(modInfoList.Mods, modInfo)

From c6ec6c49e3792692c5bdbf4bc0340c3bd31390cb Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:07:56 +0000
Subject: [PATCH 26/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20dep=5Fop=20?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5=E4=BC=A0=E9=80=92=E5=88=B0=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E2=80=94=E2=80=94=E6=98=BE=E7=A4=BA=20>=3D=20=E7=AC=A6?=
 =?UTF-8?q?=E5=8F=B7=E6=A0=87=E8=AF=86=E4=BE=9D=E8=B5=96=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E8=A6=81=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/factorio/mod_Mods.go             | 1 +
 src/factorio/mod_modInfo.go          | 2 ++
 ui/App/views/Mods/components/Mod.jsx | 2 +-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/factorio/mod_Mods.go b/src/factorio/mod_Mods.go
index c9f32983..38b65db7 100644
--- a/src/factorio/mod_Mods.go
+++ b/src/factorio/mod_Mods.go
@@ -60,6 +60,7 @@ func (mods *Mods) ListInstalledMods() ModsResultList {
 		modsResult.Version = modInfo.Version
 		modsResult.FactorioVersion = modInfo.FactorioVersion
 		modsResult.Compatibility = modInfo.Compatibility
+		modsResult.DepOp = modInfo.DepOp
 
 		for _, simpleMod := range mods.ModSimpleList.Mods {
 			if simpleMod.Name == modsResult.Name {
diff --git a/src/factorio/mod_modInfo.go b/src/factorio/mod_modInfo.go
index f40ccac5..6397aa0a 100644
--- a/src/factorio/mod_modInfo.go
+++ b/src/factorio/mod_modInfo.go
@@ -27,6 +27,7 @@ type ModInfo struct {
 	FactorioVersion Version  `json:"factorio_version"`
 	Dependencies    []string `json:"dependencies"`
 	Compatibility   bool     `json:"compatibility"`
+	DepOp           string   `json:"dep_op"`
 }
 
 func newModInfoList(destination string) (ModInfoList, error) {
@@ -117,6 +118,7 @@ func (modInfoList *ModInfoList) listInstalledMods() error {
 			if modInfo.Compatibility && !base.Equals(NilVersion) {
 				modInfo.Compatibility = server.Version.Compatible(base, op)
 				modInfo.FactorioVersion = base
+				modInfo.DepOp = op
 			}
 
 			modInfoList.Mods = append(modInfoList.Mods, modInfo)
diff --git a/ui/App/views/Mods/components/Mod.jsx b/ui/App/views/Mods/components/Mod.jsx
index 77420482..35c4a930 100644
--- a/ui/App/views/Mods/components/Mod.jsx
+++ b/ui/App/views/Mods/components/Mod.jsx
@@ -101,7 +101,7 @@ const Mod = ({mod, factorioVersion, toggleMod, deleteMod, updateMod, addUpdatabl
                                                 }}
                                                 className="hover:text-orange cursor-pointer ml-1"
                                                 icon={icon}/>}</td>
-            <td className="pr-4">{mod.factorio_version}</td>
+            <td className="pr-4">{mod.dep_op ? mod.dep_op + ' ' + mod.factorio_version : mod.factorio_version}</td>
             {
                 !disabled &&
                 <td className="pr-4">

From 1298a6a2141aacad562b0dfe3f08beafc6e60efa Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:10:51 +0000
Subject: [PATCH 27/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E6=9C=AA=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C=20mod=20=E7=82=B9=E5=87=BB=E5=90=AF=E7=94=A8=E6=97=B6?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=B3=A8=E5=86=8C=E5=88=B0=20mod-list.json?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/factorio/mod_modSimple.go | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/factorio/mod_modSimple.go b/src/factorio/mod_modSimple.go
index 52d39bd6..4cbb0359 100644
--- a/src/factorio/mod_modSimple.go
+++ b/src/factorio/mod_modSimple.go
@@ -154,7 +154,11 @@ func (modSimpleList *ModSimpleList) ToggleMod(modName string) (error, bool) {
 	}
 
 	if !found {
-		return errors.New("mod is not installed"), newEnabled
+		err = modSimpleList.createMod(modName)
+		if err != nil {
+			return errors.New("mod is not installed"), newEnabled
+		}
+		newEnabled = true
 	}
 
 	err = modSimpleList.saveModInfoJson()

From da412b9f707fb882cde4ecb97ba8ba841cd19d6a Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:13:28 +0000
Subject: [PATCH 28/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=20mod=20=E8=BF=94=E5=9B=9E=E6=98=8E=E7=A1=AE=20JSON=20?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E8=80=8C=E9=9D=9E=E5=8E=9F=E5=A7=8B=E5=AD=97?=
 =?UTF-8?q?=E7=AC=A6=E4=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mods_handler.go | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/api/mods_handler.go b/src/api/mods_handler.go
index 49fccbea..fe9527b5 100644
--- a/src/api/mods_handler.go
+++ b/src/api/mods_handler.go
@@ -127,8 +127,7 @@ func ModDeleteHandler(w http.ResponseWriter, r *http.Request) {
 		log.Println(resp)
 		return
 	}
-
-	resp = data.Name
+	resp = map[string]string{"status": "ok", "name": data.Name}
 }
 
 func ModDeleteAllHandler(w http.ResponseWriter, r *http.Request) {

From db6922ba1d01132146346c64b3bccae2c057fc23 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:16:08 +0000
Subject: [PATCH 29/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E4=BB=8E=E5=AD=98?=
 =?UTF-8?q?=E6=A1=A3=E5=8A=A0=E8=BD=BD=E6=A8=A1=E7=BB=84=E6=94=B9=E7=94=A8?=
 =?UTF-8?q?=20try/finally=20=E4=BF=9D=E8=AF=81=E7=8A=B6=E6=80=81=E6=B8=85?=
 =?UTF-8?q?=E7=90=86=E2=80=94=E2=80=94=E4=B8=8D=E5=86=8D=E6=97=A0=E9=99=90?=
 =?UTF-8?q?=E8=BD=AC=E5=9C=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/App/views/Mods/components/LoadMods.jsx | 29 +++++++++++++----------
 ui/locales/en/mods.json                   |  1 +
 ui/locales/zh-CN/mods.json                |  1 +
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/ui/App/views/Mods/components/LoadMods.jsx b/ui/App/views/Mods/components/LoadMods.jsx
index 06609467..c33616e6 100644
--- a/ui/App/views/Mods/components/LoadMods.jsx
+++ b/ui/App/views/Mods/components/LoadMods.jsx
@@ -40,20 +40,25 @@ const LoadMods = ({refreshMods}) => {
     }
 
     const loadMods = async data => {
-        await modResource.deleteAll();
-        const {mods} = await savesResource.mods(data.save).catch(() => {
+        try {
+            await modResource.deleteAll();
+            const result = await savesResource.mods(data.save);
+            const mods = result?.mods || [];
+            
+            if (mods.length === 0) {
+                window.flash(t('noModsFound', { ns: 'mods' }), "green");
+                return;
+            }
+
+            await modResource.portal.installMultiple(mods);
+            refreshMods();
+            window.flash(t('modsLoaded').replace('{save}', data.save), "green");
+        } catch (e) {
+            window.flash(t('errorOccurred', { ns: 'common' }), "red");
+        } finally {
             setIsLoading(false);
             setLoadModsData(undefined);
-        });
-
-        await modResource.portal.installMultiple(mods)
-            .then(() => {
-                refreshMods();
-                window.flash(t('modsLoaded').replace('{save}', data.save), "green");
-            }).finally(() => {
-                setIsLoading(false);
-                setLoadModsData(undefined);
-            });
+        }
     }
 
     return isFactorioAuthenticated
diff --git a/ui/locales/en/mods.json b/ui/locales/en/mods.json
index 88ac9683..c5fd1c6a 100644
--- a/ui/locales/en/mods.json
+++ b/ui/locales/en/mods.json
@@ -29,6 +29,7 @@
   "selectSave": "Select a save file",
   "modsLoaded": "Mods loaded from save.",
   "deleteExistingMods": "Delete all existing mods before loading? Existing mods will be permanently removed.",
+  "noModsFound": "No mods found in this save.",
   "compatibility": "Compatibility",
   "modVersion": "Mod Version",
   "factorioVersion": "Factorio Version"
diff --git a/ui/locales/zh-CN/mods.json b/ui/locales/zh-CN/mods.json
index 30aaef2c..35e9fb22 100644
--- a/ui/locales/zh-CN/mods.json
+++ b/ui/locales/zh-CN/mods.json
@@ -29,6 +29,7 @@
   "selectSave": "选择一个存档文件",
   "modsLoaded": "已从存档加载模组。",
   "deleteExistingMods": "加载前删除所有现有模组？现有模组将被永久移除。",
+  "noModsFound": "此存档中没有模组。",
   "compatibility": "兼容性",
   "modVersion": "模组版本",
   "factorioVersion": "Factorio 版本"

From 42a39e5acd957bc8e03e4e17fb81534adc7c8fa1 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:25:12 +0000
Subject: [PATCH 30/38] =?UTF-8?q?=E5=8A=9F=E8=83=BD:=20=E4=BB=8E=E5=AD=98?=
 =?UTF-8?q?=E6=A1=A3=E5=8A=A0=E8=BD=BD=E6=A8=A1=E7=BB=84=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=20WebSocket=20=E5=AE=9E=E6=97=B6=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mod_portal_handler.go             | 26 +++++++++-------
 ui/App/views/Mods/components/LoadMods.jsx | 36 ++++++++++++++++++++++-
 ui/api/socket.js                          | 16 ++++++++++
 ui/locales/en/mods.json                   |  1 +
 ui/locales/zh-CN/mods.json                |  1 +
 5 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/src/api/mod_portal_handler.go b/src/api/mod_portal_handler.go
index ba4cb813..444fee83 100644
--- a/src/api/mod_portal_handler.go
+++ b/src/api/mod_portal_handler.go
@@ -5,6 +5,7 @@ import (
 	"log"
 	"net/http"
 
+	"github.com/OpenFactorioServerManager/factorio-server-manager/api/websocket"
 	"github.com/OpenFactorioServerManager/factorio-server-manager/factorio"
 	"github.com/gorilla/mux"
 )
@@ -185,40 +186,43 @@ func ModPortalInstallMultipleHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	wsRoom := websocket.WebsocketHub.GetRoom("mod_install")
+	total := len(data)
+	current := 0
+
 	for _, datum := range data {
 		// skip base mod because it is already included in factorio
 		if datum.Name == "base" {
+			current++
 			continue
 		}
 		details, err, statusCode := factorio.ModPortalModDetails(datum.Name)
 		if err != nil || statusCode != http.StatusOK {
-			resp = fmt.Sprintf("Error in getting mod details from mod portal: %s", err)
-			log.Println(resp)
-			w.WriteHeader(http.StatusInternalServerError)
-			return
+			log.Printf("Error in getting mod details from mod portal: %s", err)
+			current++
+			continue
 		}
 
-		//find correct mod-version
 		var found = false
 		for _, release := range details.Releases {
 			if release.Version.Equals(datum.Version) {
 				found = true
-
 				err := modList.DownloadMod(release.DownloadURL, release.FileName, details.Name)
 				if err != nil {
-					resp = fmt.Sprintf("Error downloading mod {%s}, error: %s", details.Name, err)
-					log.Println(resp)
-					w.WriteHeader(http.StatusInternalServerError)
-					return
+					log.Printf("Error downloading mod {%s}, error: %s", details.Name, err)
+					break
 				}
 				break
 			}
 		}
 		if !found {
 			log.Printf("Error downloading mod {%s}, error: %s", details.Name, "version not found")
-			w.WriteHeader(http.StatusInternalServerError)
 		}
+		current++
+		wsRoom.Send(fmt.Sprintf(\`{"type":"progress","current":%d,"total":%d,"name":"%s"}\`, current, total, datum.Name))
 	}
 
+	wsRoom.Send(fmt.Sprintf(\`{"type":"complete","total":%d}\`, total))
+
 	resp = modList.ListInstalledMods()
 }
diff --git a/ui/App/views/Mods/components/LoadMods.jsx b/ui/App/views/Mods/components/LoadMods.jsx
index c33616e6..368bcf28 100644
--- a/ui/App/views/Mods/components/LoadMods.jsx
+++ b/ui/App/views/Mods/components/LoadMods.jsx
@@ -9,17 +9,19 @@ import modsResource from "../../../../api/resources/mods";
 import modResource from "../../../../api/resources/mods";
 import FactorioLogin from "./AddMod/components/FactorioLogin";
 import ConfirmDialog from "../../../components/ConfirmDialog";
+import socket from "../../../../api/socket";
 
 const LoadMods = ({refreshMods}) => {
 
     const { t } = useTranslation(['mods', 'common']);
-
     const [saves, setSaves] = useState([]);
     const {register, reset, handleSubmit} = useForm();
     const [isLoading, setIsLoading] = useState(false);
     const [isDisabled, setIsDisabled] = useState(true);
     const [isFactorioAuthenticated, setIsFactorioAuthenticated] = useState(false);
     const [loadModsData, setLoadModsData] = useState(undefined);
+    const [installProgress, setInstallProgress] = useState({current: 0, total: 0});
+    const [showProgress, setShowProgress] = useState(false);
 
     useEffect(() => {
         (async () => {
@@ -32,6 +34,24 @@ const LoadMods = ({refreshMods}) => {
             }
             reset();
         })();
+
+        const handleProgress = (msg) => {
+            try {
+                const data = JSON.parse(typeof msg === 'string' ? msg : JSON.stringify(msg));
+                if (data.type === 'progress') {
+                    setInstallProgress({current: data.current, total: data.total});
+                    setShowProgress(true);
+                } else if (data.type === 'complete') {
+                    setShowProgress(false);
+                }
+            } catch (e) {}
+        };
+        socket.on('mod_install', handleProgress);
+        socket.emit('mod install subscribe');
+
+        return () => {
+            socket.off('mod_install', handleProgress);
+        };
     }, []);
 
     const loadModsRequested = data => {
@@ -74,6 +94,20 @@ const LoadMods = ({refreshMods}) => {
                 }))}
             />
             <Button isSubmit={true} isDisabled={isDisabled} isLoading={isLoading}>{t('loadMods')}</Button>
+            {showProgress && (
+                <div className="mt-4">
+                    <div className="flex justify-between text-sm text-gray-light mb-1">
+                        <span>{t('installingMods', { ns: 'mods' })}</span>
+                        <span>{installProgress.current}/{installProgress.total}</span>
+                    </div>
+                    <div className="w-full bg-gray-dark rounded h-2">
+                        <div
+                            className="bg-orange h-2 rounded transition-all duration-300"
+                            style={{width: `${installProgress.total > 0 ? (installProgress.current / installProgress.total * 100) : 0}%`}}
+                        />
+                    </div>
+                </div>
+            )}
             <ConfirmDialog
                 title={t('loadModsTitle')}
                 content={t('deleteExistingMods')}
diff --git a/ui/api/socket.js b/ui/api/socket.js
index ce494105..813e4895 100644
--- a/ui/api/socket.js
+++ b/ui/api/socket.js
@@ -63,6 +63,20 @@ function connect() {
         );
     }
 
+    function modInstallSubscribeEvent() {
+        socket.send(
+            JSON.stringify(
+                {
+                    room_name: "",
+                    controls: {
+                        type: "subscribe",
+                        value: "mod_install"
+                    }
+                }
+            )
+        );
+    }
+
     function serverVersionSubscribeEvent() {
         socket.send(
             JSON.stringify(
@@ -83,6 +97,7 @@ function connect() {
         bus.on('server status subscribe', serverStatusSubscribeEvent);
         bus.on('command send', commandSendEvent);
         bus.on('server version subscribe', serverVersionSubscribeEvent);
+        bus.on('mod install subscribe', modInstallSubscribeEvent);
     }
 
     function unregisterEventEmitter() {
@@ -91,6 +106,7 @@ function connect() {
         bus.off('server status subscribe', serverStatusSubscribeEvent);
         bus.off('command send', commandSendEvent);
         bus.off('server version subscribe', serverVersionSubscribeEvent);
+        bus.off('mod install subscribe', modInstallSubscribeEvent);
     }
 
     socket.onmessage = e => {
diff --git a/ui/locales/en/mods.json b/ui/locales/en/mods.json
index c5fd1c6a..ab6c3761 100644
--- a/ui/locales/en/mods.json
+++ b/ui/locales/en/mods.json
@@ -30,6 +30,7 @@
   "modsLoaded": "Mods loaded from save.",
   "deleteExistingMods": "Delete all existing mods before loading? Existing mods will be permanently removed.",
   "noModsFound": "No mods found in this save.",
+  "installingMods": "Installing mods",
   "compatibility": "Compatibility",
   "modVersion": "Mod Version",
   "factorioVersion": "Factorio Version"
diff --git a/ui/locales/zh-CN/mods.json b/ui/locales/zh-CN/mods.json
index 35e9fb22..e789f612 100644
--- a/ui/locales/zh-CN/mods.json
+++ b/ui/locales/zh-CN/mods.json
@@ -30,6 +30,7 @@
   "modsLoaded": "已从存档加载模组。",
   "deleteExistingMods": "加载前删除所有现有模组？现有模组将被永久移除。",
   "noModsFound": "此存档中没有模组。",
+  "installingMods": "安装模组中",
   "compatibility": "兼容性",
   "modVersion": "模组版本",
   "factorioVersion": "Factorio 版本"

From e43d47c06cbaaa583addf19a33c73e13f74ea4b2 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:25:34 +0000
Subject: [PATCH 31/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=20WebSocket=20=E8=BF=9B=E5=BA=A6=E6=B6=88=E6=81=AF=E5=AD=97?=
 =?UTF-8?q?=E7=AC=A6=E4=B8=B2=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mod_portal_handler.go | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/mod_portal_handler.go b/src/api/mod_portal_handler.go
index 444fee83..f56d7430 100644
--- a/src/api/mod_portal_handler.go
+++ b/src/api/mod_portal_handler.go
@@ -219,10 +219,10 @@ func ModPortalInstallMultipleHandler(w http.ResponseWriter, r *http.Request) {
 			log.Printf("Error downloading mod {%s}, error: %s", details.Name, "version not found")
 		}
 		current++
-		wsRoom.Send(fmt.Sprintf(\`{"type":"progress","current":%d,"total":%d,"name":"%s"}\`, current, total, datum.Name))
+		wsRoom.Send(fmt.Sprintf("{\"type\":\"progress\",\"current\":%d,\"total\":%d,\"name\":\"%s\"}", current, total, datum.Name))
 	}
 
-	wsRoom.Send(fmt.Sprintf(\`{"type":"complete","total":%d}\`, total))
+	wsRoom.Send(fmt.Sprintf("{\"type\":\"complete\",\"total\":%d}", total))
 
 	resp = modList.ListInstalledMods()
 }

From a9f4105485219ee3c8f661756af6746bbe8f0ded Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:28:48 +0000
Subject: [PATCH 32/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E7=A1=AE=E8=AE=A4?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=A8=A1=E7=BB=84=E5=90=8E=E7=AB=8B=E5=8D=B3?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E5=BC=B9=E7=AA=97=E2=80=94=E2=80=94=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E6=9D=A1=E4=B8=8D=E8=A2=AB=E9=81=AE=E6=8C=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/App/views/Mods/components/LoadMods.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/App/views/Mods/components/LoadMods.jsx b/ui/App/views/Mods/components/LoadMods.jsx
index 368bcf28..254b5bd9 100644
--- a/ui/App/views/Mods/components/LoadMods.jsx
+++ b/ui/App/views/Mods/components/LoadMods.jsx
@@ -116,7 +116,11 @@ const LoadMods = ({refreshMods}) => {
                     setIsLoading(false);
                     setLoadModsData(undefined);
                 }}
-                onSuccess={() => loadMods(loadModsData)}
+                onSuccess={() => {
+                    const data = loadModsData;
+                    setLoadModsData(undefined);
+                    setTimeout(() => loadMods(data), 0);
+                }}
             />
         </form>
         : <FactorioLogin setIsFactorioAuthenticated={setIsFactorioAuthenticated}/>

From 38bf0a49b3c4af6088fccf4aea54b5e624b67dd8 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:30:55 +0000
Subject: [PATCH 33/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20ConfirmDialog=20?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E7=A1=AE=E8=AE=A4=E5=90=8E=E7=AB=8B=E5=8D=B3?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E2=80=94=E2=80=94=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
 =?UTF-8?q?=E4=B8=8D=E8=A2=AB=E9=81=AE=E6=8C=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/App/components/ConfirmDialog.jsx       | 7 ++-----
 ui/App/views/Mods/components/LoadMods.jsx | 3 +--
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/ui/App/components/ConfirmDialog.jsx b/ui/App/components/ConfirmDialog.jsx
index 3e902068..10f02a20 100644
--- a/ui/App/components/ConfirmDialog.jsx
+++ b/ui/App/components/ConfirmDialog.jsx
@@ -10,11 +10,8 @@ function ConfirmDialog({title, content, isOpen, close, onSuccess}) {
 
     const confirm = () => {
         setIsLoading(true);
-        onSuccess()
-            .finally(() => {
-                close();
-                setIsLoading(false);
-            })
+        close();
+        onSuccess?.();
     }
 
     return (
diff --git a/ui/App/views/Mods/components/LoadMods.jsx b/ui/App/views/Mods/components/LoadMods.jsx
index 254b5bd9..bf1bfdd4 100644
--- a/ui/App/views/Mods/components/LoadMods.jsx
+++ b/ui/App/views/Mods/components/LoadMods.jsx
@@ -118,8 +118,7 @@ const LoadMods = ({refreshMods}) => {
                 }}
                 onSuccess={() => {
                     const data = loadModsData;
-                    setLoadModsData(undefined);
-                    setTimeout(() => loadMods(data), 0);
+                    loadMods(data);
                 }}
             />
         </form>

From 1b6192469dbf346bf132cfb49e402596efcae611 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:34:39 +0000
Subject: [PATCH 34/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20ConfirmDialog=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20closeImmediately=20=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E2=80=94=E2=80=94=E4=BB=85=E5=85=B3=E9=97=AD=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E4=B8=8D=E7=AD=89=E5=BE=85=20Promise?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/App/components/ConfirmDialog.jsx       | 14 +++++++++++---
 ui/App/views/Mods/components/LoadMods.jsx |  1 +
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/ui/App/components/ConfirmDialog.jsx b/ui/App/components/ConfirmDialog.jsx
index 10f02a20..124a552d 100644
--- a/ui/App/components/ConfirmDialog.jsx
+++ b/ui/App/components/ConfirmDialog.jsx
@@ -3,15 +3,23 @@ import { useTranslation } from 'react-i18next';
 import Modal from "./Modal";
 import Button from "./Button";
 
-function ConfirmDialog({title, content, isOpen, close, onSuccess}) {
+function ConfirmDialog({title, content, isOpen, close, onSuccess, closeImmediately}) {
 
     const { t } = useTranslation('common');
     const [isLoading, setIsLoading] = useState(false);
 
     const confirm = () => {
         setIsLoading(true);
-        close();
-        onSuccess?.();
+        if (closeImmediately) {
+            close();
+            onSuccess?.();
+        } else {
+            onSuccess()
+                .finally(() => {
+                    close();
+                    setIsLoading(false);
+                })
+        }
     }
 
     return (
diff --git a/ui/App/views/Mods/components/LoadMods.jsx b/ui/App/views/Mods/components/LoadMods.jsx
index bf1bfdd4..905ade9b 100644
--- a/ui/App/views/Mods/components/LoadMods.jsx
+++ b/ui/App/views/Mods/components/LoadMods.jsx
@@ -120,6 +120,7 @@ const LoadMods = ({refreshMods}) => {
                     const data = loadModsData;
                     loadMods(data);
                 }}
+                closeImmediately={true}
             />
         </form>
         : <FactorioLogin setIsFactorioAuthenticated={setIsFactorioAuthenticated}/>

From 24749f0c469f2fb203623d9e168ba1279d4d98d2 Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:40:13 +0000
Subject: [PATCH 35/38] =?UTF-8?q?=E5=8A=9F=E8=83=BD:=20=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E6=A8=A1=E7=BB=84=E8=BF=9B=E5=BA=A6=E6=9D=A1=E6=97=81=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=8F=96=E6=B6=88=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/App/views/Mods/components/LoadMods.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/App/views/Mods/components/LoadMods.jsx b/ui/App/views/Mods/components/LoadMods.jsx
index 905ade9b..eb6c0050 100644
--- a/ui/App/views/Mods/components/LoadMods.jsx
+++ b/ui/App/views/Mods/components/LoadMods.jsx
@@ -93,7 +93,12 @@ const LoadMods = ({refreshMods}) => {
                     value: save.name
                 }))}
             />
-            <Button isSubmit={true} isDisabled={isDisabled} isLoading={isLoading}>{t('loadMods')}</Button>
+            <div className="flex space-x-2">
+                <Button isSubmit={true} isDisabled={isDisabled} isLoading={isLoading}>{t('loadMods')}</Button>
+                {showProgress && (
+                    <Button type="danger" onClick={() => window.location.reload()}>{t('cancel', { ns: 'common' })}</Button>
+                )}
+            </div>
             {showProgress && (
                 <div className="mt-4">
                     <div className="flex justify-between text-sm text-gray-light mb-1">

From b26dfaff5985af3a3072d736a52525ef5775870a Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:59:34 +0000
Subject: [PATCH 36/38] =?UTF-8?q?=E5=8A=9F=E8=83=BD:=20=E5=AD=98=E6=A1=A3?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=A8=A1=E7=BB=84=E5=A2=9E=E5=8A=A0=20Checkl?=
 =?UTF-8?q?ist=20=E5=8B=BE=E9=80=89=E8=A6=81=E5=AE=89=E8=A3=85=E7=9A=84?=
 =?UTF-8?q?=E6=A8=A1=E7=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/App/views/Mods/components/LoadMods.jsx | 108 +++++++++++++++++-----
 ui/locales/en/mods.json                   |   5 +
 ui/locales/zh-CN/mods.json                |   5 +
 3 files changed, 96 insertions(+), 22 deletions(-)

diff --git a/ui/App/views/Mods/components/LoadMods.jsx b/ui/App/views/Mods/components/LoadMods.jsx
index eb6c0050..ae4f6bbf 100644
--- a/ui/App/views/Mods/components/LoadMods.jsx
+++ b/ui/App/views/Mods/components/LoadMods.jsx
@@ -8,7 +8,7 @@ import Button from "../../../components/Button";
 import modsResource from "../../../../api/resources/mods";
 import modResource from "../../../../api/resources/mods";
 import FactorioLogin from "./AddMod/components/FactorioLogin";
-import ConfirmDialog from "../../../components/ConfirmDialog";
+import Modal from "../../../components/Modal";
 import socket from "../../../../api/socket";
 
 const LoadMods = ({refreshMods}) => {
@@ -22,6 +22,9 @@ const LoadMods = ({refreshMods}) => {
     const [loadModsData, setLoadModsData] = useState(undefined);
     const [installProgress, setInstallProgress] = useState({current: 0, total: 0});
     const [showProgress, setShowProgress] = useState(false);
+    const [modList, setModList] = useState([]);
+    const [selectedMods, setSelectedMods] = useState(new Set());
+    const [showModList, setShowModList] = useState(false);
 
     useEffect(() => {
         (async () => {
@@ -54,30 +57,65 @@ const LoadMods = ({refreshMods}) => {
         };
     }, []);
 
-    const loadModsRequested = data => {
+    const loadModsRequested = async data => {
         setIsLoading(true);
+        const result = await savesResource.mods(data.save);
+        const mods = result?.mods || [];
+        
+        if (mods.length === 0) {
+            window.flash(t('noModsFound', { ns: 'mods' }), "green");
+            setIsLoading(false);
+            return;
+        }
+
+        setModList(mods.filter(m => m.name !== 'base'));
+        setSelectedMods(new Set(mods.filter(m => m.name !== 'base').map(m => m.name)));
         setLoadModsData(data);
+        setShowModList(true);
+        setIsLoading(false);
+    }
+
+    const toggleMod = (name) => {
+        const next = new Set(selectedMods);
+        if (next.has(name)) {
+            next.delete(name);
+        } else {
+            next.add(name);
+        }
+        setSelectedMods(next);
+    }
+
+    const selectAll = () => {
+        setSelectedMods(new Set(modList.map(m => m.name)));
     }
 
-    const loadMods = async data => {
+    const deselectAll = () => {
+        setSelectedMods(new Set());
+    }
+
+    const loadMods = async () => {
+        const data = loadModsData;
+        setShowModList(false);
+        setLoadModsData(undefined);
+        setIsLoading(true);
+
         try {
             await modResource.deleteAll();
-            const result = await savesResource.mods(data.save);
-            const mods = result?.mods || [];
+            const toInstall = modList.filter(m => selectedMods.has(m.name));
             
-            if (mods.length === 0) {
-                window.flash(t('noModsFound', { ns: 'mods' }), "green");
+            if (toInstall.length === 0) {
+                window.flash(t('noModsSelected', { ns: 'mods' }), "gray-light");
                 return;
             }
 
-            await modResource.portal.installMultiple(mods);
+            await modResource.portal.installMultiple(toInstall);
             refreshMods();
             window.flash(t('modsLoaded').replace('{save}', data.save), "green");
         } catch (e) {
             window.flash(t('errorOccurred', { ns: 'common' }), "red");
         } finally {
             setIsLoading(false);
-            setLoadModsData(undefined);
+            setShowProgress(false);
         }
     }
 
@@ -94,7 +132,7 @@ const LoadMods = ({refreshMods}) => {
                 }))}
             />
             <div className="flex space-x-2">
-                <Button isSubmit={true} isDisabled={isDisabled} isLoading={isLoading}>{t('loadMods')}</Button>
+                <Button isSubmit={true} isDisabled={isDisabled || isLoading}>{t('loadMods')}</Button>
                 {showProgress && (
                     <Button type="danger" onClick={() => window.location.reload()}>{t('cancel', { ns: 'common' })}</Button>
                 )}
@@ -113,19 +151,45 @@ const LoadMods = ({refreshMods}) => {
                     </div>
                 </div>
             )}
-            <ConfirmDialog
+            <Modal
                 title={t('loadModsTitle')}
-                content={t('deleteExistingMods')}
-                isOpen={loadModsData !== undefined}
-                close={() => {
-                    setIsLoading(false);
-                    setLoadModsData(undefined);
-                }}
-                onSuccess={() => {
-                    const data = loadModsData;
-                    loadMods(data);
-                }}
-                closeImmediately={true}
+                isOpen={showModList}
+                content={
+                    <div>
+                        <p className="mb-3 text-sm">{t('selectModsToInstall', { ns: 'mods' })}</p>
+                        <div className="flex space-x-2 mb-3">
+                            <Button size="sm" onClick={selectAll}>{t('selectAll', { ns: 'mods' })}</Button>
+                            <Button size="sm" onClick={deselectAll}>{t('deselectAll', { ns: 'mods' })}</Button>
+                        </div>
+                        <div className="max-h-96 overflow-y-auto">
+                            <table className="w-full">
+                                <tbody>
+                                    {modList.map(mod => (
+                                        <tr key={mod.name} className="border-b border-gray-light cursor-pointer hover:bg-gray-dark"
+                                            onClick={() => toggleMod(mod.name)}>
+                                            <td className="py-1 pr-2">
+                                                <input type="checkbox" checked={selectedMods.has(mod.name)} readOnly
+                                                    className="cursor-pointer" />
+                                            </td>
+                                            <td className="py-1 text-dirty-white">{mod.name}</td>
+                                            <td className="py-1 text-gray-light text-sm text-right">{mod.version}</td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                }
+                actions={
+                    <div className="flex space-x-2">
+                        <Button size="sm" type="danger" onClick={() => { setShowModList(false); setLoadModsData(undefined); }}>
+                            {t('cancel', { ns: 'common' })}
+                        </Button>
+                        <Button size="sm" type="success" onClick={loadMods}>
+                            {t('installSelected', { ns: 'mods' }).replace('{count}', selectedMods.size)}
+                        </Button>
+                    </div>
+                }
             />
         </form>
         : <FactorioLogin setIsFactorioAuthenticated={setIsFactorioAuthenticated}/>
diff --git a/ui/locales/en/mods.json b/ui/locales/en/mods.json
index ab6c3761..a0c1e14b 100644
--- a/ui/locales/en/mods.json
+++ b/ui/locales/en/mods.json
@@ -31,6 +31,11 @@
   "deleteExistingMods": "Delete all existing mods before loading? Existing mods will be permanently removed.",
   "noModsFound": "No mods found in this save.",
   "installingMods": "Installing mods",
+  "selectAll": "Select All",
+  "deselectAll": "Deselect All",
+  "selectModsToInstall": "Select mods to install from this save:",
+  "installSelected": "Install ({count})",
+  "noModsSelected": "No mods selected.",
   "compatibility": "Compatibility",
   "modVersion": "Mod Version",
   "factorioVersion": "Factorio Version"
diff --git a/ui/locales/zh-CN/mods.json b/ui/locales/zh-CN/mods.json
index e789f612..3f4404ce 100644
--- a/ui/locales/zh-CN/mods.json
+++ b/ui/locales/zh-CN/mods.json
@@ -31,6 +31,11 @@
   "deleteExistingMods": "加载前删除所有现有模组？现有模组将被永久移除。",
   "noModsFound": "此存档中没有模组。",
   "installingMods": "安装模组中",
+  "selectAll": "全选",
+  "deselectAll": "取消全选",
+  "selectModsToInstall": "选择要从此存档安装的模组：",
+  "installSelected": "安装 ({count})",
+  "noModsSelected": "未选择任何模组。",
   "compatibility": "兼容性",
   "modVersion": "模组版本",
   "factorioVersion": "Factorio 版本"

From c497c95e28b395aca843ce4a4b389735b252d2ce Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 12:23:19 +0000
Subject: [PATCH 37/38] =?UTF-8?q?=E8=B0=83=E6=95=B4:=20=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E9=80=82=E9=85=8D=E6=89=8B=E6=9C=BA=E2=80=94?=
 =?UTF-8?q?=E2=80=94=E7=A7=BB=E5=8A=A8=E7=AB=AF=2011/12=20=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/App/components/Modal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/App/components/Modal.jsx b/ui/App/components/Modal.jsx
index 021ed680..ae381248 100644
--- a/ui/App/components/Modal.jsx
+++ b/ui/App/components/Modal.jsx
@@ -11,7 +11,7 @@ const Modal = ({title, content, isOpen, actions = null}) => {
             <div className="bg-black bg-opacity-75 fixed top-0 left-0 z-10 w-full min-h-screen">
                 <Panel
                     title={title}
-                    className="w-1/3 mx-auto mt-6"
+                    className="w-11/12 md:w-1/2 lg:w-1/3 mx-auto mt-6"
                     content={content}
                     actions={actions}
                 />

From d1eb10a86221103685052e882d6ee0a404f8dfeb Mon Sep 17 00:00:00 2001
From: BAYUNZIYUE <BAYUNZIYUE@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:02:14 +0000
Subject: [PATCH 38/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E9=94=81=E5=A2=9E=E5=8A=A0=2030=20=E7=A7=92=E8=B6=85=E6=97=B6?=
 =?UTF-8?q?=E2=80=94=E2=80=94=E9=98=B2=E6=AD=A2=E6=AD=BB=E9=94=81=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E9=A1=B5=E9=9D=A2=E5=8D=A1=E6=AD=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/factorio/mod_modInfo.go |  1 -
 src/lockfile/lockfile.go    | 25 ++++++++++++++-----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/factorio/mod_modInfo.go b/src/factorio/mod_modInfo.go
index 6397aa0a..3e9225c4 100644
--- a/src/factorio/mod_modInfo.go
+++ b/src/factorio/mod_modInfo.go
@@ -144,7 +144,6 @@ func (modInfoList *ModInfoList) deleteMod(modName string) error {
 			filePath := filepath.Join(modInfoList.Destination, mod.FileName)
 
 			FileLock.LockW(filePath)
-			//delete mod
 			err = os.Remove(filePath)
 			FileLock.Unlock(filePath)
 			if err != nil {
diff --git a/src/lockfile/lockfile.go b/src/lockfile/lockfile.go
index 6e7b653d..7162b076 100644
--- a/src/lockfile/lockfile.go
+++ b/src/lockfile/lockfile.go
@@ -107,33 +107,36 @@ func (fl *FileLock) RUnlock(filePath string) error {
 	return nil
 }
 
-func (fl *FileLock) LockW(filePath string) {
+func (fl *FileLock) LockW(filePath string) error {
+	deadline := time.Now().Add(30 * time.Second)
 	for {
 		err := fl.Lock(filePath)
 		if err == ErrorAlreadyLocked {
+			if time.Now().After(deadline) {
+				log.Printf("file lock timeout for %s, giving up", filePath)
+				return errors.New("file lock timeout")
+			}
 			time.Sleep(time.Second * 2)
-			log.Println("file locked wait two seconds to access write-lock")
 		}
-
 		if err == nil {
-			break
+			return nil
 		}
 	}
-	return
 }
 
-func (fl *FileLock) RLockW(filePath string) {
+func (fl *FileLock) RLockW(filePath string) error {
+	deadline := time.Now().Add(30 * time.Second)
 	for {
 		err := fl.RLock(filePath)
-
 		if err == ErrorAlreadyLocked {
+			if time.Now().After(deadline) {
+				log.Printf("file read-lock timeout for %s, skipping", filePath)
+				return errors.New("file read-lock timeout")
+			}
 			time.Sleep(time.Second * 2)
-			log.Println("file locked ... wait two seconds to try to access read-lock")
 		}
-
 		if err == nil {
-			break
+			return nil
 		}
 	}
-	return
 }