RPG Companion Settings Pop-up window [done]

src/core/i18n.js

@@ -41,14 +41,36 @@ class Internationalization {
         if (!rootElement) {
             return;
         }
-        const elements = rootElement.querySelectorAll('[data-i18n-key]');
+
-        elements.forEach(element => {
+        // 1. Translate textContent
+        const textElements = rootElement.querySelectorAll('[data-i18n-key]');
+        textElements.forEach(element => {
             const key = element.dataset.i18nKey;
             const translation = this.getTranslation(key);
             if (translation) {
                 element.textContent = translation;
             }
         });
+
+        // 2. Translate title attribute
+        const titleElements = rootElement.querySelectorAll('[data-i18n-title]');
+        titleElements.forEach(element => {
+            const key = element.dataset.i18nTitle;
+            const translation = this.getTranslation(key);
+            if (translation) {
+                element.setAttribute('title', translation);
+            }
+        });
+
+        // 3. Translate aria-label attribute
+        const ariaLabelElements = rootElement.querySelectorAll('[data-i18n-aria-label]');
+        ariaLabelElements.forEach(element => {
+            const key = element.dataset.i18nAriaLabel;
+            const translation = this.getTranslation(key);
+            if (translation) {
+                element.setAttribute('aria-label', translation);
+            }
+        });
     }
 
     getTranslation(key) {

src/i18n/en.json

@@ -2,5 +2,62 @@
     "settings.language.label": "Language",
     "settings.language.option.en": "English",
     "settings.language.option.zh-tw": "繁體中文",
-    "template.settingsTitle": "RPG Companion Settings"
+    "template.settingsTitle": "RPG Companion Settings",
-}
+    "template.settingsModal.themeTitle": "Theme",
+    "template.settingsModal.themeLabel": "Visual Theme:",
+    "template.settingsModal.themeOptions.default": "Default",
+    "template.settingsModal.themeOptions.sciFi": "Sci-Fi (Synthwave)",
+    "template.settingsModal.themeOptions.fantasy": "Fantasy (Rustic Parchment)",
+    "template.settingsModal.themeOptions.cyberpunk": "Cyberpunk (Neon Grid)",
+    "template.settingsModal.themeOptions.custom": "Custom",
+    "template.settingsModal.themeOptions.custom.background": "Background:",
+    "template.settingsModal.themeOptions.custom.accent": "Accent:",
+    "template.settingsModal.themeOptions.custom.text": "Text:",
+    "template.settingsModal.themeOptions.custom.highlight": "Highlight:",
+    "template.settingsModal.theme.statBarLow": "Stat Bar Color (Low):",
+    "template.settingsModal.theme.statBarLowNote": "Color when stats are at 0%",
+    "template.settingsModal.theme.statBarHigh": "Stat Bar Color (High):",
+    "template.settingsModal.theme.statBarHighNote": "Color when stats are at 100%",
+    "template.settingsModal.displayTitle": "Display Options",
+    "template.settingsModal.displayNote": "Use the Extensions tab to enable/disable the RPG Companion extension.",
+    "template.settingsModal.display.panelPosition": "Panel Position:",
+    "template.settingsModal.display.panelPositionOptions.right": "Right Sidebar",
+    "template.settingsModal.display.panelPositionOptions.left": "Left Sidebar",
+    "template.settingsModal.display.toggleAutoUpdate": "Auto-update after messages",
+    "template.settingsModal.display.showUserStats": "Show User Stats",
+    "template.settingsModal.display.showInfoBox": "Show Info Box",
+    "template.settingsModal.display.showPresentCharacters": "Show Present Characters",
+    "template.settingsModal.display.showInventory": "Show Inventory",
+    "template.settingsModal.display.showThoughtsInChat": "Show Thoughts in Chat",
+    "template.settingsModal.display.showThoughtsInChatNote": "Display character thoughts as overlay bubbles next to their messages",
+    "template.settingsModal.display.alwaysShowThoughtBubble": "Always Show Thought Bubble",
+    "template.settingsModal.display.alwaysShowThoughtBubbleNote": "Auto-expand thought bubble without clicking the icon first",
+    "template.settingsModal.display.enableAnimations": "Enable Animations",
+    "template.settingsModal.display.enableAnimationsNote": "Smooth transitions for stats, content updates, and dice rolls",
+    "template.settingsModal.display.showPlotProgressionButtons": "Show Plot Progression Buttons",
+    "template.settingsModal.display.showPlotProgressionButtonsNote": "Display buttons above chat input for plot progression prompts",
+    "template.settingsModal.display.enableDebugMode": "Enable Debug Mode",
+    "template.settingsModal.display.enableDebugModeNote": "Shows parser logs in a mobile-friendly UI panel. Useful for troubleshooting. Look for the red bug button.",
+    "template.settingsModal.advancedTitle": "Advanced",
+    "template.settingsModal.advanced.generationMode": "Generation Mode:",
+    "template.settingsModal.advanced.generationModeOptions.together": "Together with Main Generation",
+    "template.settingsModal.advanced.generationModeOptions.separate": "Separate Generation",
+    "template.settingsModal.advanced.generationModeNote": "Together: Adds RPG tracking to main roleplay. Separate: Generates RPG data separately (manual or auto).",
+    "template.settingsModal.advanced.contextMessages": "Context Messages:",
+    "template.settingsModal.advanced.contextMessagesNote": "Number of recent messages to include (Separate mode only)",
+    "template.settingsModal.advanced.memoryBatchSize": "Memory Batch Size:",
+    "template.settingsModal.advanced.memoryBatchSizeNote": "Number of messages to process per batch in Memory Recollection",
+    "template.settingsModal.advanced.useSeparatePreset": "Use model connected to RPG Companion Trackers preset",
+    "template.settingsModal.advanced.useSeparatePresetNote": "Separate mode only. When enabled, tracker generation will use the model from the \"RPG Companion Trackers\" preset instead of your main API model. The preset will be switched automatically during generation and restored afterward. Select the desired model in that preset and make sure the \"Bind presets to API connections\" toggle is on (next to the import/export preset buttons).",
+    "template.settingsModal.advanced.skipInjections": "Skip Injections during Guided Generations:",
+    "template.settingsModal.advanced.skipInjectionsOptions.none": "Never skip",
+    "template.settingsModal.advanced.skipInjectionsOptions.impersonation": "Only on impersonation requests",
+    "template.settingsModal.advanced.skipInjectionsOptions.guided": "Always for guided or quiet prompts",
+    "template.settingsModal.advanced.skipInjectionsNote": "When set, the extension will not inject tracker prompts, examples, or HTML instructions according to the selected mode when a guided generation (via `instruct` or `quiet_prompt`) is detected. Useful when using GuidedGenerations or similar extensions.",
+    "template.settingsModal.advanced.customHtmlPromptTitle": "Custom HTML Prompt:",
+    "template.settingsModal.advanced.restoreDefaultHtmlPrompt": "Restore Default",
+    "template.settingsModal.advanced.customHtmlPromptNote": "Customize the HTML prompt injected when \"Enable Immersive HTML\" is enabled. The default prompt is shown above - you can edit it directly or replace it entirely. Click \"Restore Default\" to reset. This affects all generation modes (together, separate, and plot progression).",
+    "template.settingsModal.advanced.clearCache": "Clear Extension Cache",
+    "template.settingsModal.advanced.resetFabPositions": "Reset Button Positions",
+    "template.settingsModal.advanced.resetFabPositionsNote": "Resets all floating action buttons (toggle, refresh, debug) to default top-left positions. Useful if buttons are off-screen."
+}

src/i18n/zh-tw.json

@@ -2,5 +2,62 @@
     "settings.language.label": "語言",
     "settings.language.option.en": "English",
     "settings.language.option.zh-tw": "繁體中文",
-    "template.settingsTitle": "RPG Companion 設定"
+    "template.settingsTitle": "RPG Companion 設定",
+    "template.settingsModal.themeTitle": "主題",
+    "template.settingsModal.themeLabel": "可選主題：",
+    "template.settingsModal.themeOptions.default": "預設",
+    "template.settingsModal.themeOptions.sciFi": "科幻 (合成波)",
+    "template.settingsModal.themeOptions.fantasy": "奇幻 (古樸羊皮紙)",
+    "template.settingsModal.themeOptions.cyberpunk": "賽博朋克 (霓虹網格)",
+    "template.settingsModal.themeOptions.custom": "自訂",
+    "template.settingsModal.themeOptions.custom.background": "背景：",
+    "template.settingsModal.themeOptions.custom.accent": "強調色：",
+    "template.settingsModal.themeOptions.custom.text": "文字：",
+    "template.settingsModal.themeOptions.custom.highlight": "高亮：",
+    "template.settingsModal.theme.statBarLow": "屬性條顏色 (低)：",
+    "template.settingsModal.theme.statBarLowNote": "屬性在 0% 時的顏色",
+    "template.settingsModal.theme.statBarHigh": "屬性條顏色 (高)：",
+    "template.settingsModal.theme.statBarHighNote": "屬性在 100% 時的顏色",
+    "template.settingsModal.displayTitle": "顯示設定", 
+    "template.settingsModal.displayNote": "使用擴充功能標籤來啟用/停用 RPG Companion 擴充功能。",
+    "template.settingsModal.display.panelPosition": "面板位置：",
+    "template.settingsModal.display.panelPositionOptions.right": "右側邊欄",
+    "template.settingsModal.display.panelPositionOptions.left": "左側邊欄",
+    "template.settingsModal.display.toggleAutoUpdate": "訊息後自動更新",   
+    "template.settingsModal.display.showUserStats": "顯示 user 屬性",
+    "template.settingsModal.display.showInfoBox": "顯示資訊框",
+    "template.settingsModal.display.showPresentCharacters": "顯示在場角色",
+    "template.settingsModal.display.showInventory": "顯示物品欄",
+    "template.settingsModal.display.showThoughtsInChat": "在聊天中顯示想法",
+    "template.settingsModal.display.showThoughtsInChatNote": "將角色想法顯示為其訊息旁的泡泡",
+    "template.settingsModal.display.alwaysShowThoughtBubble": "始終顯示想法泡泡",
+    "template.settingsModal.display.alwaysShowThoughtBubbleNote": "自動展開想法泡泡",
+    "template.settingsModal.display.enableAnimations": "啟用動畫",
+    "template.settingsModal.display.enableAnimationsNote": "屬性、內容更新和擲骰的動畫效果",
+    "template.settingsModal.display.showPlotProgressionButtons": "顯示劇情推進按鈕（QR）",
+    "template.settingsModal.display.showPlotProgressionButtonsNote": "在聊天輸入框上方顯示劇情推進提示按鈕（QR）",
+    "template.settingsModal.display.enableDebugMode": "Debug Mode",
+    "template.settingsModal.display.enableDebugModeNote": "UI 面板中顯示日誌，對於故障排除很有用。",
+    "template.settingsModal.advancedTitle": "進階",
+    "template.settingsModal.advanced.generationMode": "生成模式：",
+    "template.settingsModal.advanced.generationModeOptions.together": "同時生成",
+    "template.settingsModal.advanced.generationModeOptions.separate": "單獨生成",
+    "template.settingsModal.advanced.generationModeNote": "同時生成：將 RPG 追蹤添加到主要提示詞中一同生成。單獨生成：分開生成 RPG 數據。（就是手動或自動的差別）。",
+    "template.settingsModal.advanced.contextMessages": "上下文訊息：",
+    "template.settingsModal.advanced.contextMessagesNote": "包含的最近訊息數量（僅限單獨生成模式）",
+    "template.settingsModal.advanced.memoryBatchSize": "記憶批次大小：",
+    "template.settingsModal.advanced.memoryBatchSizeNote": "在記憶回憶中每批處理的訊息數量",
+    "template.settingsModal.advanced.useSeparatePreset": "使用 RPG Companion 追蹤預設模型（設置次要模型）",
+    "template.settingsModal.advanced.useSeparatePresetNote": "僅限單獨生成模式。啟用後將使用“RPG Companion Trackers”預設中綁定的模型，而不是您的主要 API 模型。生成期間會自動切換預設，之後會恢復原使用預設。請在“RPG Companion Trackers”預設中選擇次要模型，並確保“將預設綁定到 API 連接”切換已開啟（在導入/導出預設按鈕旁邊）。",
+    "template.settingsModal.advanced.skipInjections": "在引導生成期間跳過注入：",
+    "template.settingsModal.advanced.skipInjectionsOptions.none": "從不跳過",
+    "template.settingsModal.advanced.skipInjectionsOptions.impersonation": "僅在模擬請求時跳過",
+    "template.settingsModal.advanced.skipInjectionsOptions.guided": "始終跳過引導",
+    "template.settingsModal.advanced.skipInjectionsNote": "當設置後，擴充功能在檢測到引導生成（通過 `instruct` 或 `quiet_prompt`）時，將根據所選模式不注入追蹤提示詞、範例或 HTML 指令。當與 GuidedGenerations 或類似擴充功能一起使用時非常有用。",
+    "template.settingsModal.advanced.customHtmlPromptTitle": "自訂 HTML 提示詞：",
+    "template.settingsModal.advanced.restoreDefaultHtmlPrompt": "恢復預設",
+    "template.settingsModal.advanced.customHtmlPromptNote": "自訂啟用“啟用沉浸式 HTML”時注入的 HTML 提示詞。上方顯示預設提示詞 - 您可以直接編輯或完全替換它。點擊“恢復預設”以重置。這會影響所有生成模式（同時、單獨和劇情推進）。",
+    "template.settingsModal.advanced.clearCache": "清除擴充功能快取",
+    "template.settingsModal.advanced.resetFabPositions": "重置按鈕位置",
+    "template.settingsModal.advanced.resetFabPositionsNote": "將所有浮動操作按鈕（切換、刷新、調試）重置為預設的左上位置。如果按鈕在螢幕外，這會很有用。"
 }

