fix: restore missing Create Room onboarding step and target h1 for welcome step

- Fix infinite seek loop by transitioning to exact expectedSeekTime tracking
- Fix zombie connections by calling forceDisconnect on ping timeouts
- Fix popup Join/Leave race conditions using isProcessingConnection lock
- Fix cross-room join bugs by properly disconnecting old rooms and bypassing same-room joins
- Update onboarding UI to switch to Sync tab automatically
- Prepare CHANGELOG.md for v2.3.0 release

README.md

@@ -14,7 +14,7 @@
 
 <p align="center"><i>KoalaSync is a lightweight Browser Extension and Relay Server for synchronized video playback on almost any website with a video element—YouTube, Twitch, Netflix, Emby, Jellyfin, and beyond. Built with a focus on <b>Data Sovereignty</b> and <b>Performance</b>.</i></p>
 
-<p align="center"><a href="docs/CHANGELOG.md"><b>New v2.2.3 Release!</b> — See what's changed</a></p>
+<p align="center"><a href="docs/CHANGELOG.md"><b>New v2.2.4 Release!</b> — See what's changed</a></p>
 
 ### 🌟 Why KoalaSync?
 
@@ -103,7 +103,7 @@ To connect your extension to a self-hosted server, open the popup → **Room** t
 
 To verify your relay is reachable from outside, visit `https://your-domain.com` in a browser — it should return `{"status":"online","service":"KoalaSync Relay"}`.
 
