fix(extension): resolve language selector UI overwrite and dynamic version reporting

CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to the KoalaSync browser extension and relay server.
 
 ---
 
+## [v2.0.8] — 2026-06-03
+
+### Fixed
+- Fixed a bug where switching language inside the extension popup overwrote dynamic fields (such as active room ID, connection status, active server details, and video debug info) with default localized placeholder texts.
+- Fixed a version reporting mismatch where the copied logs (debug reports) and connection handshake parameters incorrectly reported the hardcoded `1.9.0` version instead of the actual installed manifest version.
+
+---
+
 ## [v2.0.7] — 2026-06-03
 
 ### Added

extension/background.js

@@ -1,4 +1,4 @@
-import { EVENTS, PROTOCOL_VERSION, OFFICIAL_SERVER_URL, OFFICIAL_SERVER_TOKEN, APP_VERSION, EPISODE_LOBBY_TIMEOUT, FORCE_SYNC_TIMEOUT } from './shared/constants.js';
+import { EVENTS, PROTOCOL_VERSION, OFFICIAL_SERVER_URL, OFFICIAL_SERVER_TOKEN, EPISODE_LOBBY_TIMEOUT, FORCE_SYNC_TIMEOUT } from './shared/constants.js';
 import { generateUsername } from './shared/names.js';
 import { loadLocale, getMessage, SUPPORTED_LANGUAGES } from './i18n.js';
 
@@ -457,7 +457,7 @@ async function connect() {
             url.pathname = '/socket.io/';
             url.searchParams.set('EIO', '4');
             url.searchParams.set('transport', 'websocket');
-            url.searchParams.set('version', APP_VERSION);
+            url.searchParams.set('version', chrome.runtime.getManifest().version);
             url.searchParams.set('token', OFFICIAL_SERVER_TOKEN);
 
             socket = new WebSocket(url.toString());
@@ -1353,7 +1353,7 @@ async function handleAsyncMessage(message, sender, sendResponse) {
             reconnectSlowMode: reconnectFailed,
             roomId: currentRoom ? currentRoom.roomId : null,
             serverUrl: currentServerUrl,
-            version: APP_VERSION,
+            version: chrome.runtime.getManifest().version,
             protocolVersion: PROTOCOL_VERSION,
             roomPassword: currentRoom ? currentRoom.password : null
         });

extension/manifest.base.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "KoalaSync",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Synchronize video playback on YouTube, Netflix, Emby, Jellyfin, and any HTML5 site in real-time with friends.",
   "permissions": [
     "storage",

extension/popup.html

@@ -375,9 +375,9 @@
             <div class="info-card" style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent);">
                 <div>
                     <label style="margin-bottom: 0;" title="The room you are currently connected to" data-i18n="LABEL_ACTIVE_ROOM" data-i18n-title="LABEL_ACTIVE_ROOM_TOOLTIP">Active Room</label>
-                    <div id="activeRoomId" style="font-weight: 700; color: var(--accent); font-size: 16px; letter-spacing: 1px;" data-i18n="ACTIVE_ROOM_NONE">NONE</div>
+                    <div id="activeRoomId" style="font-weight: 700; color: var(--accent); font-size: 16px; letter-spacing: 1px;">NONE</div>
                 </div>
-                <div id="activeServer" style="font-size: 10px; color: var(--text-muted); text-align: right; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" data-i18n="ACTIVE_SERVER_OFFICIAL">Official Server</div>
+                <div id="activeServer" style="font-size: 10px; color: var(--text-muted); text-align: right; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Official Server</div>
             </div>
 
             <div class="info-card" style="margin-bottom: 20px;">
@@ -519,13 +519,13 @@
         <label title="Current WebSocket connection state" data-i18n="LABEL_CONN_STATUS" data-i18n-title="LABEL_CONN_STATUS_TOOLTIP">Connection Status</label>
         <div id="connStatus" class="info-card" style="display:flex; align-items:center; gap: 10px;">
             <span id="connDot" class="status-dot status-offline"></span>