template.html

@@ -98,178 +98,178 @@
         </header>
         <div class="rpg-settings-popup-body">
             <div class="rpg-settings-group">
-                <h4><i class="fa-solid fa-palette" aria-hidden="true"></i> Theme</h4>
+                <h4 data-i18n-key="template.settingsModal.themeTitle"><i class="fa-solid fa-palette" aria-hidden="true"></i> Theme</h4>
                 <div class="rpg-setting-row">
-                    <label for="rpg-theme-select">Visual Theme:</label>
+                    <label for="rpg-theme-select" data-i18n-key="template.settingsModal.themeLabel">Visual Theme:</label>
                     <select id="rpg-theme-select" class="rpg-select">
-                        <option value="default">Default</option>
+                        <option value="default" data-i18n-key="template.settingsModal.themeOptions.default">Default</option>
-                        <option value="sci-fi">Sci-Fi (Synthwave)</option>
+                        <option value="sci-fi" data-i18n-key="template.settingsModal.themeOptions.sciFi">Sci-Fi (Synthwave)</option>
-                        <option value="fantasy">Fantasy (Rustic Parchment)</option>
+                        <option value="fantasy" data-i18n-key="template.settingsModal.themeOptions.fantasy">Fantasy (Rustic Parchment)</option>
-                        <option value="cyberpunk">Cyberpunk (Neon Grid)</option>
+                        <option value="cyberpunk" data-i18n-key="template.settingsModal.themeOptions.cyberpunk">Cyberpunk (Neon Grid)</option>
-                        <option value="custom">Custom</option>
+                        <option value="custom" data-i18n-key="template.settingsModal.themeOptions.custom">Custom</option>
                     </select>
                 </div>
 
                 <!-- Custom Theme Colors (Hidden by default) -->
                 <div id="rpg-custom-colors" class="rpg-custom-colors" style="display: none;">
                     <div class="rpg-setting-row">