-#### Supply Chain Security (v2.2.3+)
+#### Supply Chain Security (v2.2.4+)
 
 All official release artifacts (Docker images and extension binaries) are published with signed [artifact attestations](https://docs.github.com/en/actions/how-tos/secure-your-work/use-artifact-attestations) to prove they were built from this repository's source code.
 
@@ -131,6 +131,7 @@ gh attestation verify dist/koalasync-chrome.zip \
 - **[CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)**: Our community standards and expectations.
 - **[HOW_IT_WORKS.md](docs/HOW_IT_WORKS.md)**: Step-by-step walkthrough of the complete user flow.
 - **[ARCHITECTURE.md](docs/ARCHITECTURE.md)**: Deep-dive into the two-phase sync and heartbeat logic.
+- **[ROADMAP.md](docs/ROADMAP.md)**: Planned features, backlog, and rejected ideas.
 - **[SECURITY.md](SECURITY.md)**: Disclosure policy and security practices.
 - **[Caddyfile.example](examples/Caddyfile.example)**: Production Caddy configuration for website and relay.
 

docs/CHANGELOG.md

@@ -4,6 +4,26 @@ All notable changes to the KoalaSync browser extension and relay server.
 
 ---
 
+## [v2.3.0] — Unreleased
+
+### Added
+- **Extension: New Interactive Onboarding Tour**: A fully redesigned, interactive step-by-step onboarding experience.
+- **Extension: Auto-Switch to Sync Tab**: The UI now intelligently switches to the Sync tab when you join a room to guide video selection.
+- **Extension: Uninstall URL Integration**: Prepared an uninstall URL setup that works natively across Chrome and Firefox, cleanly attaching browser context for analytics.
+
+### Fixed
+- **Extension: Infinite Seek Loop Prevention**: Replaced the fragile time-based seek suppression with an exact target-time verification mechanism, entirely eliminating infinite seek loops on slow buffers.
+- **Extension: Zombie Connections Resolved**: Implemented a forced disconnect upon ping timeouts, ensuring the extension reliably auto-reconnects when the WebSocket hangs in a half-open state.
+- **Extension: Room Switching Architecture**: Joining a new room while already connected now explicitly severs the old connection first, preventing state cross-contamination. 
+- **Extension: Join/Leave Race Conditions**: Added UI locks to prevent users from accidentally sending conflicting connection commands via rapid double-clicking.
+- **Extension: Same-Room Invite Bypass**: Clicking an invite link for the room you are currently in no longer triggers a redundant reconnect, instead instantly confirming the join.
+- **Extension: Audio settings now propagate immediately to video tabs**: Changes made in the audio options page are now instantly applied to the active video tab. Previously, settings saved to `chrome.storage.local` were not picked up by the background listener, which only watched `chrome.storage.sync`.
+- **Extension: Audio compressor now logs enable/disable state and resume failures**: The compressor reports when it is activated or bypassed, and warns if the `AudioContext` cannot be resumed (e.g. browser autoplay policy requires a user gesture on the page first).
+- **Extension: Video heartbeat no longer sent when alone in a room**: The full media metadata `PEER_STATUS` is now only emitted when other peers are present. The session keepalive (background heartbeat) continues to run unaffected, preventing the server reaper from disconnecting idle peers.
+- **Server: Increased `failedAuthAttempts` eviction threshold from 50k to 200k**: Reduces frequency of expensive batch evictions under high auth-failure volumes, smoothing heap usage.
+
+---
+
 ## [v2.2.4] — 2026-06-10
 
 ### Fixed

docs/ROADMAP.md

@@ -1,14 +1,90 @@
 # KoalaSync Roadmap
 
-This document tracks future technical plans and optimizations for the KoalaSync system.
+> Feature priorities, planned work, backlog, and rejected ideas for KoalaSync.
 
 ---
 
-## Planned Optimizations & Technical Roadmap
+## Status Legend
 
-### 1. Split large JavaScript files (> 800 lines) into smaller modules
-* **Category**: Maintainability / AI Context Optimization
-* **Background**: Core files like `background.js` and `popup.js` have grown large and exceed 800 lines. This makes manual debugging harder and wastes context window space for AI models.
-* **Planned solution**:
+| Badge | Meaning |
+|---|---|
+| 🚧 In Progress | Currently being developed |
+| 📋 Planned | Prioritized for an upcoming phase |
+| 💡 Backlog | Under evaluation, not yet prioritized |
+| ❌ Rejected | Declined (with rationale) |
+| ✅ Completed | Shipped |
+
+---
+
+## 🚧 In Progress
+
+*Currently being worked on.*
+
+| Feature | Priority | Area |
+|---|---|---|
+| *(none yet)* | | |
+
+---
+
+## 📋 Planned
+
+*Prioritized for upcoming phases.*
+
+### 1. Split large JavaScript files into smaller modules
+
+- **Priority:** P1
+- **Category:** Maintainability / AI Context Optimization
+- **Background:** Core files like `background.js` and `popup.js` have grown large and exceed 800 lines. This makes manual debugging harder and wastes context window space for AI models.
+- **Planned solution:**
   - Structurally split logic into separate focused modules (e.g., UI Renderer, Message Router, Storage Manager, Socket Client).
   - Use ES modules for clean separation and better reusability.
+
+### 2. Invite link with target URL for auto-redirect
+
+- **Priority:** P2
+- **Category:** UX / Ease of Sharing
+- **Background:** The invite link currently only contains the room ID. The invited person has to manually open the page. Ideally, the link would include the shared tab's URL so the invitee gets redirected to the right page and the tab is auto-selected (auto-matching via tab title already exists).
+- **Known challenges:**
+  - Many streaming sites (e.g., Emby, Jellyfin) don't have unique URLs per content — once inside the player, the URL stays the same.
+  - Dozens of such edge cases exist; a generic solution is difficult.
+  - Would likely need site-specific extractor logic (similar to the existing sync service adapters).
+- **Possible approaches:**
+  - Fallback: if no unique URL can be determined, only pass the tab title.
+  - Site-specific URL extraction for known services.
+
+---
+
+## 💡 Backlog
+
+*Ideas and feature requests under evaluation.*
+
+### In-room chat overlay (like TeleParty)
+
+- **Priority:** P3
+- **Category:** Social / Communication
+- **Background:** A collapsible chat panel to the right of the video (or as an overlay) allowing text-based communication with everyone in the room.
+- **Why backlog (still uncertain):**
+  - **Use case:** No strong personal need — with chat, latency matters less than with voice; async communication tolerates a few seconds of delay.
+  - **Complexity:** Relatively large feature (UI + message persistence + possibly history).
+  - **Legal/moderation:** Unclear what moderation requirements would apply if users can exchange chat messages. Could be relevant depending on jurisdiction.
+- **Status:** Under evaluation, may come later.
+
+---
+
+## ❌ Rejected
+
+*Declined features with rationale — keeps decisions documented so they don't get re-debated.*
+
+| Feature | Reason |
+|---|---|
+| *(none yet)* | |
+
+---
+
+## ✅ Completed
+
+*Shipped milestones.*
+
+| Feature | Shipped |
+|---|---|
+| *(none yet)* | |

eslint.config.mjs

@@ -8,6 +8,7 @@ export default [
       sourceType: "module",
       globals: {
         chrome: "readonly",
+        browser: "readonly",
         window: "readonly",
         document: "readonly",
         navigator: "readonly",

extension/background.js

@@ -2,6 +2,33 @@ import { EVENTS, PROTOCOL_VERSION, OFFICIAL_SERVER_URL, OFFICIAL_SERVER_TOKEN, E
 import { generateUsername } from './shared/names.js';
 import { loadLocale, getMessage, getSystemLanguage } from './i18n.js';
 
+// --- Uninstall URL Initialization ---
+chrome.runtime.onInstalled.addListener((details) => {
+    if (details.reason === 'install' || details.reason === 'update') {
+        // --- UNINSTALL_URL_INJECT_START ---
+        const UNINSTALL_URL = ""; // Populated during build
+        const BROWSER_TYPE = "unknown";
+        // --- UNINSTALL_URL_INJECT_END ---
+        
+        if (UNINSTALL_URL && UNINSTALL_URL.trim() !== '') {
+            try {
+                const url = new URL(UNINSTALL_URL);
+                url.searchParams.set("browser", BROWSER_TYPE);
+                
+                const runtimeAPI = typeof browser !== 'undefined' ? browser.runtime : chrome.runtime;
+                if (runtimeAPI && runtimeAPI.setUninstallURL) {
+                    const result = runtimeAPI.setUninstallURL(url.href);
+                    // browser.runtime.setUninstallURL returns a Promise, handle rejection silently
+                    if (result && typeof result.catch === 'function') {
+                        result.catch(err => console.warn('Failed to set uninstall URL:', err));
+                    }
+                }
+            } catch (err) {
+                console.error("Invalid uninstall URL provided:", err);
+            }
+        }
+    }
+});
 
 // --- State Management ---
 let socket = null;
@@ -708,7 +735,9 @@ function sendPing() {
     if (pingTimeout) clearTimeout(pingTimeout);
     pingTimeout = setTimeout(() => {
         if (pendingPingT === t) {
+            addLog('Ping timeout reached, force disconnecting to trigger reconnect', 'warn');
             pendingPingT = null;
+            forceDisconnect();
         }
         pingTimeout = null;
     }, 5000);
@@ -1333,9 +1362,7 @@ chrome.alarms.onAlarm.addListener(async (alarm) => {
 function leaveOldRoomIfSwitching(newRoomId) {
     if (currentRoom && currentRoom.roomId !== newRoomId) {
         addLog(`Switching rooms: leaving ${currentRoom.roomId} to join ${newRoomId}`, 'info');
-        if (socket && socket.readyState === WebSocket.OPEN && isNamespaceJoined) {
-            emit(EVENTS.LEAVE_ROOM, { peerId });
-        }
+        forceDisconnect();
         currentRoom = null;
         if (storageInitialized) chrome.storage.session.set({ currentRoom: null });
         chrome.runtime.sendMessage({ type: 'PEER_UPDATE', peers: [] }).catch(() => {});
@@ -1389,15 +1416,27 @@ async function handleAsyncMessage(message, sender, sendResponse) {
     await ensureState();
 
     if (message.type === 'CONNECT') {
+        const settings = await getSettings();
+        const desiredUrl = resolveServerUrl(settings);
+
+        if (settings.roomId && currentRoom && currentRoom.roomId === settings.roomId && socket && socket.readyState === WebSocket.OPEN && isNamespaceJoined && desiredUrl === currentServerUrl) {
+            broadcastConnectionStatus('connected');
+            const tabs = await new Promise(resolve => chrome.tabs.query({}, resolve));
+            for (const tab of tabs) {
+                chrome.tabs.sendMessage(tab.id, { type: 'JOIN_STATUS', success: true, message: 'Already in room' }).catch(() => {});
+            }
+            if (typeof sendResponse === 'function') sendResponse({ status: 'ok' });
+            return;
+        }
+
         reconnectFailed = false;
         reconnectStartTime = null;
         reconnectAttempts = 0;
         chrome.storage.session.set({ reconnectFailed: false, reconnectAttempts: 0, reconnectStartTime: null });
-        const settings = await getSettings();
+
         if (settings.roomId) {
             leaveOldRoomIfSwitching(settings.roomId);
         }
-        const desiredUrl = resolveServerUrl(settings);
         if (desiredUrl !== currentServerUrl || !socket || socket.readyState !== WebSocket.OPEN || !isNamespaceJoined) {
             if (desiredUrl !== currentServerUrl) forceDisconnect();
             connect();
@@ -1493,14 +1532,25 @@ async function handleAsyncMessage(message, sender, sendResponse) {
             useCustomServer: !!useCustomServer,
             serverUrl: serverUrl || ''
         }, async () => {
+            const settings = await getSettings();
+            const desiredUrl = resolveServerUrl(settings);
+
+            if (roomId && currentRoom && currentRoom.roomId === roomId && socket && socket.readyState === WebSocket.OPEN && isNamespaceJoined && desiredUrl === currentServerUrl) {
+                broadcastConnectionStatus('connected');
+                const tabs = await new Promise(resolve => chrome.tabs.query({}, resolve));
+                for (const tab of tabs) {
+                    chrome.tabs.sendMessage(tab.id, { type: 'JOIN_STATUS', success: true, message: 'Already in room' }).catch(() => {});
+                }
+                return;
+            }
+
             reconnectFailed = false;
             reconnectStartTime = null;
             reconnectAttempts = 0;
             chrome.storage.session.set({ reconnectFailed: false, reconnectAttempts: 0, reconnectStartTime: null });
             broadcastConnectionStatus('connecting');
             leaveOldRoomIfSwitching(roomId);
-            const settings = await getSettings();
-            const desiredUrl = resolveServerUrl(settings);
+
             if (desiredUrl !== currentServerUrl || !socket || socket.readyState !== WebSocket.OPEN || !isNamespaceJoined) {
                 if (desiredUrl !== currentServerUrl) forceDisconnect();
                 connect();
@@ -1664,7 +1714,8 @@ async function handleAsyncMessage(message, sender, sendResponse) {
         markRoomUseful();
         getSettings().then(settings => {
             const statusPayload = { ...message.payload, peerId, username: settings.username, tabTitle: currentTabTitle };
-            emit(EVENTS.PEER_STATUS, statusPayload);
+            const otherCount = currentRoom && Array.isArray(currentRoom.peers) ? currentRoom.peers.filter(p => (typeof p === 'object' ? p.peerId : p) !== peerId).length : 0;
+            if (otherCount > 0) emit(EVENTS.PEER_STATUS, statusPayload);
 
             if (currentRoom && Array.isArray(currentRoom.peers)) {
                 const me = currentRoom.peers.find(p => (p.peerId || p) === peerId);
@@ -1821,7 +1872,7 @@ async function handleAsyncMessage(message, sender, sendResponse) {
 }
 
 chrome.storage.onChanged.addListener(async (changes, area) => {
-    if (area !== 'sync' || !changes.audioSettings) return;
+    if (area !== 'local' || !changes.audioSettings) return;
     await ensureState();
     if (!currentTabId) return;
 

extension/content.js

@@ -55,6 +55,7 @@
     const MIN_SEEK_DELTA = 2.0;
     let lastReportedSeekTime = null;  // last currentTime we relayed as a SEEK
     let seekDebounceTimer = null;     // debounce timer for rapid seek events
+    let expectedSeekTime = null;      // strictly track programmatic seeks
 
     // --- Episode Auto-Sync State ---
     let lastKnownMediaTitle = null;
@@ -184,7 +185,7 @@
             }
         }
         if (audioCtx.state === 'suspended') {
-            audioCtx.resume().catch(() => {});
+            audioCtx.resume().catch(() => { reportLog('AudioContext resume failed - browser may need page interaction first', 'warn'); });
         }
         return audioCtx;
     }
@@ -242,6 +243,7 @@
         rampGain(chain.dryGain, 1, t);
         rampGain(chain.compGain, 0, t);
         chain.active = false;
+        reportLog('Audio compressor disabled', 'info');
     }
 
     function bypassCurrentAudioProcessing() {
@@ -274,6 +276,7 @@
             rampGain(chain.dryGain, 0, t);
             rampGain(chain.compGain, 1, t);
             chain.active = true;
+            reportLog('Audio compressor enabled', 'info');
         }
     }
 
@@ -436,7 +439,7 @@
                         ytButton.click();
                     }
                     if (action === EVENTS.SEEK) {
-                        _setSuppress('seek');
+                        expectedSeekTime = data.targetTime;
                         video.currentTime = data.targetTime;
                     }
                     return;
@@ -452,7 +455,7 @@
                         twitchButton.click();
                     }
                     if (action === EVENTS.SEEK) {
-                        _setSuppress('seek');
+                        expectedSeekTime = data.targetTime;
                         video.currentTime = data.targetTime;
                     }
                     return;
@@ -470,7 +473,7 @@
                 _setSuppress('paused');
                 video.pause();
             } else if (action === EVENTS.SEEK) {
-                _setSuppress('seek');
+                expectedSeekTime = data.targetTime;
                 video.currentTime = data.targetTime;
             }
     } catch (e) {
@@ -573,7 +576,7 @@
                         return;
                     }
                     _setSuppress('paused');
-                    _setSuppress('seek');
+                    expectedSeekTime = payload.targetTime;
                     video.pause();
                     try {
                         video.currentTime = payload.targetTime;
@@ -863,11 +866,17 @@
         const current = video.currentTime;
         if (!Number.isFinite(current)) return;
 
-        // Step 1: Check _suppressTimers (programmatic seek from remote peer)
-        if (_suppressTimers['seek']) {
-            _clearSuppress('seek');
-            lastReportedSeekTime = current;
-            return;
+        // Step 1: Check expectedSeekTime (programmatic seek from remote peer)
+        if (expectedSeekTime !== null) {
+            if (Math.abs(current - expectedSeekTime) < 1.0) {
+                // Video arrived at expected time. Safely clear and ignore.
+                expectedSeekTime = null;
+                lastReportedSeekTime = current;
+                return;
+            } else {
+                // User manually scrubbed to a DIFFERENT time while we were buffering
+                expectedSeekTime = null;
+            }
         }
 
         // Step 2: Suppress during visibility grace period (tab re-focus ghost events)

extension/locales/de.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "Equalizer",
-  "AUDIO_COMING_SOON": "Demnächst"
+  "AUDIO_COMING_SOON": "Demnächst",
+  "BTN_RESTART_TOUR": "Einführung neu starten",
+  "BTN_RESTART_TOUR_TOOLTIP": "Startet die Einführung für neue Benutzer erneut",
+  "HINT_SELECT_VIDEO": "Wähle hier dein Video aus!"
 }

extension/locales/en.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "Equalizer",
-  "AUDIO_COMING_SOON": "Coming soon"
+  "AUDIO_COMING_SOON": "Coming soon",
+  "BTN_RESTART_TOUR": "Restart Tutorial",
+  "BTN_RESTART_TOUR_TOOLTIP": "Restart the onboarding tutorial",
+  "HINT_SELECT_VIDEO": "Select your video here!"
 }

extension/locales/es.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "Ecualizador",
-  "AUDIO_COMING_SOON": "Próximamente"
+  "AUDIO_COMING_SOON": "Próximamente",
+  "BTN_RESTART_TOUR": "Reiniciar tutorial",
+  "BTN_RESTART_TOUR_TOOLTIP": "Reiniciar el tutorial de inicio",
+  "HINT_SELECT_VIDEO": "¡Selecciona tu video aquí!"
 }

extension/locales/fr.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "Égaliseur",
-  "AUDIO_COMING_SOON": "Bientôt disponible"
+  "AUDIO_COMING_SOON": "Bientôt disponible",
+  "BTN_RESTART_TOUR": "Redémarrer le tutoriel",
+  "BTN_RESTART_TOUR_TOOLTIP": "Recommencer le tutoriel d'intégration",
+  "HINT_SELECT_VIDEO": "Sélectionnez votre vidéo ici !"
 }

extension/locales/it.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "Equalizzatore",
-  "AUDIO_COMING_SOON": "Prossimamente"
+  "AUDIO_COMING_SOON": "Prossimamente",
+  "BTN_RESTART_TOUR": "Riavvia tutorial",
+  "BTN_RESTART_TOUR_TOOLTIP": "Riavvia il tutorial iniziale",
+  "HINT_SELECT_VIDEO": "Seleziona il tuo video qui!"
 }

extension/locales/ja.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "イコライザー",
-  "AUDIO_COMING_SOON": "近日公開"
+  "AUDIO_COMING_SOON": "近日公開",
+  "BTN_RESTART_TOUR": "チュートリアルを再起動",
+  "BTN_RESTART_TOUR_TOOLTIP": "オンボーディングチュートリアルを再起動する",
+  "HINT_SELECT_VIDEO": "ここで動画を選択してください！"
 }

extension/locales/ko.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "이퀄라이저",
-  "AUDIO_COMING_SOON": "출시 예정"
+  "AUDIO_COMING_SOON": "출시 예정",
+  "BTN_RESTART_TOUR": "튜토리얼 다시 시작",
+  "BTN_RESTART_TOUR_TOOLTIP": "온보딩 튜토리얼을 다시 시작합니다",
+  "HINT_SELECT_VIDEO": "여기에서 비디오를 선택하세요!"
 }

extension/locales/nl.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "Equalizer",
-  "AUDIO_COMING_SOON": "Binnenkort beschikbaar"
+  "AUDIO_COMING_SOON": "Binnenkort beschikbaar",
+  "BTN_RESTART_TOUR": "Tutorial opnieuw starten",
+  "BTN_RESTART_TOUR_TOOLTIP": "Start de introductie-tutorial opnieuw",
+  "HINT_SELECT_VIDEO": "Selecteer hier je video!"
 }

extension/locales/pl.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "Korektor",
-  "AUDIO_COMING_SOON": "Wkrótce"
+  "AUDIO_COMING_SOON": "Wkrótce",
+  "BTN_RESTART_TOUR": "Uruchom samouczek ponownie",
+  "BTN_RESTART_TOUR_TOOLTIP": "Uruchom ponownie samouczek powitalny",
+  "HINT_SELECT_VIDEO": "Wybierz swoje wideo tutaj!"
 }

extension/locales/pt-BR.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "Equalizador",
-  "AUDIO_COMING_SOON": "Em breve"
+  "AUDIO_COMING_SOON": "Em breve",
+  "BTN_RESTART_TOUR": "Reiniciar tutorial",
+  "BTN_RESTART_TOUR_TOOLTIP": "Reiniciar o tutorial de introdução",
+  "HINT_SELECT_VIDEO": "Selecione seu vídeo aqui!"
 }

extension/locales/pt.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "Equalizador",
-  "AUDIO_COMING_SOON": "Em breve"
+  "AUDIO_COMING_SOON": "Em breve",
+  "BTN_RESTART_TOUR": "Reiniciar tutorial",
+  "BTN_RESTART_TOUR_TOOLTIP": "Reiniciar o tutorial de introdução",
+  "HINT_SELECT_VIDEO": "Selecione o seu vídeo aqui!"
 }

extension/locales/ru.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "Эквалайзер",
-  "AUDIO_COMING_SOON": "Скоро"
+  "AUDIO_COMING_SOON": "Скоро",
+  "BTN_RESTART_TOUR": "Перезапустить обучение",
+  "BTN_RESTART_TOUR_TOOLTIP": "Запустить приветственное руководство заново",
+  "HINT_SELECT_VIDEO": "Выберите ваше видео здесь!"
 }

extension/locales/tr.json

@@ -205,5 +205,8 @@
   "AUDIO_PARAM_ATTACK": "Attack",
   "AUDIO_PARAM_RELEASE": "Release",
   "AUDIO_EQUALIZER": "Ekolayzer",
-  "AUDIO_COMING_SOON": "Çok yakında"
+  "AUDIO_COMING_SOON": "Çok yakında",
+  "BTN_RESTART_TOUR": "Eğitimi Yeniden Başlat",
+  "BTN_RESTART_TOUR_TOOLTIP": "Tanıtım eğitimini yeniden başlat",
+  "HINT_SELECT_VIDEO": "Videonuzu buradan seçin!"
 }