-            <span id="connText" style="flex:1;" data-i18n="CONN_STATUS_DISCONNECTED">Disconnected</span>
+            <span id="connText" style="flex:1;">Disconnected</span>
             <button id="retryBtn" class="secondary" style="display:none; width: auto; padding: 4px 8px; font-size: 10px; margin: 0;" title="Attempt to reconnect to the server" data-i18n="BTN_RETRY" data-i18n-title="BTN_RETRY_TOOLTIP">RETRY</button>
             <button id="copyLogs" class="btn secondary" style="width: auto; padding: 4px 10px; font-size: 11px;" title="Copy logs to clipboard for sharing" data-i18n="BTN_COPY_LOGS" data-i18n-title="BTN_COPY_LOGS_TOOLTIP">Copy Logs</button>
         </div>
 
         <label title="Technical details about the currently selected video element" data-i18n="LABEL_VIDEO_DEBUG" data-i18n-title="LABEL_VIDEO_DEBUG_TOOLTIP">Video Debug Info</label>
-        <div id="videoDebug" class="info-card" style="font-size: 10px; font-family: monospace; color: var(--text-muted); max-height: 250px; overflow-y: auto; line-height: 1.4;" data-i18n="VIDEO_DEBUG_EMPTY">
+        <div id="videoDebug" class="info-card" style="font-size: 10px; font-family: monospace; color: var(--text-muted); max-height: 250px; overflow-y: auto; line-height: 1.4;">
             No tab selected or video detected.
         </div>
 

extension/popup.js

@@ -157,6 +157,9 @@ async function init() {
     refreshLogs();
     refreshHistory();
 
+    // Default connection status (localized) before async check
+    applyConnectionStatus('disconnected');
+
     // Initial Status Check
     chrome.runtime.sendMessage({ type: 'GET_STATUS' }, async (res) => {
         if (chrome.runtime.lastError) {
@@ -947,9 +950,33 @@ if (elements.langSelector) {
         await chrome.storage.sync.set({ locale: selectedLang });
         await loadLocale(selectedLang);
         translateDOM();
+        
+        // Re-apply connection and room UI state since translateDOM may overwrite dynamic elements
+        chrome.runtime.sendMessage({ type: 'GET_STATUS' }, async (res) => {
+            if (chrome.runtime.lastError) return;
+            if (res) {
+                localPeerId = res.peerId;
+                reconnectSlowMode = res.reconnectSlowMode || false;
+                applyConnectionStatus(res.status);
+                updatePeerList(res.peers);
+                lastKnownPeers = res.peers || [];
+                if (res.lastActionState) updateLastActionUI(res.lastActionState, res.peers);
+                
+                const data = await chrome.storage.sync.get(['roomId', 'password', 'useCustomServer', 'serverUrl']);
+                updateUI(data.roomId, data.password, data.useCustomServer, data.serverUrl);
+                
+                await populateTabs(res.peers, res.targetTabId);
+                if (res.episodeLobby) updateLobbyUI(res.episodeLobby, res.peers);
+            } else {
+                applyConnectionStatus('disconnected');
+                const data = await chrome.storage.sync.get(['roomId', 'password', 'useCustomServer', 'serverUrl']);
+                updateUI(data.roomId, data.password, data.useCustomServer, data.serverUrl);
+                await populateTabs();
+            }
+        });
+
         refreshLogs();
         refreshHistory();
-        populateTabs();
     });
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "koalasync",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "KoalaSync Build Scripts",
   "private": true,
   "scripts": {

website/version.json

@@ -1,4 +1,4 @@
 {
-  "version": "2.0.6",
-  "date": "2026-06-03T09:45:12Z"
+  "version": "2.0.7",
+  "date": "2026-06-03T09:58:23Z"
 }