-                        <label for="rpg-custom-bg">Background:</label>
+                        <label for="rpg-custom-bg" data-i18n-key="template.settingsModal.themeOptions.custom.background">Background:</label>
                         <input type="color" id="rpg-custom-bg" value="#1a1a2e" />
                     </div>
                     <div class="rpg-setting-row">
-                        <label for="rpg-custom-accent">Accent:</label>
+                        <label for="rpg-custom-accent" data-i18n-key="template.settingsModal.themeOptions.custom.accent">Accent:</label>
                         <input type="color" id="rpg-custom-accent" value="#16213e" />
                     </div>
                     <div class="rpg-setting-row">
-                        <label for="rpg-custom-text">Text:</label>
+                        <label for="rpg-custom-text" data-i18n-key="template.settingsModal.themeOptions.custom.text">Text:</label>
                         <input type="color" id="rpg-custom-text" value="#eaeaea" />
                     </div>
                     <div class="rpg-setting-row">
-                        <label for="rpg-custom-highlight">Highlight:</label>
+                        <label for="rpg-custom-highlight" data-i18n-key="template.settingsModal.themeOptions.custom.highlight">Highlight:</label>
                         <input type="color" id="rpg-custom-highlight" value="#e94560" />
                     </div>
                 </div>
 
                 <div class="rpg-setting-row">