extension/popup.html

@@ -364,6 +364,14 @@
             0%, 100% { opacity: 0.4; transform: scale(1); }
             50% { opacity: 1; transform: scale(1.3); }
         }
+        @keyframes spotlightPulse {
+            0%, 100% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.65), 0 0 0 0px var(--accent); }
+            50% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.65), 0 0 0 6px var(--accent); }
+        }
+        @keyframes floatHint {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-4px); }
+        }
     </style>
 </head>
 <body>
@@ -457,11 +465,16 @@
     <div id="tab-sync" class="tab-content">
         <!-- SYNC ACTIVE: Visible when in a room -->
         <div id="sync-active">
-        <div class="form-group">
+        <div class="form-group" style="position: relative;">
             <label title="Choose the browser tab containing the video to sync" data-i18n="LABEL_SELECT_VIDEO" data-i18n-title="LABEL_SELECT_VIDEO_TOOLTIP">Select Video</label>
             <select id="targetTab">
                 <option value="" data-i18n="OPTION_SELECT_TAB">-- Select a Tab --</option>
             </select>
+            <!-- Hint Tooltip -->
+            <div id="targetTabHint" style="display: none; position: absolute; top: -25px; right: 0; background: var(--accent); color: white; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: bold; pointer-events: none; animation: floatHint 2s ease-in-out infinite; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); z-index: 10;" data-i18n="HINT_SELECT_VIDEO">
+                Select your video here!
+                <div style="position: absolute; bottom: -4px; right: 20px; width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg);"></div>
+            </div>
         </div>
         
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
@@ -577,7 +590,8 @@
 
         <div style="margin-top: 15px; padding: 8px; border-top: 1px solid var(--card);">
             <label title="Tools for fixing connection issues" data-i18n="LABEL_TROUBLESHOOTING" data-i18n-title="LABEL_TROUBLESHOOTING_TOOLTIP">Troubleshooting</label>