-                    <label for="rpg-stat-bar-color-low">Stat Bar Color (Low):</label>
+                    <label for="rpg-stat-bar-color-low" data-i18n-key="template.settingsModal.theme.statBarLow">Stat Bar Color (Low):</label>
                     <input type="color" id="rpg-stat-bar-color-low" value="#cc3333" />
-                    <small>Color when stats are at 0%</small>
+                    <small data-i18n-key="template.settingsModal.theme.statBarLowNote">Color when stats are at 0%</small>
                 </div>
 
                 <div class="rpg-setting-row">
-                    <label for="rpg-stat-bar-color-high">Stat Bar Color (High):</label>
+                    <label for="rpg-stat-bar-color-high" data-i18n-key="template.settingsModal.theme.statBarHigh">Stat Bar Color (High):</label>
                     <input type="color" id="rpg-stat-bar-color-high" value="#33cc66" />
-                    <small>Color when stats are at 100%</small>
+                    <small data-i18n-key="template.settingsModal.theme.statBarHighNote">Color when stats are at 100%</small>
                 </div>
             </div>
 
             <div class="rpg-settings-group">
-                <h4><i class="fa-solid fa-toggle-on" aria-hidden="true"></i> Display Options</h4>
+                <h4 data-i18n-key="template.settingsModal.displayTitle"><i class="fa-solid fa-toggle-on" aria-hidden="true"></i> Display Options</h4>
-                <small class="notes" style="display: block; margin-bottom: 10px;">
+                <small class="notes" style="display: block; margin-bottom: 10px;" data-i18n-key="template.settingsModal.displayNote">
                     <i class="fa-solid fa-info-circle" aria-hidden="true"></i> Use the Extensions tab to enable/disable the RPG Companion extension.
                 </small>
 
                 <div class="rpg-setting-row">