-            <button id="regenId" class="secondary" style="width: 100%; font-size: 11px;" title="Regenerate your internal ID and reconnect" data-i18n="BTN_REGEN_ID" data-i18n-title="BTN_REGEN_ID_TOOLTIP">Regenerate Peer ID</button>
+            <button id="restartTourBtn" class="secondary" style="width: 100%; font-size: 11px;" title="Restart the onboarding tutorial" data-i18n="BTN_RESTART_TOUR" data-i18n-title="BTN_RESTART_TOUR_TOOLTIP">Restart Tutorial</button>
+            <button id="regenId" class="secondary" style="width: 100%; font-size: 11px; margin-top: 8px;" title="Regenerate your internal ID and reconnect" data-i18n="BTN_REGEN_ID" data-i18n-title="BTN_REGEN_ID_TOOLTIP">Regenerate Peer ID</button>
             <p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center;" data-i18n="REGEN_ID_DESC">Use this if you see "Duplicate Identity" errors.</p>
             <p style="font-size: 9px; text-align: center; margin-top: 6px;"><a href="https://github.com/Shik3i/KoalaSync/issues" target="_blank" style="color: var(--accent); text-decoration: none;" data-i18n="REGEN_ID_OTHER_ISSUE">Other issue? Open a GitHub Issue</a></p>
         </div>
@@ -637,16 +651,31 @@
     <script src="popup.js" type="module"></script>
 
     <!-- Onboarding Overlay -->
-    <div id="onboarding-overlay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index:1000; align-items:flex-end; justify-content:center; padding-bottom: 20px;">
-        <div id="onboarding-card" style="background:var(--card); padding:24px; border-radius:16px; max-width:280px; width:90%; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,0.5); ">
-            <div id="onboarding-icon" style="font-size:48px; margin-bottom:12px;">👋</div>
-            <h2 id="onboarding-title" style="color:var(--accent); margin:0 0 8px; font-size:16px;">Welcome to KoalaSync!</h2>
-            <p id="onboarding-text" style="color:var(--text-muted); font-size:13px; margin:0 0 16px; line-height:1.4;">Let's get you started.</p>
-            <div style="display:flex; gap:8px; justify-content:center;">
-                <button id="onboarding-skip" class="secondary" style="width:auto; padding:8px 16px;" title="Skip the tutorial" data-i18n="BTN_ONBOARDING_SKIP" data-i18n-title="BTN_ONBOARDING_SKIP_TOOLTIP">Skip</button>
-                <button id="onboarding-next" class="primary" style="width:auto; padding:8px 16px;" title="Go to next step" data-i18n="BTN_ONBOARDING_NEXT" data-i18n-title="BTN_ONBOARDING_NEXT_TOOLTIP">Next</button>
+    <div id="onboarding-overlay" style="display:none; position:fixed; inset:0; background:transparent; z-index:1000; pointer-events:auto;">
+        <!-- Spotlight element -->
+        <div id="onboarding-spotlight" style="position:fixed; pointer-events:none; border:2px solid var(--accent); box-shadow:0 0 0 9999px rgba(15, 23, 42, 0.65); border-radius:8px; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display:none; opacity:0; z-index:1001; animation: spotlightPulse 2s infinite ease-in-out;"></div>
+        
+        <!-- Onboarding Card -->
+        <div id="onboarding-card" style="position:fixed; background:var(--card); padding:16px 20px; border-radius:12px; width:280px; box-shadow:0 8px 32px rgba(0,0,0,0.5); z-index:1002; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-sizing:border-box; border:1px solid #334155; opacity:0; transform: scale(0.9); display:none;">
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
+                <span id="onboarding-icon" style="font-size:24px;">👋</span>
+                <span id="onboarding-step-indicator" style="font-size:10px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.5px;">Step 1 of 3</span>
             </div>
-            <div id="onboarding-dots" style="margin-top:12px; display:flex; gap:6px; justify-content:center;"></div>
+            <h2 id="onboarding-title" style="color:var(--accent); margin:0 0 6px; font-size:14px; font-weight:700; text-align:left;">Welcome to KoalaSync!</h2>
+            <p id="onboarding-text" style="color:var(--text-muted); font-size:12px; margin:0 0 16px; line-height:1.4; text-align:left;">Let's get you started.</p>
+            
+            <!-- Progress Bar -->
+            <div id="onboarding-progress-container" style="height:4px; background:#334155; border-radius:2px; margin-bottom:16px; overflow:hidden;">
+                <div id="onboarding-progress-bar" style="height:100%; width:33%; background:var(--accent); transition:width 0.3s ease;"></div>
+            </div>
+            
+            <div style="display:flex; gap:8px; justify-content:space-between; align-items:center;">
+                <button id="onboarding-skip" class="secondary" style="width:auto; padding:6px 12px; margin:0; font-size:11px;" title="Skip the tutorial" data-i18n="BTN_ONBOARDING_SKIP" data-i18n-title="BTN_ONBOARDING_SKIP_TOOLTIP">Skip</button>
+                <button id="onboarding-next" class="primary" style="width:auto; padding:6px 16px; margin:0; font-size:11px;" title="Go to next step" data-i18n="BTN_ONBOARDING_NEXT" data-i18n-title="BTN_ONBOARDING_NEXT_TOOLTIP">Next</button>
+            </div>
+            
+            <!-- Tooltip pointer arrow -->
+            <div id="onboarding-arrow" style="position:absolute; width:0; height:0; border:6px solid transparent; transition:all 0.3s ease;"></div>
         </div>
     </div>
 </body>

extension/popup.js

@@ -29,6 +29,7 @@ const elements = {
     inviteLink: document.getElementById('inviteLink'),
     filterNoise: document.getElementById('filterNoise'),
     regenId: document.getElementById('regenId'),
+    restartTourBtn: document.getElementById('restartTourBtn'),
     lastActionCard: document.getElementById('lastActionCard'),
     historyList: document.getElementById('historyList'),
     copyLogs: document.getElementById('copyLogs'),
@@ -68,6 +69,7 @@ let lastPeersJson = null;
 let lastKnownPeers = [];
 let isDevTabVisible = false;
 let reconnectSlowMode = false;
+let isProcessingConnection = false;
 let joinBtnTimeout = null;
 let forceSyncResetTimer = null;
 let popupIntervals = [];
@@ -173,7 +175,7 @@ function setRoomRefreshCooldown() {
 
 // --- Initialization ---
 async function init() {
-    const localData = await chrome.storage.local.get(['serverUrl', 'useCustomServer', 'roomId', 'password', 'username', 'filterNoise', 'autoSyncNextEpisode', 'forceSyncMode', 'browserNotifications', 'autoCopyInvite', 'locale', 'audioSettings']);
+    const localData = await chrome.storage.local.get(['serverUrl', 'useCustomServer', 'roomId', 'password', 'username', 'filterNoise', 'autoSyncNextEpisode', 'forceSyncMode', 'browserNotifications', 'autoCopyInvite', 'locale', 'audioSettings', 'activeTab']);
     // Migrate preferences from sync → local for existing users
     const oldSync = await chrome.storage.sync.get(['serverUrl', 'useCustomServer', 'roomId', 'password', 'username', 'filterNoise', 'autoSyncNextEpisode', 'forceSyncMode', 'browserNotifications', 'autoCopyInvite', 'locale', 'audioSettings']);
     const toMigrate = {};
@@ -259,8 +261,21 @@ async function init() {
 
             // Render lobby status if active
             if (res.episodeLobby) updateLobbyUI(res.episodeLobby, res.peers);
+
+            if (res.status === 'connected' && !res.targetTabId && localData.roomId) {
+                const syncTabBtn = document.querySelector('.tab-btn[data-tab="tab-sync"]');
+                if (syncTabBtn) syncTabBtn.click();
+                showSelectVideoHint();
+            } else if (localData.activeTab) {
+                const btn = document.querySelector(`.tab-btn[data-tab="${localData.activeTab}"]`);
+                if (btn) btn.click();
+            }
         } else {
             await populateTabs();
+            if (localData.activeTab) {
+                const btn = document.querySelector(`.tab-btn[data-tab="${localData.activeTab}"]`);
+                if (btn) btn.click();
+            }
         }
     });
 
@@ -1121,6 +1136,8 @@ elements.tabs.forEach(btn => {
         isDevTabVisible = btn.dataset.tab === 'tab-dev';
         if (isDevTabVisible) refreshLogs();
         if (btn.dataset.tab === 'tab-sync') refreshHistory();
+        
+        chrome.storage.local.set({ activeTab: btn.dataset.tab });
     });
 });
 