-                    <label for="rpg-position-select">Panel Position:</label>
+                    <label for="rpg-position-select" data-i18n-key="template.settingsModal.display.panelPosition">Panel Position:</label>
                     <select id="rpg-position-select" class="rpg-select">
-                        <option value="right">Right Sidebar</option>
+                        <option value="right" data-i18n-key="template.settingsModal.display.panelPositionOptions.right">Right Sidebar</option>
-                        <option value="left">Left Sidebar</option>
+                        <option value="left" data-i18n-key="template.settingsModal.display.panelPositionOptions.left">Left Sidebar</option>
                     </select>
                 </div>
 
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-toggle-auto-update" />
-                    <span>Auto-update after messages</span>
+                    <span data-i18n-key="template.settingsModal.display.toggleAutoUpdate">Auto-update after messages</span>
                 </label>
 
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-toggle-user-stats" />
-                    <span>Show User Stats</span>
+                    <span data-i18n-key="template.settingsModal.display.showUserStats">Show User Stats</span>
                 </label>
 
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-toggle-info-box" />
-                    <span>Show Info Box</span>
+                    <span data-i18n-key="template.settingsModal.display.showInfoBox">Show Info Box</span>
                 </label>
 
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-toggle-thoughts" />
-                    <span>Show Present Characters</span>
+                    <span data-i18n-key="template.settingsModal.display.showPresentCharacters">Show Present Characters</span>
                 </label>
 
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-toggle-inventory" />
-                    <span>Show Inventory</span>
+                    <span data-i18n-key="template.settingsModal.display.showInventory">Show Inventory</span>
                 </label>
 
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-toggle-thoughts-in-chat" />
-                    <span>Show Thoughts in Chat</span>
+                    <span data-i18n-key="template.settingsModal.display.showThoughtsInChat">Show Thoughts in Chat</span>
                 </label>
-                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
+                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;" data-i18n-key="template.settingsModal.display.showThoughtsInChatNote">
                     Display character thoughts as overlay bubbles next to their messages
                 </small>
 
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-toggle-always-show-bubble" />
-                    <span>Always Show Thought Bubble</span>
+                    <span data-i18n-key="template.settingsModal.display.alwaysShowThoughtBubble">Always Show Thought Bubble</span>
                 </label>