@@ -1163,8 +1180,13 @@ elements.roomId.addEventListener('input', () => {
 });
 
 elements.joinBtn.addEventListener('click', async () => {
+    if (isProcessingConnection) return;
+    isProcessingConnection = true;
     clearConnectionErrorTimer();
-    if (elements.joinBtn.disabled) return;
+    if (elements.joinBtn.disabled) {
+        isProcessingConnection = false;
+        return;
+    }
     const roomIdInput = elements.roomId.value.trim();
     const isCreating = !roomIdInput;
     
@@ -1176,6 +1198,7 @@ elements.joinBtn.addEventListener('click', async () => {
         elements.joinBtn.disabled = false;
         elements.joinBtn.textContent = getMessage('BTN_JOIN_ROOM');
         joinBtnTimeout = null;
+        isProcessingConnection = false;
         showError(getMessage('ERR_CONN_TIMEOUT'));
     }, 15000);
     
@@ -1197,6 +1220,7 @@ elements.joinBtn.addEventListener('click', async () => {
             showError(getMessage('ERR_INVALID_SERVER_URL'));
             elements.joinBtn.disabled = false;
             elements.joinBtn.textContent = getMessage('BTN_JOIN_ROOM');
+            isProcessingConnection = false;
             return;
         }
     }
@@ -1223,6 +1247,8 @@ elements.joinBtn.addEventListener('click', async () => {
 });
 
 elements.leaveBtn.addEventListener('click', async () => {
+    if (isProcessingConnection) return;
+    isProcessingConnection = true;
     clearConnectionErrorTimer();
     chrome.runtime.sendMessage({ type: 'LEAVE_ROOM' });
     await chrome.storage.local.set({ roomId: '', password: '' });
@@ -1230,6 +1256,7 @@ elements.leaveBtn.addEventListener('click', async () => {
     elements.password.value = '';
     lastKnownPeers = [];
     updateUI(null, null);
+    isProcessingConnection = false;
 });
 
 function generateRoomId() {
@@ -1280,6 +1307,9 @@ elements.retryBtn.addEventListener('click', () => {
 });
 
 elements.targetTab.addEventListener('change', () => {
+    const hint = document.getElementById('targetTabHint');
+    if (hint) hint.style.display = 'none';
+
     const val = elements.targetTab.value;
     const tabId = val ? parseInt(val) : null;
     const tabTitle = elements.targetTab.options[elements.targetTab.selectedIndex]?.dataset.originalTitle || null;
@@ -1289,8 +1319,14 @@ elements.targetTab.addEventListener('change', () => {
 elements.forceSyncBtn.addEventListener('click', async () => {
     if (elements.forceSyncBtn.disabled) return;
     
+    const originalText = elements.forceSyncBtn.textContent;
+    elements.forceSyncBtn.disabled = true;
+
     const status = await new Promise(r => chrome.runtime.sendMessage({ type: 'GET_STATUS' }, r));
-    if (chrome.runtime.lastError || !status || !status.targetTabId) return;
+    if (chrome.runtime.lastError || !status || !status.targetTabId) {
+        elements.forceSyncBtn.disabled = false;
+        return;
+    }
 
     const mode = elements.forceSyncMode.value;
     let targetTime = null;
@@ -1298,6 +1334,7 @@ elements.forceSyncBtn.addEventListener('click', async () => {
     if (mode === 'jump-to-others') {
         if (!localPeerId) {
             showError(getMessage('ERR_IDENTITY_NOT_LOADED'));
+            elements.forceSyncBtn.disabled = false;
             return;
         }
         const peers = status.peers || [];
@@ -1307,6 +1344,7 @@ elements.forceSyncBtn.addEventListener('click', async () => {
 
         if (otherTimes.length === 0) {
             showError(getMessage('ERR_NO_PEERS_TIME'));
+            elements.forceSyncBtn.disabled = false;
             return;
         }
 
@@ -1315,8 +1353,6 @@ elements.forceSyncBtn.addEventListener('click', async () => {
         targetTime = otherTimes.length % 2 !== 0 ? otherTimes[mid] : (otherTimes[mid - 1] + otherTimes[mid]) / 2;
     }
 
-    const originalText = elements.forceSyncBtn.textContent;
-    elements.forceSyncBtn.disabled = true;
     elements.forceSyncBtn.textContent = mode === 'jump-to-others' ? getMessage('BTN_STATE_SYNCING_GROUP', { time: formatTime(targetTime) }) : getMessage('BTN_STATE_SYNCING');
     forceSyncDone = false;
     const peerCount = (status.peers || []).filter(p => (typeof p === 'object' ? p.peerId : p) !== localPeerId).length;
@@ -1610,6 +1646,7 @@ chrome.runtime.onMessage.addListener((msg) => {
     } else if (msg.type === 'ROOM_LIST') {
         updateRoomList(msg.rooms);
     } else if (msg.type === 'JOIN_STATUS') {
+        isProcessingConnection = false;
         if (joinBtnTimeout) {
             clearTimeout(joinBtnTimeout);
             joinBtnTimeout = null;
@@ -1621,9 +1658,15 @@ chrome.runtime.onMessage.addListener((msg) => {
             // Final confirmation of join from background
             chrome.storage.local.get(['roomId', 'password', 'useCustomServer', 'serverUrl'], (data) => {
                 updateUI(data.roomId, data.password, data.useCustomServer, data.serverUrl);
+                const syncTabBtn = document.querySelector('.tab-btn[data-tab="tab-sync"]');
+                if (syncTabBtn) syncTabBtn.click();
+                showSelectVideoHint();
             });
         } else {
             // Join failed: reset UI state
+            chrome.storage.local.set({ roomId: '', password: '' });
+            elements.roomId.value = '';
+            elements.password.value = '';
             updateUI(null, null);
         }
     } else if (msg.type === 'LOBBY_UPDATE') {
@@ -2049,36 +2092,181 @@ function updateLobbyUI(lobby, peers) {
 
 // --- Onboarding Tour ---
 const onboardingSteps = [
-    { icon: '👋', get title() { return getMessage('ONBOARDING_1_TITLE'); }, get text() { return getMessage('ONBOARDING_1_TEXT'); }, targetTab: 'tab-room' },
-    { icon: '🏠', get title() { return getMessage('ONBOARDING_2_TITLE'); }, get text() { return getMessage('ONBOARDING_2_TEXT'); }, targetTab: 'tab-room' },
-    { icon: '🎬', get title() { return getMessage('ONBOARDING_3_TITLE'); }, get text() { return getMessage('ONBOARDING_3_TEXT'); }, targetTab: 'tab-sync' },
-    { icon: '⚙️', get title() { return getMessage('ONBOARDING_4_TITLE'); }, get text() { return getMessage('ONBOARDING_4_TEXT'); }, targetTab: 'tab-settings' },
-    { icon: '🎉', get title() { return getMessage('ONBOARDING_5_TITLE'); }, get text() { return getMessage('ONBOARDING_5_TEXT'); }, targetTab: 'tab-room' }
+    { 
+        icon: '👋', 
+        get title() { return getMessage('ONBOARDING_1_TITLE'); }, 
+        get text() { return getMessage('ONBOARDING_1_TEXT'); }, 
+        targetTab: 'tab-room',
+        targetSelector: 'h1'
+    },
+    { 
+        icon: '🏠', 
+        get title() { return getMessage('ONBOARDING_2_TITLE'); }, 
+        get text() { return getMessage('ONBOARDING_2_TEXT'); }, 
+        targetTab: 'tab-room',
+        targetSelector: '#createRoomBtn'
+    },
+    { 
+        icon: '🎬', 
+        get title() { return getMessage('ONBOARDING_3_TITLE'); }, 
+        get text() { return getMessage('ONBOARDING_3_TEXT'); }, 
+        targetTab: 'tab-sync',
+        targetSelector: '#targetTab'
+    },
+    { 
+        icon: '⚙️', 
+        get title() { return getMessage('ONBOARDING_4_TITLE'); }, 
+        get text() { return getMessage('ONBOARDING_4_TEXT'); }, 
+        targetTab: 'tab-settings',
+        targetSelector: '#username'
+    }
 ];
 
+function showSelectVideoHint() {
+    const hint = document.getElementById('targetTabHint');
+    if (hint && !elements.targetTab.value) {
+        hint.style.display = 'block';
+    }
+}
+
 let onboardingStep = 0;
+let onboardingTimeout = null;
 
 function showOnboarding() {
     const overlay = document.getElementById('onboarding-overlay');
     if (!overlay) return;
-    document.body.style.minHeight = '400px';
-    overlay.style.display = 'flex';
+    document.body.style.minHeight = '420px';
+    overlay.style.display = 'block';
+    onboardingStep = 0;
     renderOnboardingStep();
 }
 
+function positionSpotlightAndCard(targetEl) {
+    const spotlight = document.getElementById('onboarding-spotlight');
+    const card = document.getElementById('onboarding-card');
+    const arrow = document.getElementById('onboarding-arrow');
+    if (!spotlight || !card || !arrow) return;
+
+    spotlight.style.display = 'block';
+    card.style.display = 'block';
+    
+    // Force a reflow
+    card.getBoundingClientRect();
+    spotlight.getBoundingClientRect();
+
+    const targetRect = targetEl.getBoundingClientRect();
+    const pad = 6;
+    const sLeft = targetRect.left - pad;
+    const sTop = targetRect.top - pad;
+    const sWidth = targetRect.width + (pad * 2);
+    const sHeight = targetRect.height + (pad * 2);
+    
+    spotlight.style.left = `${sLeft}px`;
+    spotlight.style.top = `${sTop}px`;
+    spotlight.style.width = `${sWidth}px`;
+    spotlight.style.height = `${sHeight}px`;
+    spotlight.style.opacity = '1';
+
+    const cardWidth = 280;
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    
+    let cLeft = targetRect.left + (targetRect.width - cardWidth) / 2;
+    cLeft = Math.max(12, Math.min(320 - cardWidth - 12, cLeft));
+    
+    const cardHeight = card.offsetHeight || 150;
+    let cTop = targetRect.bottom + 14;
+    let arrowDir = 'up';
+    
+    if (cTop + cardHeight > viewportHeight - 12) {
+        cTop = targetRect.top - cardHeight - 14;
+        arrowDir = 'down';
+    }
+    
+    if (cTop < 12) {
+        cTop = targetRect.bottom + 14;
+        arrowDir = 'up';
+    }
+
+    card.style.left = `${cLeft}px`;
+    card.style.top = `${cTop}px`;
+    card.style.opacity = '1';
+    card.style.transform = 'scale(1)';
+
+    arrow.style.left = '';
+    arrow.style.right = '';
+    arrow.style.top = '';
+    arrow.style.bottom = '';
+    arrow.style.borderColor = 'transparent';
+    
+    const targetCenter = targetRect.left + (targetRect.width / 2);
+    const arrowLeft = targetCenter - cLeft - 6;
+    arrow.style.left = `${Math.max(12, Math.min(cardWidth - 24, arrowLeft))}px`;
+    
+    if (arrowDir === 'up') {
+        arrow.style.top = '-12px';
+        arrow.style.borderBottomColor = 'var(--card)';
+    } else {
+        arrow.style.bottom = '-12px';
+        arrow.style.borderTopColor = 'var(--card)';
+    }
+}
+
+function centerCardFallback() {
+    const spotlight = document.getElementById('onboarding-spotlight');
+    const card = document.getElementById('onboarding-card');
+    const arrow = document.getElementById('onboarding-arrow');
+    if (!card) return;
+
+    if (spotlight) {
+        spotlight.style.display = 'none';
+        spotlight.style.opacity = '0';
+    }
+    if (arrow) {
+        arrow.style.borderColor = 'transparent';
+    }
+
+    card.style.display = 'block';
+    
+    const cardWidth = 280;
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    
+    const cLeft = (320 - cardWidth) / 2;
+    const cTop = (viewportHeight - (card.offsetHeight || 150)) / 2;
+    
+    card.style.left = `${cLeft}px`;
+    card.style.top = `${cTop}px`;
+    card.style.opacity = '1';
+    card.style.transform = 'scale(1)';
+}
+
 function renderOnboardingStep() {
+    if (onboardingTimeout) clearTimeout(onboardingTimeout);
+    
     const step = onboardingSteps[onboardingStep];
     const icon = document.getElementById('onboarding-icon');
     const title = document.getElementById('onboarding-title');
     const text = document.getElementById('onboarding-text');
     const nextBtn = document.getElementById('onboarding-next');
-    const dots = document.getElementById('onboarding-dots');
-    if (!icon || !title || !text || !nextBtn || !dots) return;
+    const stepIndicator = document.getElementById('onboarding-step-indicator');
+    const progressBar = document.getElementById('onboarding-progress-bar');
+    
+    if (!icon || !title || !text || !nextBtn) return;
 
     icon.textContent = step.icon;
     title.textContent = step.title;
     text.textContent = step.text;
 
+    if (stepIndicator) {
+        stepIndicator.textContent = `Step ${onboardingStep + 1} of ${onboardingSteps.length}`;
+    }
+    if (progressBar) {
+        progressBar.style.width = `${((onboardingStep + 1) / onboardingSteps.length) * 100}%`;
+    }
+
+    nextBtn.textContent = onboardingStep === onboardingSteps.length - 1 
+        ? (getMessage('ONBOARDING_DONE') !== 'ONBOARDING_DONE' ? getMessage('ONBOARDING_DONE') : 'Done!') 
+        : getMessage('BTN_ONBOARDING_NEXT');
+
     if (step.targetTab) {
         const tabBtn = document.querySelector(`.tab-btn[data-tab="${step.targetTab}"]`);
         if (tabBtn) tabBtn.click();
@@ -2089,31 +2277,53 @@ function renderOnboardingStep() {
             if (syncActive) syncActive.style.display = 'block';
             if (syncInactive) syncInactive.style.display = 'none';
         } else {
-            // Restore actual lock state when on other tabs so we don't leave it unlocked
             const inRoom = elements.sectionActive && elements.sectionActive.style.display === 'block';
             if (syncActive) syncActive.style.display = inRoom ? 'block' : 'none';
             if (syncInactive) syncInactive.style.display = inRoom ? 'none' : 'block';
         }
     }
 
-    dots.replaceChildren();
-    onboardingSteps.forEach((_, i) => {
-        const dot = document.createElement('div');
-        dot.style.cssText = `width:8px; height:8px; border-radius:50%; background:${i === onboardingStep ? 'var(--accent)' : '#475569'};`;
-        dots.appendChild(dot);
-    });
+    const spotlight = document.getElementById('onboarding-spotlight');
+    const card = document.getElementById('onboarding-card');
+    if (spotlight) spotlight.style.opacity = '0';
+    if (card) {
+        card.style.opacity = '0';
+        card.style.transform = 'scale(0.95)';
+    }
 
-    nextBtn.textContent = onboardingStep === onboardingSteps.length - 1 ? (getMessage('ONBOARDING_DONE') !== 'ONBOARDING_DONE' ? getMessage('ONBOARDING_DONE') : 'Done!') : getMessage('BTN_ONBOARDING_NEXT');
+    onboardingTimeout = setTimeout(() => {
+        const targetEl = document.querySelector(step.targetSelector);
+        if (targetEl && targetEl.offsetParent !== null) {
+            positionSpotlightAndCard(targetEl);
+        } else {
+            centerCardFallback();
+        }
+    }, 180);
 }
 
 function completeOnboarding() {
-    const overlay = document.getElementById('onboarding-overlay');
-    if (overlay) overlay.style.display = 'none';
-    document.body.style.minHeight = '';
-    chrome.storage.sync.set({ onboardingComplete: true });
+    if (onboardingTimeout) clearTimeout(onboardingTimeout);
     
-    const inRoom = elements.sectionActive && elements.sectionActive.style.display === 'block';
-    toggleUIState(inRoom);
+    const overlay = document.getElementById('onboarding-overlay');
+    const spotlight = document.getElementById('onboarding-spotlight');
+    const card = document.getElementById('onboarding-card');
+    
+    if (card) {
+        card.style.opacity = '0';
+        card.style.transform = 'scale(0.9)';
+    }
+    if (spotlight) {
+        spotlight.style.opacity = '0';
+    }
+    
+    setTimeout(() => {
+        if (overlay) overlay.style.display = 'none';
+        document.body.style.minHeight = '';
+        chrome.storage.sync.set({ onboardingComplete: true });
+        
+        const inRoom = elements.sectionActive && elements.sectionActive.style.display === 'block';
+        toggleUIState(inRoom);
+    }, 300);
 }
 
 document.getElementById('onboarding-next')?.addEventListener('click', () => {
@@ -2130,3 +2340,8 @@ document.getElementById('onboarding-skip')?.addEventListener('click', completeOn
 document.getElementById('onboarding-overlay')?.addEventListener('click', (e) => {
     if (e.target.id === 'onboarding-overlay') completeOnboarding();
 });
+
+elements.restartTourBtn?.addEventListener('click', () => {
+    onboardingStep = 0;
+    showOnboarding();
+});

package-lock.json

@@ -6,10 +6,10 @@
   "packages": {
     "": {
       "name": "koalasync",
-      "version": "2.2.2",
+      "version": "2.2.4",
       "devDependencies": {
         "archiver": "^7.0.1",
-        "esbuild": "^0.28.0",
+        "esbuild": "^0.28.1",
         "eslint": "^10.4.0",
         "fs-extra": "^11.2.0",
         "sharp": "^0.34.5",
@@ -28,9 +28,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
-      "integrity": "sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
+      "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==",
       "cpu": [
         "ppc64"
       ],
@@ -45,9 +45,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.0.tgz",
-      "integrity": "sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz",
+      "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==",
       "cpu": [
         "arm"
       ],
@@ -62,9 +62,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.0.tgz",
-      "integrity": "sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz",
+      "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==",
       "cpu": [
         "arm64"
       ],
@@ -79,9 +79,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.0.tgz",
-      "integrity": "sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz",
+      "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==",
       "cpu": [
         "x64"
       ],
@@ -96,9 +96,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.0.tgz",
-      "integrity": "sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz",
+      "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==",
       "cpu": [
         "arm64"
       ],
@@ -113,9 +113,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.0.tgz",
-      "integrity": "sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz",
+      "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==",
       "cpu": [
         "x64"
       ],
@@ -130,9 +130,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==",
       "cpu": [
         "arm64"
       ],
@@ -147,9 +147,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.0.tgz",
-      "integrity": "sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==",
       "cpu": [
         "x64"
       ],
@@ -164,9 +164,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.0.tgz",
-      "integrity": "sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz",
+      "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==",
       "cpu": [
         "arm"
       ],
@@ -181,9 +181,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.0.tgz",
-      "integrity": "sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz",
+      "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==",
       "cpu": [
         "arm64"
       ],
@@ -198,9 +198,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.0.tgz",
-      "integrity": "sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz",
+      "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==",
       "cpu": [
         "ia32"
       ],
@@ -215,9 +215,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.0.tgz",
-      "integrity": "sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz",
+      "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==",
       "cpu": [
         "loong64"
       ],
@@ -232,9 +232,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.0.tgz",
-      "integrity": "sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz",
+      "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==",
       "cpu": [
         "mips64el"
       ],
@@ -249,9 +249,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.0.tgz",
-      "integrity": "sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz",
+      "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==",
       "cpu": [
         "ppc64"
       ],
@@ -266,9 +266,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.0.tgz",
-      "integrity": "sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz",
+      "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==",
       "cpu": [
         "riscv64"
       ],
@@ -283,9 +283,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.0.tgz",
-      "integrity": "sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz",
+      "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==",
       "cpu": [
         "s390x"
       ],
@@ -300,9 +300,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.0.tgz",
-      "integrity": "sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz",
+      "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==",
       "cpu": [
         "x64"
       ],
@@ -317,9 +317,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==",
       "cpu": [
         "arm64"
       ],
@@ -334,9 +334,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.0.tgz",
-      "integrity": "sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==",
       "cpu": [
         "x64"
       ],
@@ -351,9 +351,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==",
       "cpu": [
         "arm64"
       ],
@@ -368,9 +368,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.0.tgz",
-      "integrity": "sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==",
       "cpu": [
         "x64"
       ],
@@ -385,9 +385,9 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.0.tgz",
-      "integrity": "sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz",
+      "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==",
       "cpu": [
         "arm64"
       ],
@@ -402,9 +402,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.0.tgz",
-      "integrity": "sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz",
+      "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==",
       "cpu": [
         "x64"
       ],
@@ -419,9 +419,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.0.tgz",
-      "integrity": "sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz",
+      "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==",
       "cpu": [
         "arm64"
       ],
@@ -436,9 +436,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.0.tgz",
-      "integrity": "sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz",
+      "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==",
       "cpu": [
         "ia32"
       ],
@@ -453,9 +453,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.0.tgz",
-      "integrity": "sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz",
+      "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==",
       "cpu": [
         "x64"
       ],
@@ -1240,7 +1240,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1374,7 +1373,6 @@
       "integrity": "sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "peerDependencies": {
         "bare-abort-controller": "*"
       },
@@ -1837,9 +1835,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.0.tgz",
-      "integrity": "sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz",
+      "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -1850,32 +1848,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.28.0",
-        "@esbuild/android-arm": "0.28.0",
-        "@esbuild/android-arm64": "0.28.0",
-        "@esbuild/android-x64": "0.28.0",
-        "@esbuild/darwin-arm64": "0.28.0",
-        "@esbuild/darwin-x64": "0.28.0",
-        "@esbuild/freebsd-arm64": "0.28.0",
-        "@esbuild/freebsd-x64": "0.28.0",
-        "@esbuild/linux-arm": "0.28.0",
-        "@esbuild/linux-arm64": "0.28.0",
-        "@esbuild/linux-ia32": "0.28.0",
-        "@esbuild/linux-loong64": "0.28.0",
-        "@esbuild/linux-mips64el": "0.28.0",
-        "@esbuild/linux-ppc64": "0.28.0",
-        "@esbuild/linux-riscv64": "0.28.0",
-        "@esbuild/linux-s390x": "0.28.0",
-        "@esbuild/linux-x64": "0.28.0",
-        "@esbuild/netbsd-arm64": "0.28.0",
-        "@esbuild/netbsd-x64": "0.28.0",
-        "@esbuild/openbsd-arm64": "0.28.0",
-        "@esbuild/openbsd-x64": "0.28.0",
-        "@esbuild/openharmony-arm64": "0.28.0",
-        "@esbuild/sunos-x64": "0.28.0",
-        "@esbuild/win32-arm64": "0.28.0",
-        "@esbuild/win32-ia32": "0.28.0",
-        "@esbuild/win32-x64": "0.28.0"
+        "@esbuild/aix-ppc64": "0.28.1",
+        "@esbuild/android-arm": "0.28.1",
+        "@esbuild/android-arm64": "0.28.1",
+        "@esbuild/android-x64": "0.28.1",
+        "@esbuild/darwin-arm64": "0.28.1",
+        "@esbuild/darwin-x64": "0.28.1",
+        "@esbuild/freebsd-arm64": "0.28.1",
+        "@esbuild/freebsd-x64": "0.28.1",
+        "@esbuild/linux-arm": "0.28.1",
+        "@esbuild/linux-arm64": "0.28.1",
+        "@esbuild/linux-ia32": "0.28.1",
+        "@esbuild/linux-loong64": "0.28.1",
+        "@esbuild/linux-mips64el": "0.28.1",
+        "@esbuild/linux-ppc64": "0.28.1",
+        "@esbuild/linux-riscv64": "0.28.1",
+        "@esbuild/linux-s390x": "0.28.1",
+        "@esbuild/linux-x64": "0.28.1",
+        "@esbuild/netbsd-arm64": "0.28.1",
+        "@esbuild/netbsd-x64": "0.28.1",
+        "@esbuild/openbsd-arm64": "0.28.1",
+        "@esbuild/openbsd-x64": "0.28.1",
+        "@esbuild/openharmony-arm64": "0.28.1",
+        "@esbuild/sunos-x64": "0.28.1",
+        "@esbuild/win32-arm64": "0.28.1",
+        "@esbuild/win32-ia32": "0.28.1",
+        "@esbuild/win32-x64": "0.28.1"
       }
     },
     "node_modules/escape-string-regexp": {
@@ -1897,7 +1895,6 @@
       "integrity": "sha512-loXy6bWOoP3EP6JA7jo6p5jMpBJmHmsNZM5SFRHLdh1MGOPurMnNBj4ZlAbaqUAaQWbCr7jHV4P7gzAyryZWkQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.2",

package.json

@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "archiver": "^7.0.1",
-    "esbuild": "^0.28.0",
+    "esbuild": "^0.28.1",
     "eslint": "^10.4.0",
     "fs-extra": "^11.2.0",
     "sharp": "^0.34.5",

scripts/build-extension.js

@@ -38,7 +38,7 @@ const baseManifest = JSON.parse(fs.readFileSync(baseManifestPath, 'utf8'));
 
 // Helper to copy files, ignoring manifest.json and manifest.base.json
 // Also injects shared constants into content.js
-function copyExtensionFiles(targetDir) {
+function copyExtensionFiles(targetDir, browserName) {
   fs.mkdirSync(targetDir, { recursive: true });
   
   // Read master constants for injection
@@ -99,6 +99,28 @@ function copyExtensionFiles(targetDir) {
 
         fs.writeFileSync(destPath, content);
         console.log('✓ Injected shared constants into content.js');
+      } else if (item === 'background.js') {
+        let content = fs.readFileSync(srcPath, 'utf8');
+        
+        // 3. Inject Uninstall URL Constants
+        const uStart = '// --- UNINSTALL_URL_INJECT_START ---';
+        const uEnd = '// --- UNINSTALL_URL_INJECT_END ---';
+        const uPattern = new RegExp(`${uStart}[\\s\\S]+?${uEnd}`);
+        const placeholderUrl = "https://bye.koalastuff.net/c/camp_99ztjRVbK1BNN2RU";
+        
+        let uRep = `${uStart}\n        // This block is automatically updated by /scripts/build-extension.js\n`;
+        uRep += `        const UNINSTALL_URL = "${placeholderUrl}";\n`;
+        uRep += `        const BROWSER_TYPE = "${browserName}";\n`;
+        uRep += `        ${uEnd}`;
+        
+        if (uPattern.test(content)) {
+          content = content.replace(uPattern, uRep);
+        } else {
+          console.warn('⚠️ WARNING: Uninstall URL markers not found in background.js');
+        }
+
+        fs.writeFileSync(destPath, content);
+        console.log(`✓ Injected uninstall URL constants for ${browserName} into background.js`);
       } else {
         fs.copyFileSync(srcPath, destPath);
       }
@@ -127,7 +149,7 @@ async function buildBrowser(browserName, manifestModifier) {
   const browserDistDir = path.join(distDir, browserName);
   
   // 1. Copy files
-  copyExtensionFiles(browserDistDir);
+  copyExtensionFiles(browserDistDir, browserName);
   
   // 2. Modify and write manifest
   const browserManifest = manifestModifier(JSON.parse(JSON.stringify(baseManifest)));

scripts/test-locales.js

@@ -48,7 +48,7 @@ try {
 const enDict = JSON.parse(fs.readFileSync(enPath, 'utf8'));
 const enKeys = Object.keys(enDict);
 
-const localeFiles = fs.readdirSync(localesDir).filter(file => file.endsWith('.json') && file !== 'en.json');
+const localeFiles = fs.readdirSync(localesDir).filter(file => file.endsWith('.json'));
 
 console.log(`Auditing i18n locales using ${enKeys.length} baseline keys from en.json...\n`);
 
@@ -79,8 +79,21 @@ for (const file of localeFiles) {
 
     const missingKeys = enKeys.filter(k => !keys.includes(k));
     const extraKeys = keys.filter(k => !enKeys.includes(k));
+    const emptyKeys = keys.filter(k => typeof dict[k] === 'string' && dict[k].trim() === '');
+    const placeholderKeys = keys.filter(k => {
+      if (typeof dict[k] !== 'string') return false;
+      const val = dict[k];
+      const lower = val.toLowerCase();
+      return (
+        lower.includes('placeholder') ||
+        lower.includes('todo:') ||
+        lower.includes('tbd:') ||
+        /\bTODO\b/.test(val) ||
+        /\bTBD\b/.test(val)
+      );
+    });
 
-    if (missingKeys.length > 0 || extraKeys.length > 0) {
+    if (missingKeys.length > 0 || extraKeys.length > 0 || emptyKeys.length > 0 || placeholderKeys.length > 0) {
       hasError = true;
       console.error(`❌ ${file} has inconsistencies:`);
       if (missingKeys.length > 0) {
@@ -89,6 +102,12 @@ for (const file of localeFiles) {
       if (extraKeys.length > 0) {
         console.error(`  Extra keys (${extraKeys.length}):`, extraKeys);
       }
+      if (emptyKeys.length > 0) {
+        console.error(`  Empty translation values (${emptyKeys.length}):`, emptyKeys);
+      }
+      if (placeholderKeys.length > 0) {
+        console.error(`  Placeholder/TODO values (${placeholderKeys.length}):`, placeholderKeys);
+      }
     } else {
       console.log(`✓ ${file} is fully consistent (matches all keys).`);
     }

scripts/test-website-locales.mjs

@@ -17,7 +17,7 @@ const enDict = JSON.parse(fs.readFileSync(enPath, 'utf8'));
 const enKeys = Object.keys(enDict).sort();
 
 const localeFiles = fs.readdirSync(localesDir)
-  .filter(file => file.endsWith('.json') && file !== 'en.json')
+  .filter(file => file.endsWith('.json'))
   .sort();
 
 let hasError = false;
@@ -51,8 +51,24 @@ for (const file of localeFiles) {
 
     const missingKeys = enKeys.filter(k => !keys.includes(k));
     const extraKeys = keys.filter(k => !enKeys.includes(k));
+    const emptyKeys = keys.filter(k => {
+      if (file === 'en.json' && k === 'CANONICAL_PATH') return false;
+      return typeof dict[k] === 'string' && dict[k].trim() === '';
+    });
+    const placeholderKeys = keys.filter(k => {
+      if (typeof dict[k] !== 'string') return false;
+      const val = dict[k];
+      const lower = val.toLowerCase();
+      return (
+        lower.includes('placeholder') ||
+        lower.includes('todo:') ||
+        lower.includes('tbd:') ||
+        /\bTODO\b/.test(val) ||
+        /\bTBD\b/.test(val)
+      );
+    });
 
-    if (missingKeys.length > 0 || extraKeys.length > 0) {
+    if (missingKeys.length > 0 || extraKeys.length > 0 || emptyKeys.length > 0 || placeholderKeys.length > 0) {
       hasError = true;
       console.error(`❌ ${file} has inconsistencies:`);
       if (missingKeys.length > 0) {
@@ -61,6 +77,12 @@ for (const file of localeFiles) {
       if (extraKeys.length > 0) {
         console.error(`  Extra keys (${extraKeys.length}):`, extraKeys);
       }
+      if (emptyKeys.length > 0) {
+        console.error(`  Empty translation values (${emptyKeys.length}):`, emptyKeys);
+      }
+      if (placeholderKeys.length > 0) {
+        console.error(`  Placeholder/TODO values (${placeholderKeys.length}):`, placeholderKeys);
+      }
     } else {
       console.log(`✓ ${file} is fully consistent (matches all keys).`);
     }

server/index.js

@@ -148,22 +148,22 @@ function checkAuthRate(ip, roomId) {
 }
 
 function recordAuthFailure(ip, roomId) {
-    if (failedAuthAttempts.size > 50000) {
+    if (failedAuthAttempts.size > 200000) {
         const now = Date.now();
         // 1. Clear expired entries (> 15 mins)
         for (const [key, record] of failedAuthAttempts.entries()) {
             if (now - record.lastAttempt > 15 * 60 * 1000) {
                 failedAuthAttempts.delete(key);
             } else {
-                break; // Since entries are insertion-ordered by time, all subsequent entries are newer
+                break;
             }
         }
         
-        // 2. If still over 50k, perform LRU-style eviction on the oldest 10,000 entries (first items in Map order)
-        if (failedAuthAttempts.size > 50000) {
-            log('SECURITY', 'failedAuthAttempts size exceeded 50000. Performing insertion-order eviction.');
+        // 2. If still over 200k, perform LRU-style eviction on the oldest 10,000 entries (first items in Map order)
+        if (failedAuthAttempts.size > 200000) {
+            log('SECURITY', 'failedAuthAttempts size exceeded 200000. Performing insertion-order eviction.');
             for (const [key] of failedAuthAttempts.entries()) {
-                if (failedAuthAttempts.size <= 40000) {
+                if (failedAuthAttempts.size <= 190000) {
                     break;
                 }
                 failedAuthAttempts.delete(key);

website/locales/it.json

@@ -2,7 +2,7 @@
   "LANG_CODE": "it",
   "HTML_CLASS": "lang-it",
   "CANONICAL_PATH": "it/",
-  "LANG_TOGGLE_URL": "",
+  "LANG_TOGGLE_URL": "../",
   "LANG_TOGGLE_TEXT": "EN",
   "OG_LOCALE": "it_IT",
   "META_TITLE": "KoalaSync | Sincronizza Netflix, YouTube e qualsiasi video con gli amici",

website/locales/ja.json

@@ -2,7 +2,7 @@
   "LANG_CODE": "ja",
   "HTML_CLASS": "lang-ja",
   "CANONICAL_PATH": "ja/",
-  "LANG_TOGGLE_URL": "",
+  "LANG_TOGGLE_URL": "../",
   "LANG_TOGGLE_TEXT": "EN",
   "OG_LOCALE": "ja_JP",
   "META_TITLE": "KoalaSync | Netflix、YouTube、あらゆる動画を友達と同期視聴",

website/locales/ko.json

@@ -2,7 +2,7 @@
   "LANG_CODE": "ko",
   "HTML_CLASS": "lang-ko",
   "CANONICAL_PATH": "ko/",
-  "LANG_TOGGLE_URL": "",
+  "LANG_TOGGLE_URL": "../",
   "LANG_TOGGLE_TEXT": "EN",
   "OG_LOCALE": "ko_KR",
   "META_TITLE": "KoalaSync | Netflix, YouTube 및 모든 비디오를 친구와 실시간 동기화 시청",

website/locales/nl.json

@@ -2,7 +2,7 @@
   "LANG_CODE": "nl",
   "HTML_CLASS": "lang-nl",
   "CANONICAL_PATH": "nl/",
-  "LANG_TOGGLE_URL": "",
+  "LANG_TOGGLE_URL": "../",
   "LANG_TOGGLE_TEXT": "EN",
   "OG_LOCALE": "nl_NL",
   "META_TITLE": "KoalaSync | Synchroniseer Netflix, YouTube & elke video met vrienden",

website/locales/pl.json

@@ -2,7 +2,7 @@
   "LANG_CODE": "pl",
   "HTML_CLASS": "lang-pl",
   "CANONICAL_PATH": "pl/",
-  "LANG_TOGGLE_URL": "",
+  "LANG_TOGGLE_URL": "../",
   "LANG_TOGGLE_TEXT": "EN",
   "OG_LOCALE": "pl_PL",
   "META_TITLE": "KoalaSync | Synchronizuj Netflix, YouTube i dowolne wideo ze znajomymi",

website/locales/pt.json

@@ -2,7 +2,7 @@
   "LANG_CODE": "pt",
   "HTML_CLASS": "lang-pt",
   "CANONICAL_PATH": "pt/",
-  "LANG_TOGGLE_URL": "",
+  "LANG_TOGGLE_URL": "../",
   "LANG_TOGGLE_TEXT": "EN",
   "OG_LOCALE": "pt_PT",
   "META_TITLE": "KoalaSync | Sincronize Netflix, YouTube e qualquer vídeo com os amigos",

website/locales/tr.json

@@ -2,7 +2,7 @@
   "LANG_CODE": "tr",
   "HTML_CLASS": "lang-tr",
   "CANONICAL_PATH": "tr/",
-  "LANG_TOGGLE_URL": "",
+  "LANG_TOGGLE_URL": "../",
   "LANG_TOGGLE_TEXT": "EN",
   "OG_LOCALE": "tr_TR",
   "META_TITLE": "KoalaSync | Netflix, YouTube ve Herhangi Bir Videoyu Arkadaşlarınızla Eşitleyin",

website/template.html

@@ -102,7 +102,7 @@
         "priceCurrency": "EUR"
       },
       "description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
-      "softwareVersion": "2.2.3",
+      "softwareVersion": "2.2.4",
       "license": "https://opensource.org/licenses/MIT",
       "sameAs": "https://github.com/Shik3i/KoalaSync",
       "image": "https://sync.koalastuff.net/assets/NewLogoIcon.webp",

website/version.json

@@ -1,4 +1,4 @@
 {
   "version": "2.2.4",
-  "date": "2026-06-10T12:00:00Z"
+  "date": "2026-06-09T23:42:27Z"
 }