-                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
+                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;" data-i18n-key="template.settingsModal.display.alwaysShowThoughtBubbleNote">
                     Auto-expand thought bubble without clicking the icon first
                 </small>
 
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-toggle-animations" />
-                    <span>Enable Animations</span>
+                    <span data-i18n-key="template.settingsModal.display.enableAnimations">Enable Animations</span>
                 </label>
-                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
+                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;" data-i18n-key="template.settingsModal.display.enableAnimationsNote">
                     Smooth transitions for stats, content updates, and dice rolls
                 </small>
 
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-toggle-plot-buttons" />
-                    <span>Show Plot Progression Buttons</span>
+                    <span data-i18n-key="template.settingsModal.display.showPlotProgressionButtons">Show Plot Progression Buttons</span>
                 </label>
-                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
+                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;" data-i18n-key="template.settingsModal.display.showPlotProgressionButtonsNote">
                     Display buttons above chat input for plot progression prompts
                 </small>
 
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-toggle-debug-mode" />
-                    <span>Enable Debug Mode</span>
+                    <span data-i18n-key="template.settingsModal.display.enableDebugMode">Enable Debug Mode</span>
                 </label>
-                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
+                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;" data-i18n-key="template.settingsModal.display.enableDebugModeNote">
                     Shows parser logs in a mobile-friendly UI panel. Useful for troubleshooting. Look for the red bug button.
                 </small>
             </div>
 
             <div class="rpg-settings-group">
-                <h4><i class="fa-solid fa-sliders" aria-hidden="true"></i> Advanced</h4>
+                <h4 data-i18n-key="template.settingsModal.advancedTitle"><i class="fa-solid fa-sliders" aria-hidden="true"></i> Advanced</h4>
 
                 <div class="rpg-setting-row">
-                    <label for="rpg-generation-mode">Generation Mode:</label>
+                    <label for="rpg-generation-mode" data-i18n-key="template.settingsModal.advanced.generationMode">Generation Mode:</label>
                     <select id="rpg-generation-mode" class="rpg-select">
-                        <option value="together">Together with Main Generation</option>
+                        <option value="together" data-i18n-key="template.settingsModal.advanced.generationModeOptions.together">Together with Main Generation</option>
-                        <option value="separate">Separate Generation</option>
+                        <option value="separate" data-i18n-key="template.settingsModal.advanced.generationModeOptions.separate">Separate Generation</option>
                     </select>
-                    <small>Together: Adds RPG tracking to main roleplay. Separate: Generates RPG data separately (manual or auto).</small>
+                    <small data-i18n-key="template.settingsModal.advanced.generationModeNote">Together: Adds RPG tracking to main roleplay. Separate: Generates RPG data separately (manual or auto).</small>
                 </div>
 
                 <div class="rpg-setting-row">
-                    <label for="rpg-update-depth">Context Messages:</label>
+                    <label for="rpg-update-depth" data-i18n-key="template.settingsModal.advanced.contextMessages">Context Messages:</label>
                     <input type="number" id="rpg-update-depth" min="1" max="20" value="4" class="rpg-input" />
-                    <small>Number of recent messages to include (Separate mode only)</small>
+                    <small data-i18n-key="template.settingsModal.advanced.contextMessagesNote">Number of recent messages to include (Separate mode only)</small>
                 </div>
 
                 <div class="rpg-setting-row">
-                    <label for="rpg-memory-messages">Memory Batch Size:</label>
+                    <label for="rpg-memory-messages" data-i18n-key="template.settingsModal.advanced.memoryBatchSize">Memory Batch Size:</label>
                     <input type="number" id="rpg-memory-messages" min="4" max="50" value="16" class="rpg-input" />
-                    <small>Number of messages to process per batch in Memory Recollection</small>
+                    <small data-i18n-key="template.settingsModal.advanced.memoryBatchSizeNote">Number of messages to process per batch in Memory Recollection</small>
                 </div>
 
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-use-separate-preset" />
-                    <span>Use model connected to RPG Companion Trackers preset</span>
+                    <span data-i18n-key="template.settingsModal.advanced.useSeparatePreset">Use model connected to RPG Companion Trackers preset</span>
                 </label>
-                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
+                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;" data-i18n-key="template.settingsModal.advanced.useSeparatePresetNote">
                     Separate mode only. When enabled, tracker generation will use the model from the "RPG Companion Trackers" preset instead of your main API model. The preset will be switched automatically during generation and restored afterward. Select the desired model in that preset and make sure the "Bind presets to API connections" toggle is on (next to the import/export preset buttons).
                 </small>
 
                 <div class="rpg-setting-row">
-                    <label for="rpg-skip-guided-mode">Skip Injections during Guided Generations:</label>
+                    <label for="rpg-skip-guided-mode" data-i18n-key="template.settingsModal.advanced.skipInjections">Skip Injections during Guided Generations:</label>
                     <select id="rpg-skip-guided-mode" class="rpg-select">
-                        <option value="none">Never skip</option>
+                        <option value="none" data-i18n-key="template.settingsModal.advanced.skipInjectionsOptions.none">Never skip</option>
-                        <option value="impersonation">Only on impersonation requests</option>
+                        <option value="impersonation" data-i18n-key="template.settingsModal.advanced.skipInjectionsOptions.impersonation">Only on impersonation requests</option>
-                        <option value="guided">Always for guided or quiet prompts</option>
+                        <option value="guided" data-i18n-key="template.settingsModal.advanced.skipInjectionsOptions.guided">Always for guided or quiet prompts</option>
                     </select>
                 </div>
-                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
+                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;" data-i18n-key="template.settingsModal.advanced.skipInjectionsNote">
                     When set, the extension will not inject tracker prompts, examples, or HTML instructions according to the selected mode when a guided generation (via `instruct` or `quiet_prompt`) is detected. Useful when using GuidedGenerations or similar extensions.
                 </small>
 
                 <!-- Custom HTML Prompt Editor -->
                 <div class="rpg-setting-row" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rpg-border);">
-                    <label for="rpg-custom-html-prompt" style="display: block; margin-bottom: 8px; font-weight: 600;">
+                    <label for="rpg-custom-html-prompt" style="display: block; margin-bottom: 8px; font-weight: 600;" data-i18n-key="template.settingsModal.advanced.customHtmlPromptTitle">
                         <i class="fa-solid fa-code" aria-hidden="true"></i> Custom HTML Prompt:
                     </label>
 
@@ -281,10 +281,10 @@
                               placeholder=""></textarea>
                     <div style="margin-top: 8px; display: flex; gap: 8px;">
                         <button id="rpg-restore-default-html-prompt" class="menu_button" style="flex: 1;">
-                            <i class="fa-solid fa-rotate-left" aria-hidden="true"></i> Restore Default
+                            <i class="fa-solid fa-rotate-left" aria-hidden="true"></i> <span data-i18n-key="template.settingsModal.advanced.restoreDefaultHtmlPrompt">Restore Default</span>
                         </button>
                     </div>
-                    <small style="display: block; margin-top: 8px; color: #888; font-size: 11px;">
+                    <small style="display: block; margin-top: 8px; color: #888; font-size: 11px;" data-i18n-key="template.settingsModal.advanced.customHtmlPromptNote">
                         Customize the HTML prompt injected when "Enable Immersive HTML" is enabled. The default prompt is shown above - you can edit it directly or replace it entirely. Click "Restore Default" to reset. This affects all generation modes (together, separate, and plot progression).
                     </small>
                 </div>
@@ -292,16 +292,16 @@
                 <!-- Clear Cache Button -->
                 <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rpg-border);">
                     <button id="rpg-clear-cache" class="rpg-btn-clear-cache">
-                        <i class="fa-solid fa-trash" aria-hidden="true"></i> Clear Extension Cache
+                        <i class="fa-solid fa-trash" aria-hidden="true"></i> <span data-i18n-key="template.settingsModal.advanced.clearCache">Clear Extension Cache</span>
                     </button>
                 </div>
 
                 <!-- Reset FAB Positions Button -->
                 <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rpg-border);">
                     <button id="rpg-reset-fab-positions" class="rpg-btn-reset-fab">
-                        <i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i> Reset Button Positions
+                        <i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i> <span data-i18n-key="template.settingsModal.advanced.resetFabPositions">Reset Button Positions</span>
                     </button>
-                    <small style="display: block; margin-top: 8px; color: #888; font-size: 11px;">
+                    <small style="display: block; margin-top: 8px; color: #888; font-size: 11px;" data-i18n-key="template.settingsModal.advanced.resetFabPositionsNote">
                         Resets all floating action buttons (toggle, refresh, debug) to default top-left positions. Useful if buttons are off-screen.
                     </small>
                 </div>