Refactor: Behebung Force-Sync ACK-Zaehler-Inflation, SHA-256 Hashing, Room-ID-Desinfizierung, Reduzierung MIN_SEEK_DELTA auf 2s und seekDebounce auf 300ms

chore(release): update versions to v1.9.2 [skip ci]
fix: resolve F-01 to F-08 audit bugs and QoL improvements
2026-07-26 12:08:15 +00:00 · 2026-05-30 02:00:17 +02:00 · 2026-05-29 23:35:36 +00:00 · 2026-05-30 01:34:48 +02:00 · 2026-05-29 22:08:39 +00:00 · 2026-05-30 00:06:52 +02:00
20 changed files with 1315 additions and 276 deletions
@@ -85,6 +85,7 @@ The following features are critical and must not be removed or fundamentally alt
 - **Server Transport**: Restricted to `websocket` only. Polling is disabled.
 - **Docker Context**: The Docker build must run from the **Repo Root**.
 - **Manifest Settings**: `run_at` must remain `document_idle`, and `all_frames` must remain `false`.
+- **Strict Backward & Forward Compatibility (Store Delay Rule)**: Browser extensions are distributed through stores (e.g., Chrome Web Store, Firefox Add-ons) which can take up to 2 weeks to approve updates. Therefore, the server MUST NOT reject older extension clients unless a critical protocol version bump is explicitly authorized, and new extension versions MUST remain fully operational when connected to older servers (e.g., by silently falling back if a new feature is not supported). This is a core architectural requirement.

 ## 9. Security & Deployment
 - **Tokens**: Security tokens are intentionally managed via `shared/constants.js` and server `.env`.
@@ -108,6 +109,7 @@ Before starting any task, committing, or pushing, you **MUST** run `git pull --r
 2. Commit all verified code changes and push to `main`.
 3. Create and push a new tag. **MANDATORY**: Tags MUST start with a `v` (e.g., `v1.4.0`). The GitHub Actions release workflow is strictly configured to ignore any tags without the `v` prefix.
   - **🚫 TAG IMMUTABILITY**: Once a tag is pushed to `origin`, it is **PERMANENT**. You MUST **NEVER** reuse, move, or force-push an existing tag — not even to "fix" a mistake. If a release is missing a fix, increment the version and create a **new** tag (e.g., `v1.7.0` → `v1.7.1`). Tags are immutable identifiers; moving them breaks CI pipelines, corrupts the release history, and causes unreproducible builds.
+   - **🚫 WHEN NOT TO TAG**: Do NOT create a release tag for changes that do NOT affect the shipped extension or server artifacts. Website text changes, documentation updates (`.md` files), and landing page content do NOT require a version tag. Tags trigger the full CI pipeline (Docker build, extension packaging, GitHub Release) — running this for a typo fix wastes CI resources and creates meaningless releases. Only tag when extension code (`extension/`), server code (`server/`), or shared protocol constants (`shared/`) have changed.
 4. The CI will extract the version from the tag (e.g., `v1.4.0` → `1.4.0`), inject it into all source files, build the extension artifacts, publish the Docker image, and create a GitHub Release.
 5. Verify the release builds on GitHub Actions.

@@ -8,7 +8,7 @@
  <a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc"><img src="https://img.shields.io/badge/Chrome-Download-blue?logo=googlechrome&logoColor=white" alt="Chrome Extension"></a>
 </p>

-<p align="center"><i>KoalaSync is a lightweight Browser Extension and Relay Server for synchronized video playback across any website—YouTube, Twitch, Netflix, and custom HTML5 players. Built with a focus on <b>Data Sovereignty</b> and <b>Performance</b>.</i></p>
+<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>

 ### 🌟 Why KoalaSync?

@@ -30,7 +30,28 @@

 ---

-### 📂 Repository Structure
+### 🚀 Quick Start
+
+#### For Users (Installation & Usage)
+The easiest and safest way to install KoalaSync is directly through the official browser stores:
+
+<p>
+  <a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc"><img src="https://img.shields.io/badge/Chrome-Download-blue?logo=googlechrome&logoColor=white&style=for-the-badge" alt="Chrome Extension"></a>
+  <a href="https://addons.mozilla.org/de/firefox/addon/koalasync/"><img src="https://img.shields.io/badge/Firefox-Download-orange?logo=firefoxbrowser&logoColor=white&style=for-the-badge" alt="Firefox Add-on"></a>
+</p>
+
+*(For manual offline installation: Download the latest `.zip` from the [Releases](https://github.com/Shik3i/KoalaSync/releases) page and load it as an "Unpacked Extension" in Developer Mode).*
+
+**How to use:**
+1. **Create a Room:** Click the Koala icon in your browser and hit `+ Create New Room`.
+2. **Invite Friends:** Share the auto-copied invite link. Once they click it, they automatically join.
+3. **Pick a Video:** Navigate to the Sync Tab, select the tab playing your video, and grab some popcorn! 🍿
+
+---
+
+### 🛠️ For Developers & Self-Hosters
+
+#### 📂 Repository Structure

 - `extension/`: Browser Extension (Chrome & Firefox).
 - `server/`: Node.js + Socket.IO Relay Server (Containerized).
@@ -39,16 +60,7 @@
 - `scripts/`: Automated build and synchronization utilities.
 - `docs/`: Technical deep-dives ([Architecture](docs/ARCHITECTURE.md), [Sync Guide](docs/SYNC_GUIDE.md)).

---
-
-### 🚀 Quick Start
-
-#### For Users (Installation)
-The easiest way to install KoalaSync is to download the pre-compiled version from the [Releases](https://github.com/Shik3i/KoalaSync/releases) page.
-1. Download the latest `koalasync-chrome.zip` or `koalasync-firefox.zip`.
-2. Extract the file and load it as an "Unpacked Extension" in your browser's Developer Mode.
-
-#### For Developers (Building)
+#### Building from Source
 To build the extension from source and synchronize protocol constants:
 ```bash
 npm install
@@ -1,26 +1,15 @@
 # KoalaSync Roadmap

-This document tracks planned features, improvements, and their implementation details.
+Dieses Dokument erfasst zukünftige technische Pläne und Optimierungen für das KoalaSync-System.

 ---

-## Offene technische Fragen
+## Geplante Optimierungen & Technische Roadmap

-### 1. Service Worker Fallback bei Room-State Verlust
-Manifest V3 suspendiert den Service Worker nach ~30s Inaktivität. `chrome.alarms` weckt ihn auf, aber:
- **Problem:** Wenn der SW neu startet, sind alle Variablen (`currentRoom`, `socket`, `isNamespaceJoined`) weg
- **Aktueller Stand:** `chrome.storage.session` persistiert `currentRoom`, `peerId`, `eventQueue` — der SW stellt diese beim Start wieder her (`ensureState()`)
- **Gelöst:** WebSocket wird automatisch via `connect()` neu aufgebaut. Events werden während Reconnect gequeued und nach Namespace-Join geflushed. "Reconnecting..." Status wird im Popup + Badge angezeigt. KeepAlive-Alarm auf 30s reduziert. Reconnect-Backoff: 500ms Basis, max 5s (statt vorher 1s→30s).
-
-### 7. Tests für Extensions
-Stimmt, sind aufwändig. Praktische Ansätze:
- **Unit Tests:** `jest` + `jest-chrome` (mockt `chrome.*` APIs) — testet `popup.js` Logik, Server-Logik
- **Integration Tests:** `puppeteer` mit `--load-extension` Flag — testet Extension im echten Browser
- **Server Tests:** `supertest` + `socket.io-client` — testet WebSocket-Flows
- **Aufwand:** ~400-600 LOC für sinnvolle Testabdeckung der Kernlogik
-
---
-
-## Zukünftige Features
-
-Neue Features werden nur nach expliziter Freigabe hinzugefügt.
+### 1. Behebung des synchronen Sortierungs-Flaschenhalses bei Auth-Failure LRU-Eviction
+* **Kategorie**: Performance / DoS-Prävention
+* **Hintergrund**: Der Server schützt Räume vor Brute-Force-Angriffen durch die Nachverfolgung fehlerhafter Anmeldeversuche (`failedAuthAttempts` Map). Bei Erreichen des Limits von 50.000 Einträgen wird ein Bereinigungsverfahren gestartet, das die gesamte Map in ein Array konvertiert und dieses per `Array.from().sort()` sortiert.
+* **Problem**: Dies blockiert den Node.js-Main-Thread für mehrere Millisekunden und stellt einen potenziellen Denial-of-Service-Vektor (DoS) dar, wenn ein Angreifer gezielt Fehlversuche spamt.
+* **Geplante Lösung**: 
+  - Umstellung auf eine echte, $O(1)$-basierte LRU-Cache-Datenstruktur (z. B. doppelt verkettete Liste in Kombination mit einer Map).
+  - Alternativ: Ein vereinfachtes zeitbasiertes Ablauf-Verfahren oder ein schrittweises Löschen von Segmenten (Chunk-Eviction), um Blockaden des Main-Threads vollständig auszuschließen.
@@ -1,4 +1,5 @@
 import { EVENTS, PROTOCOL_VERSION, OFFICIAL_SERVER_URL, OFFICIAL_SERVER_TOKEN, APP_VERSION, EPISODE_LOBBY_TIMEOUT, FORCE_SYNC_TIMEOUT } from './shared/constants.js';
+import { generateUsername } from './shared/names.js';

 // --- State Management ---
 let socket = null;
@@ -15,6 +16,24 @@ let pendingHistory = [];
 let eventQueue = [];
 let isNamespaceJoined = false;
 let lastActionState = { action: null, senderId: null, timestamp: 0, acks: [] };
+let localSeq = 0;                         // Monotonically increasing command sequence for this peer
+const lastSeqBySender = {};               // senderId → last received seq (stale command guard)
+const activePorts = new Set();            // New: track active content ports for keep-alive
+let expectedAcksCount = 0;                // Snapshot of peerCount when initiating Force Sync
+
+// --- Keep-Alive Port Listener ---
+chrome.runtime.onConnect.addListener((port) => {
+    if (port.name === 'keepAlive') {
+        activePorts.add(port);
+        port.onDisconnect.addListener(() => {
+            activePorts.delete(port);
+        });
+    }
+});
+
+function _persistLastSeq() {
+    if (storageInitialized) chrome.storage.session.set({ lastSeqBySender });
+}

 // --- Boot Sequence Lock ---
 let restorationTask = null;
@@ -35,9 +54,10 @@ function ensureState() {
                'logs', 'history', 'currentRoom', 'lastActionState', 
                'eventQueue', 'isForceSyncInitiator', 'forceSyncAcks', 
                'forceSyncDeadline', 'reconnectFailed', 'reconnectStartTime', 'currentTabId', 'currentTabTitle',
-                'episodeLobby'
+                'episodeLobby', 'localSeq', 'lastSeqBySender', 'expectedAcksCount'
            ], (data) => {
                clearTimeout(storageTimeout);
+                if (data.expectedAcksCount !== undefined) expectedAcksCount = data.expectedAcksCount;
                if (data.currentTabId !== undefined) currentTabId = data.currentTabId;
                if (data.currentTabTitle !== undefined) currentTabTitle = data.currentTabTitle;
                // Merge data from storage with any early-arriving state
@@ -84,6 +104,9 @@ function ensureState() {
                    }
                }

+                if (data.localSeq !== undefined && !isNaN(data.localSeq)) localSeq = data.localSeq;
+                if (data.lastSeqBySender && typeof data.lastSeqBySender === 'object') Object.assign(lastSeqBySender, data.lastSeqBySender);
+
                storageInitialized = true;
                
                // Process any early logs/history that weren't captured in the spread
@@ -125,6 +148,26 @@ let forceSyncTimeout = null;
 let episodeLobby = null; // { expectedTitle, initiatorPeerId, readyPeers: [], createdAt }
 let episodeLobbyTimeout = null;

+// --- Episode Title Extraction (synced with content.js) ---
+function extractEpisodeId(title) {
+    if (!title || typeof title !== 'string') return null;
+    const se = title.match(/S(?:eason\s*)?(\d+)[\s\-\.]*E(?:pisode\s*)?(\d+)/i);
+    if (se) return `S${String(se[1]).padStart(2, '0')}E${String(se[2]).padStart(2, '0')}`;
+    const ep = title.match(/(?:Episode|Folge|Ep\.?|#)\s*(\d+)/i);
+    if (ep) return `EP${String(ep[1]).padStart(3, '0')}`;
+    return null;
+}
+
+function sameEpisode(titleA, titleB) {
+    if (!titleA && !titleB) return true; // Both unknown → assume same (backward compat)
+    if (!titleA || !titleB) return false; // One unknown, one known → different
+    const idA = extractEpisodeId(titleA);
+    const idB = extractEpisodeId(titleB);
+    if (idA && idB) return idA === idB; // Both have parseable IDs → compare IDs
+    if (idA || idB) return false;       // One has ID, other doesn't → different
+    return titleA === titleB;            // Neither has ID → exact string match
+}
+
 // --- Storage Utils ---

 /**
@@ -186,9 +229,7 @@ async function getSettings() {
            }
            let username = data.username;
            if (!username) {
-                const adjs = ['Happy', 'Cool', 'Fast', 'Smart', 'Brave', 'Calm', 'Sneaky', 'Lazy', 'Wild', 'Chill', 'Lucky', 'Epic', 'Swift', 'Bold', 'Mighty', 'Cosmic', 'Neon', 'Shadow', 'Crystal', 'Thunder', 'Silent', 'Golden', 'Fierce', 'Noble', 'Mystic', 'Frozen', 'Blazing', 'Sapphire', 'Iron', 'Crimson'];
-                const nouns = ['Koala', 'Panda', 'Tiger', 'Eagle', 'Fox', 'Bear', 'Wolf', 'Lion', 'Hawk', 'Seal', 'Owl', 'Shark', 'Dragon', 'Phoenix', 'Falcon', 'Panther', 'Raven', 'Cobra', 'Lynx', 'Jaguar', 'Orca', 'Mantis', 'Viper', 'Condor', 'Badger', 'Otter', 'Rhino', 'Crane', 'Mongoose', 'Specter'];
-                username = `${adjs[Math.floor(Math.random() * adjs.length)]}${nouns[Math.floor(Math.random() * nouns.length)]}`;
+                username = generateUsername();
                chrome.storage.sync.set({ username }, () => {
                    resolve({
                        serverUrl: data.serverUrl || '',
@@ -534,9 +575,47 @@ function handleServerEvent(event, data) {
            currentRoom = data;
            if (currentRoom && Array.isArray(currentRoom.peers)) {
                currentRoom.peers = currentRoom.peers.map(p => typeof p === 'object' ? createPeerData(p) : { peerId: p, username: null, tabTitle: null, mediaTitle: null, playbackState: null, currentTime: null, volume: null, muted: null, lastHeartbeat: Date.now() });
+                
+                // Clear sequence tracking for peers that are no longer in the room
+                const activePeerIds = new Set(currentRoom.peers.map(p => typeof p === 'object' ? p.peerId : p));
+                Object.keys(lastSeqBySender).forEach(pId => {
+                    if (!activePeerIds.has(pId)) {
+                        delete lastSeqBySender[pId];
+                    }
+                });
+                _persistLastSeq();
            } else if (currentRoom) {
                currentRoom.peers = [];
            }
+
+            // Recover server-tracked active Episode Lobby if present
+            if (data && data.activeLobby && !episodeLobby) {
+                episodeLobby = {
+                    expectedTitle: data.activeLobby.expectedTitle,
+                    initiatorPeerId: data.activeLobby.initiatorPeerId,
+                    readyPeers: data.activeLobby.readyPeers,
+                    createdAt: Date.now()
+                };
+                persistEpisodeLobby();
+                broadcastLobbyUpdate();
+                addLog(`Recovered active episode lobby from server: "${episodeLobby.expectedTitle}"`, 'info');
+
+                // Notify content script to start polling
+                if (currentTabId) {
+                    const tabId = parseInt(currentTabId);
+                    if (!isNaN(tabId)) {
+                        chrome.tabs.sendMessage(tabId, {
+                            type: 'EPISODE_LOBBY',
+                            expectedTitle: episodeLobby.expectedTitle
+                        }).catch(() => {});
+                    }
+                }
+
+                // Schedule timeout if we don't already have one
+                if (!episodeLobbyTimeout) {
+                    episodeLobbyTimeout = setTimeout(() => cancelEpisodeLobby('Timeout'), EPISODE_LOBBY_TIMEOUT);
+                }
+            }
            if (storageInitialized) chrome.storage.session.set({ currentRoom });
            addLog(`Joined Room: ${data?.roomId || 'unknown'}`, 'success');
            chrome.runtime.sendMessage({ type: 'PEER_UPDATE', peers: data.peers }).catch(() => {});
@@ -576,6 +655,15 @@ function handleServerEvent(event, data) {
        case EVENTS.PAUSE:
        case EVENTS.SEEK:
        case EVENTS.FORCE_SYNC_PREPARE:
+            if (data.senderId && typeof data.seq === 'number') {
+                const lastSeq = lastSeqBySender[data.senderId];
+                if (lastSeq !== undefined && data.seq <= lastSeq) {
+                    addLog(`Ignored stale ${event} from ${data.senderId} (seq ${data.seq} <= ${lastSeq})`, 'warn');
+                    break;
+                }
+                lastSeqBySender[data.senderId] = data.seq;
+                _persistLastSeq();
+            }
            if (data.senderId) {
                addToHistory(event, data.senderId);
                showNotification(data.senderId, event);
@@ -592,6 +680,12 @@ function handleServerEvent(event, data) {
            routeToContent(event, data);
            break;
        case EVENTS.FORCE_SYNC_ACK:
+            if (data.senderId && typeof data.seq === 'number') {
+                const lastSeq = lastSeqBySender[data.senderId];
+                if (lastSeq !== undefined && data.seq <= lastSeq) break;
+                lastSeqBySender[data.senderId] = data.seq;
+                _persistLastSeq();
+            }
            if (isForceSyncInitiator) {
                forceSyncAcks.add(data.senderId);
                chrome.storage.session.set({ forceSyncAcks: Array.from(forceSyncAcks) });
@@ -613,14 +707,20 @@ function handleServerEvent(event, data) {
                    });
                }

-                // Check if all peers responded
-                const peerCount = currentRoom && Array.isArray(currentRoom.peers) ? currentRoom.peers.length : 1;
-                if (forceSyncAcks.size >= peerCount) {
+                // Check if all peers responded using the snapshot count
+                const targetCount = expectedAcksCount > 0 ? expectedAcksCount : (currentRoom && Array.isArray(currentRoom.peers) ? currentRoom.peers.length : 1);
+                if (forceSyncAcks.size >= targetCount) {
                    executeForceSync();
                }
            }
            break;
        case EVENTS.FORCE_SYNC_EXECUTE:
+            if (data?.senderId && typeof data.seq === 'number') {
+                const lastSeq = lastSeqBySender[data.senderId];
+                if (lastSeq !== undefined && data.seq <= lastSeq) break;
+                lastSeqBySender[data.senderId] = data.seq;
+                _persistLastSeq();
+            }
            if (data?.senderId) {
                addToHistory(event, data.senderId);
                showNotification(data.senderId, event);
@@ -667,6 +767,9 @@ function handleServerEvent(event, data) {
                if (!Array.isArray(currentRoom.peers)) currentRoom.peers = [];
                if (data.status === 'joined') {
                    if (!currentRoom.peers.find(p => (p.peerId || p) === data.peerId)) {
+                        delete lastSeqBySender[data.peerId];
+                        _persistLastSeq();
+                        
                        currentRoom.peers.push(createPeerData(data));
                        if (storageInitialized) chrome.storage.session.set({ currentRoom });
                        chrome.runtime.sendMessage({ type: 'PEER_UPDATE', peers: currentRoom.peers }).catch(() => {});
@@ -685,8 +788,11 @@ function handleServerEvent(event, data) {
                    }

                    if (isForceSyncInitiator) {
-                        const peerCount = Array.isArray(currentRoom.peers) ? currentRoom.peers.length : 1;
-                        if (forceSyncAcks.size >= peerCount) {
+                        forceSyncAcks.delete(data.peerId);
+                        chrome.storage.session.set({ forceSyncAcks: Array.from(forceSyncAcks) });
+                        expectedAcksCount = Math.max(1, currentRoom.peers ? currentRoom.peers.length : 1);
+                        chrome.storage.session.set({ expectedAcksCount });
+                        if (forceSyncAcks.size >= expectedAcksCount) {
                            executeForceSync();
                        }
                    }
@@ -701,12 +807,14 @@ function handleServerEvent(event, data) {
                            peer.muted = data.muted !== undefined ? data.muted : peer.muted;

                            const timeSinceReactive = peer.lastReactiveUpdate ? (Date.now() - peer.lastReactiveUpdate) : Infinity;
-                            const ignoreStatus = timeSinceReactive < 1000;
+                            const ignoreStatus = timeSinceReactive < 300;

                            if (!ignoreStatus) {
                                peer.playbackState = data.playbackState !== undefined ? data.playbackState : peer.playbackState;
                                peer.currentTime = data.currentTime !== undefined ? data.currentTime : peer.currentTime;
-                                peer.lastHeartbeat = Date.now();
+                                if (data.playbackState !== undefined || data.currentTime !== undefined) {
+                                    peer.lastHeartbeat = Date.now();
+                                }
                            }
                        } else {
                            // Migration: replace string peer with normalized object
@@ -723,7 +831,7 @@ function handleServerEvent(event, data) {
            if (data.senderId && data.expectedTitle) {
                addLog(`Episode lobby from ${data.senderId}: "${data.expectedTitle}"`, 'info');
                // If we already have a lobby for this same title, treat as dedup
-                if (episodeLobby && episodeLobby.expectedTitle === data.expectedTitle) {
+                if (episodeLobby && sameEpisode(episodeLobby.expectedTitle, data.expectedTitle)) {
                    break; // Already tracking this lobby
                }
                // Cancel any existing lobby before starting a new one
@@ -732,7 +840,7 @@ function handleServerEvent(event, data) {
                episodeLobby = {
                    expectedTitle: data.expectedTitle,
                    initiatorPeerId: data.senderId,
-                    readyPeers: [],
+                    readyPeers: [data.senderId], // Initiator is already ready
                    createdAt: Date.now()
                };
                persistEpisodeLobby();
@@ -764,6 +872,13 @@ function handleServerEvent(event, data) {
                }
            }
            break;
+        case EVENTS.EPISODE_LOBBY_CANCEL:
+            if (episodeLobby) {
+                const title = episodeLobby.expectedTitle;
+                clearEpisodeLobbyState();
+                addLog(`Episode lobby for "${title}" cancelled by ${data.senderId || 'peer'}`, 'warn');
+            }
+            break;
        default:
            addLog(`Received unknown event from server: ${event}`, 'warn');
            break;
@@ -774,10 +889,12 @@ function executeForceSync() {
    if (forceSyncTimeout) clearTimeout(forceSyncTimeout);
    isForceSyncInitiator = false;
    forceSyncAcks.clear();
+    expectedAcksCount = 0;
    chrome.storage.session.set({ 
        isForceSyncInitiator: false, 
        forceSyncAcks: [], 
-        forceSyncDeadline: null 
+        forceSyncDeadline: null,
+        expectedAcksCount: 0
    });

    // Set all peers to playing and apply a reactive lock to block stale heartbeats
@@ -795,8 +912,11 @@ function executeForceSync() {
    const executionTimestamp = Date.now();
    updateLastAction(EVENTS.FORCE_SYNC_EXECUTE, 'You', executionTimestamp);

-    emit(EVENTS.FORCE_SYNC_EXECUTE, { actionTimestamp: executionTimestamp });
-    routeToContent(EVENTS.FORCE_SYNC_EXECUTE, { actionTimestamp: executionTimestamp });
+    localSeq++;
+    chrome.storage.session.set({ localSeq });
+
+    emit(EVENTS.FORCE_SYNC_EXECUTE, { actionTimestamp: executionTimestamp, seq: localSeq });
+    routeToContent(EVENTS.FORCE_SYNC_EXECUTE, { actionTimestamp: executionTimestamp, seq: localSeq });
    addLog('Force Sync Executed', 'success');
 }

@@ -828,6 +948,10 @@ function clearEpisodeLobbyState() {
 function cancelEpisodeLobby(reason) {
    if (!episodeLobby) return;
    const title = episodeLobby.expectedTitle;
+    
+    // Broadcast cancellation to room
+    emit(EVENTS.EPISODE_LOBBY_CANCEL, { peerId });
+
    clearEpisodeLobbyState();
    addLog(`Episode lobby cancelled: ${reason} for "${title}"`, 'warn');

@@ -849,6 +973,7 @@ function executeEpisodeLobby() {

    isForceSyncInitiator = true;
    forceSyncAcks.clear();
+    expectedAcksCount = currentRoom && Array.isArray(currentRoom.peers) ? currentRoom.peers.length : 1;
    const deadline = Date.now() + FORCE_SYNC_TIMEOUT;
    const timestamp = Date.now();
    updateLastAction(EVENTS.FORCE_SYNC_PREPARE, 'You', timestamp);
@@ -857,12 +982,15 @@ function executeEpisodeLobby() {
    chrome.storage.session.set({ 
        isForceSyncInitiator: true, 
        forceSyncAcks: [], 
-        forceSyncDeadline: deadline 
+        forceSyncDeadline: deadline,
+        expectedAcksCount: expectedAcksCount
    });

    const syncPayload = { targetTime: 0.0 };
-    emit(EVENTS.FORCE_SYNC_PREPARE, { ...syncPayload, peerId, actionTimestamp: timestamp });
-    routeToContent(EVENTS.FORCE_SYNC_PREPARE, { ...syncPayload, actionTimestamp: timestamp });
+    localSeq++;
+    chrome.storage.session.set({ localSeq });
+    emit(EVENTS.FORCE_SYNC_PREPARE, { ...syncPayload, peerId, actionTimestamp: timestamp, seq: localSeq });
+    routeToContent(EVENTS.FORCE_SYNC_PREPARE, { ...syncPayload, actionTimestamp: timestamp, seq: localSeq });

    forceSyncTimeout = setTimeout(() => {
        if (isForceSyncInitiator) {
@@ -920,6 +1048,10 @@ async function routeToContent(action, payload) {
    const actionTimestamp = payload?.actionTimestamp || Date.now();
    const commandSenderId = payload?.senderId || null;

+    _routeToContentInternal(tabId, action, payload, actionTimestamp, commandSenderId, 0);
+}
+
+function _routeToContentInternal(tabId, action, payload, actionTimestamp, commandSenderId, retries) {
    chrome.tabs.sendMessage(tabId, { 
        type: 'SERVER_COMMAND',
        action,
@@ -927,12 +1059,18 @@ async function routeToContent(action, payload) {
        actionTimestamp,
        commandSenderId
    }).catch(err => {
+        if (retries >= 3) {
+            addLog(`Content Script not responding in tab ${tabId} after ${retries} retries`, 'warn');
+            currentTabId = null;
+            updateBadgeStatus();
+            return;
+        }
        if (err.message.includes('Receiving end does not exist') || err.message.includes('Extension context invalidated')) {
            chrome.scripting.executeScript({
                target: { tabId },
                files: ['content.js']
            }).then(() => {
-                setTimeout(() => routeToContent(action, payload), 500);
+                setTimeout(() => _routeToContentInternal(tabId, action, payload, actionTimestamp, commandSenderId, retries + 1), 500);
            }).catch(_err => {
                addLog(`Auto-reinject failed for tab ${tabId}`, 'warn');
            });
@@ -980,11 +1118,13 @@ function leaveOldRoomIfSwitching(newRoomId) {
        // Reset force sync states
        isForceSyncInitiator = false;
        forceSyncAcks.clear();
+        expectedAcksCount = 0;
        if (forceSyncTimeout) clearTimeout(forceSyncTimeout);
        chrome.storage.session.set({ 
            isForceSyncInitiator: false, 
            forceSyncAcks: [], 
-            forceSyncDeadline: null 
+            forceSyncDeadline: null,
+            expectedAcksCount: 0
        });

        // Cancel any active episode lobby
@@ -1059,6 +1199,7 @@ async function handleAsyncMessage(message, sender, sendResponse) {
        
        isForceSyncInitiator = false;
        forceSyncAcks.clear();
+        expectedAcksCount = 0;
        if (forceSyncTimeout) clearTimeout(forceSyncTimeout);

        // Cancel any active episode lobby
@@ -1069,7 +1210,8 @@ async function handleAsyncMessage(message, sender, sendResponse) {
            isForceSyncInitiator: false,
            forceSyncAcks: [],
            forceSyncDeadline: null,
-            episodeLobby: null
+            episodeLobby: null,
+            expectedAcksCount: 0
        });
        addLog('Left Room', 'info');
        chrome.runtime.sendMessage({ type: 'PEER_UPDATE', peers: [] }).catch(() => {});
@@ -1085,7 +1227,8 @@ async function handleAsyncMessage(message, sender, sendResponse) {
        emit(EVENTS.GET_ROOMS, {});
        sendResponse({ status: 'ok' });
    } else if (message.type === 'WEB_JOIN_REQUEST') {
-        const { roomId, password, useCustomServer, serverUrl } = message;
+        const { roomId: rawRoomId, password, useCustomServer, serverUrl } = message;
+        const roomId = typeof rawRoomId === 'string' ? rawRoomId.replace(/[^a-zA-Z0-9\-]/g, '') : '';
        chrome.storage.sync.set({ 
            roomId, 
            password,
@@ -1135,10 +1278,13 @@ async function handleAsyncMessage(message, sender, sendResponse) {
    } else if (message.type === 'CONTENT_EVENT') {
        const processEvent = () => {
            const timestamp = Date.now();
+            localSeq++;
+            chrome.storage.session.set({ localSeq });
            updateLastAction(message.action, 'You', timestamp);
            lastActionState.targetTime = message.payload?.targetTime !== undefined ? message.payload.targetTime : message.payload?.currentTime;
            if (storageInitialized) chrome.storage.session.set({ lastActionState });
            message.payload.actionTimestamp = timestamp;
+            message.payload.seq = localSeq;
            
            // Local Reactive Update
            updateLocalPeerState(peerId, {
@@ -1149,16 +1295,19 @@ async function handleAsyncMessage(message, sender, sendResponse) {
            if (message.action === EVENTS.FORCE_SYNC_PREPARE) {
                isForceSyncInitiator = true;
                forceSyncAcks.clear();
+                expectedAcksCount = currentRoom && Array.isArray(currentRoom.peers) ? currentRoom.peers.length : 1;
                const deadline = Date.now() + FORCE_SYNC_TIMEOUT;
                chrome.storage.session.set({ 
                    isForceSyncInitiator: true, 
                    forceSyncAcks: [], 
-                    forceSyncDeadline: deadline 
+                    forceSyncDeadline: deadline,
+                    expectedAcksCount: expectedAcksCount
                });
                addLog('Initiating Force Sync...', 'info');
                
                routeToContent(EVENTS.FORCE_SYNC_PREPARE, message.payload);
     
+                if (forceSyncTimeout) clearTimeout(forceSyncTimeout);
                forceSyncTimeout = setTimeout(() => {
                    if (isForceSyncInitiator) {
                        addLog('Force Sync: Timeout waiting for ACKs, executing anyway...', 'warn');
@@ -1167,6 +1316,16 @@ async function handleAsyncMessage(message, sender, sendResponse) {
                }, FORCE_SYNC_TIMEOUT);
            }
            addToHistory(message.action, 'You');
+            
+            const isNonEssentialEvent = message.action === EVENTS.PLAY || message.action === EVENTS.PAUSE || message.action === EVENTS.SEEK;
+            const otherCount = currentRoom && Array.isArray(currentRoom.peers) ? currentRoom.peers.filter(p => (typeof p === 'object' ? p.peerId : p) !== peerId).length : 0;
+            const hasOtherPeers = otherCount > 0;
+            
+            if (isNonEssentialEvent && !hasOtherPeers) {
+                sendResponse({ status: 'ok_solo' });
+                return;
+            }
+            
            emit(message.action, { ...message.payload, peerId });
            sendResponse({ status: 'ok' });
        };
@@ -1206,7 +1365,9 @@ async function handleAsyncMessage(message, sender, sendResponse) {
                executeForceSync();
            }
        } else {
-            emit(EVENTS.FORCE_SYNC_ACK, { peerId });
+            localSeq++;
+            chrome.storage.session.set({ localSeq });
+            emit(EVENTS.FORCE_SYNC_ACK, { peerId, seq: localSeq });
        }
        sendResponse({ status: 'ok' });
    } else if (message.type === 'CMD_ACK') {
@@ -1301,7 +1462,7 @@ async function handleAsyncMessage(message, sender, sendResponse) {
        }

        // If lobby already exists for this title, just mark self ready
-        if (episodeLobby && episodeLobby.expectedTitle === newTitle) {
+        if (episodeLobby && sameEpisode(episodeLobby.expectedTitle, newTitle)) {
            if (!episodeLobby.readyPeers.includes(peerId)) {
                episodeLobby.readyPeers.push(peerId);
                persistEpisodeLobby();
@@ -1348,7 +1509,7 @@ async function handleAsyncMessage(message, sender, sendResponse) {
        sendResponse({ status: 'lobby_created' });
    } else if (message.type === 'EPISODE_READY_LOCAL') {
        // Content script confirmed it loaded the lobby episode
-        if (episodeLobby && message.payload && message.payload.title === episodeLobby.expectedTitle) {
+        if (episodeLobby && message.payload && sameEpisode(message.payload.title, episodeLobby.expectedTitle)) {
            if (!episodeLobby.readyPeers.includes(peerId)) {
                episodeLobby.readyPeers.push(peerId);
                persistEpisodeLobby();
@@ -1366,6 +1527,13 @@ async function handleAsyncMessage(message, sender, sendResponse) {
        } else {
            sendResponse({ lobbyActive: false });
        }
+    } else if (message.type === 'CANCEL_EPISODE_LOBBY') {
+        if (episodeLobby) {
+            cancelEpisodeLobby('Cancelled by user');
+            sendResponse({ status: 'ok' });
+        } else {
+            sendResponse({ error: 'No active lobby' });
+        }
    } else {
        // Final fallback to prevent channel hanging
        sendResponse({ error: 'unhandled_message' });
@@ -1373,18 +1541,50 @@ async function handleAsyncMessage(message, sender, sendResponse) {
 }

 // Tab removal listener
-chrome.tabs.onRemoved.addListener((tabId) => {
+chrome.tabs.onRemoved.addListener(async (tabId) => {
+    await ensureState();
    if (tabId === currentTabId) {
+        const wasInRoom = !!currentRoom;
        currentTabId = null;
        currentTabTitle = null;
        chrome.storage.session.set({ currentTabId: null, currentTabTitle: null });
        updateBadgeStatus();
        addLog('Target tab closed.', 'warn');
+
+        if (wasInRoom) {
+            const roomAtClose = currentRoom;
+            getSettings().then(settings => {
+                if (currentRoom !== roomAtClose) return;
+
+                emit(EVENTS.PEER_STATUS, {
+                    peerId,
+                    playbackState: 'paused',
+                    currentTime: null,
+                    mediaTitle: null,
+                    username: settings.username,
+                    tabTitle: null
+                });
+
+                if (currentRoom && Array.isArray(currentRoom.peers)) {
+                    const me = currentRoom.peers.find(p => (p.peerId || p) === peerId);
+                    if (me && typeof me === 'object') {
+                        me.playbackState = 'paused';
+                        me.currentTime = null;
+                        me.mediaTitle = null;
+                        me.tabTitle = null;
+                        me.lastHeartbeat = Date.now();
+                        if (storageInitialized) chrome.storage.session.set({ currentRoom });
+                        chrome.runtime.sendMessage({ type: 'PEER_UPDATE', peers: currentRoom.peers }).catch(() => {});
+                    }
+                }
+            }).catch(() => {});
+        }
    }
 });

 // Re-inject on full page refresh
-chrome.tabs.onUpdated.addListener((tabId, changeInfo, _tab) => {
+chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, _tab) => {
+    await ensureState();
    if (currentTabId && tabId === parseInt(currentTabId) && changeInfo.status === 'complete') {
        chrome.scripting.executeScript({
            target: { tabId },
@@ -1,3 +1,4 @@
+/* global cloneInto */
 /**
 * KoalaSync Bridge Script
 * Injected into sync.koalastuff.net to facilitate communication between 
@@ -22,12 +23,15 @@ window.addEventListener('KOALASYNC_JOIN_REQUEST', (e) => {
 // 3. Listen for Status Updates from the Extension and relay to Website
 chrome.runtime.onMessage.addListener((msg) => {
    if (msg.type === 'JOIN_STATUS') {
-        const event = new CustomEvent('KOALASYNC_STATUS', { 
-            detail: { 
-                success: msg.success, 
-                message: msg.message 
-            } 
-        });
-        window.dispatchEvent(event);
+        const detail = { success: msg.success, message: msg.message };
+        // Firefox MV3 content scripts run in an isolated world. When dispatching
+        // a CustomEvent with a detail object, Firefox wraps it in an XrayWrapper
+        // that the page's JavaScript cannot destructure (Permission denied).
+        // cloneInto() exposes the object to the page's context correctly.
+        // Chrome doesn't have this issue — cloneInto() is undefined there.
+        const safeDetail = typeof cloneInto === 'function'
+            ? cloneInto(detail, document.defaultView)
+            : detail;
+        window.dispatchEvent(new CustomEvent('KOALASYNC_STATUS', { detail: safeDetail }));
    }
 });
@@ -29,13 +29,30 @@
    };
    // --- SHARED_EVENTS_INJECT_END ---

-    let expectedEvents = new Set();
-    let expectedTimeouts = {};
+    // Suppresses native event reporting after a programmatic action.
+    // Each entry is a per-type timer (key = 'playing'|'paused'|'seek').
+    // While a timer exists, matching native events are consumed and not relayed.
+    // Timers self-clean after 300ms if the native event never fires.
+    let _suppressTimers = {};
+
+    function _setSuppress(state) {
+        if (_suppressTimers[state]) clearTimeout(_suppressTimers[state]);
+        _suppressTimers[state] = setTimeout(() => {
+            delete _suppressTimers[state];
+        }, 300);
+    }
+
+    function _clearSuppress(state) {
+        if (_suppressTimers[state]) {
+            clearTimeout(_suppressTimers[state]);
+            delete _suppressTimers[state];
+        }
+    }

    // --- Seek Relay Filtering ---
    // Minimum seek delta (seconds) to report. Prevents HLS/DASH buffering micro-seeks
    // from being relayed to peers as user-initiated seeks.
-    const MIN_SEEK_DELTA = 3.0;
+    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

@@ -44,19 +61,17 @@
    let episodeTransitionDebounce = null;
    let _pendingLobbyTitle = null; // Title we're waiting to match (from remote lobby)
    let lobbyPollTimer = null;
+    let _autoSyncEnabled = true; // Cached setting, updated via storage.onChanged

-    function expectEvent(state) {
-        expectedEvents.add(state);
-        if (expectedTimeouts[state]) {
-            clearTimeout(expectedTimeouts[state]);
-            delete expectedTimeouts[state];
+    // Cache the autoSyncNextEpisode setting
+    chrome.storage.sync.get(['autoSyncNextEpisode'], (data) => {
+        _autoSyncEnabled = data.autoSyncNextEpisode !== false; // default: enabled
+    });
+    chrome.storage.onChanged.addListener((changes, area) => {
+        if (area === 'sync' && changes.autoSyncNextEpisode) {
+            _autoSyncEnabled = changes.autoSyncNextEpisode.newValue !== false;
        }
-        const timeout = state === 'seek' ? 10000 : 1500;
-        expectedTimeouts[state] = setTimeout(() => {
-            expectedEvents.delete(state);
-            delete expectedTimeouts[state];
-        }, timeout);
-    }
+    });

    function reportLog(message, level = 'info') {
        chrome.runtime.sendMessage({ type: 'LOG', message, level }).catch(() => {});
@@ -66,7 +81,12 @@
    function findVideo(root = document) {
        const video = root.querySelector('video');
        if (video) return video;
-        for (const el of root.querySelectorAll('*')) {
+        
+        // Optimize: scan only potential player, video, media, and stream hosts by matching typical keywords (case-insensitive)
+        // or common custom element tags. This prevents recursive scanning of thousands of standard DOM nodes (div, span, a, etc.)
+        // while guaranteeing 100% airtight compatibility with all video web components in the wild.
+        const potentialHosts = root.querySelectorAll('[id*="player" i], [class*="player" i], [id*="video" i], [class*="video" i], [id*="media" i], [class*="media" i], [id*="stream" i], [class*="stream" i], ytd-player, netflix-player, emby-player, jellyfin-player, video-player');
+        for (const el of potentialHosts) {
            if (el.shadowRoot) {
                const found = findVideo(el.shadowRoot);
                if (found) return found;
@@ -82,6 +102,43 @@
            : null;
    }

+    // Extract a canonical episode identifier from a title string.
+    // Handles: S01E01, S1E1, S01 - E01, Season 1 Episode 1, "Folge 5", "Episode 5", "Ep. 5", "#5"
+    // Returns null if no episode pattern found.
+    function extractEpisodeId(title) {
+        if (!title || typeof title !== 'string') return null;
+        // S01E01 patterns (with optional spaces, dashes, dots between S and E)
+        const se = title.match(/S(?:eason\s*)?(\d+)[\s\-\.]*E(?:pisode\s*)?(\d+)/i);
+        if (se) return `S${String(se[1]).padStart(2, '0')}E${String(se[2]).padStart(2, '0')}`;
+        // "Episode X", "Folge X", "Ep. X", "#X"
+        const ep = title.match(/(?:Episode|Folge|Ep\.?|#)\s*(\d+)/i);
+        if (ep) return `EP${String(ep[1]).padStart(3, '0')}`;
+        return null;
+    }
+
+    // Returns true if two titles likely refer to the same episode.
+    // Strict: both must have IDs and match, OR neither has IDs and exact match.
+    function sameEpisode(titleA, titleB) {
+        if (!titleA && !titleB) return true; // Both unknown → assume same (backward compat)
+        if (!titleA || !titleB) return false; // One unknown, one known → different
+        const idA = extractEpisodeId(titleA);
+        const idB = extractEpisodeId(titleB);
+        if (idA && idB) return idA === idB; // Both have parseable IDs → compare IDs
+        if (idA || idB) return false;       // One has ID, other doesn't → different
+        return titleA === titleB;            // Neither has ID → exact string match
+    }
+
+    // Returns true only when we are CERTAIN the episodes differ.
+    // Permissive: only blocks if BOTH titles have parseable IDs AND they differ.
+    // Films, music, unparseable titles always pass through.
+    function isDifferentEpisode(titleA, titleB) {
+        if (!titleA || !titleB) return false; // Unknown → allow
+        const idA = extractEpisodeId(titleA);
+        const idB = extractEpisodeId(titleB);
+        if (!idA || !idB) return false; // At least one unparseable → allow
+        return idA !== idB;             // Both parseable → only block if different
+    }
+
    function checkEpisodeTransition() {
        const currentTitle = getMediaTitle();
        const video = findVideo();
@@ -89,7 +146,7 @@
        // Only trigger if: we had a previous title, the title changed,
        // a video exists, and we're near the start of new content.
        if (lastKnownMediaTitle && currentTitle
-            && currentTitle !== lastKnownMediaTitle
+            && !sameEpisode(currentTitle, lastKnownMediaTitle)
            && video
            && video.currentTime < 5
            && video.readyState >= 1) {
@@ -122,11 +179,11 @@
        const video = findVideo();
        const currentTitle = getMediaTitle();

-        if (video && currentTitle && currentTitle === expectedTitle
+        if (video && currentTitle && sameEpisode(currentTitle, expectedTitle)
            && video.currentTime < 5 && video.readyState >= 1) {
            // Match! Pause at start and report ready.
            if (!video.paused) {
-                expectEvent('paused');
+                _setSuppress('paused');
                video.pause();
            }
            stopLobbyPoll();
@@ -193,11 +250,11 @@
                if (ytButton) {
                    const isCurrentlyPlaying = !video.paused;
                    if ((action === EVENTS.PLAY && !isCurrentlyPlaying) || (action === EVENTS.PAUSE && isCurrentlyPlaying)) {
-                        expectEvent(action === EVENTS.PLAY ? 'playing' : 'paused');
+                        _setSuppress(action === EVENTS.PLAY ? 'playing' : 'paused');
                        ytButton.click();
                    }
                    if (action === EVENTS.SEEK) {
-                        expectEvent('seek');
+                        _setSuppress('seek');
                        video.currentTime = data.targetTime;
                    }
                    return;
@@ -209,11 +266,11 @@
                if (twitchButton) {
                    const isCurrentlyPlaying = !video.paused;
                    if ((action === EVENTS.PLAY && !isCurrentlyPlaying) || (action === EVENTS.PAUSE && isCurrentlyPlaying)) {
-                        expectEvent(action === EVENTS.PLAY ? 'playing' : 'paused');
+                        _setSuppress(action === EVENTS.PLAY ? 'playing' : 'paused');
                        twitchButton.click();
                    }
                    if (action === EVENTS.SEEK) {
-                        expectEvent('seek');
+                        _setSuppress('seek');
                        video.currentTime = data.targetTime;
                    }
                    return;
@@ -222,16 +279,16 @@

            // Fallback for native HTML5
            if (action === EVENTS.PLAY) {
-                expectEvent('playing');
+                _setSuppress('playing');
                video.play().catch((e) => {
                    reportLog(`Playback prevented: ${e.message}`, 'warn');
-                    expectedEvents.delete('playing');
+                    _clearSuppress('playing');
                });
            } else if (action === EVENTS.PAUSE) {
-                expectEvent('paused');
+                _setSuppress('paused');
                video.pause();
            } else if (action === EVENTS.SEEK) {
-                expectEvent('seek');
+                _setSuppress('seek');
                video.currentTime = data.targetTime;
            }
    } catch (e) {
@@ -277,6 +334,24 @@
        if (message.type === 'SERVER_COMMAND') {
            const { action, payload } = message;
            let actionCompleted = false;
+
+            // Guard: Don't execute sync commands if peers are on different episodes.
+            // Only active when autoSyncNextEpisode setting is enabled (default: on).
+            // Only blocks when BOTH sides have parseable S01E01-style IDs that differ.
+            // Films and unparseable titles always pass through.
+            const syncActions = [EVENTS.PLAY, EVENTS.PAUSE, EVENTS.SEEK,
+                                 EVENTS.FORCE_SYNC_PREPARE, EVENTS.FORCE_SYNC_EXECUTE];
+            if (_autoSyncEnabled && syncActions.includes(action)) {
+                const senderTitle = payload?.mediaTitle;
+                const myTitle = getMediaTitle();
+                if (isDifferentEpisode(senderTitle, myTitle)) {
+                    reportLog(`Episode mismatch: sender="${senderTitle || '?'}" vs mine="${myTitle || '?'}" — skipping ${action}. Disable "Auto-Sync next Episode" in settings if this causes issues.`, 'warn');
+                    if (action !== EVENTS.FORCE_SYNC_PREPARE && action !== EVENTS.FORCE_SYNC_EXECUTE) {
+                        chrome.runtime.sendMessage({ type: 'CMD_ACK', actionTimestamp: message.actionTimestamp, commandSenderId: message.commandSenderId });
+                    }
+                    return;
+                }
+            }
            
            if (action === EVENTS.PLAY) {
                tryMediaAction(EVENTS.PLAY);
@@ -298,8 +373,8 @@
                        reportLog(`Media Action Error: Invalid force sync payload - ${JSON.stringify(payload)}`, 'error');
                        return;
                    }
-                    expectEvent('paused');
-                    expectEvent('seek');
+                    _setSuppress('paused');
+                    _setSuppress('seek');
                    video.pause();
                    video.currentTime = payload.targetTime;
                    pollSeekReady(payload.targetTime).then((ready) => {
@@ -345,7 +420,7 @@
        if (message.type === 'PAUSE_FOR_LOBBY') {
            const video = findVideo();
            if (video && !video.paused) {
-                expectEvent('paused');
+                _setSuppress('paused');
                video.pause();
            }
            // Start lobby poll now that we know the feature is enabled
@@ -399,6 +474,17 @@

    // Detect native events
    function reportEvent(action) {
+        if (seekDebounceTimer && (action === EVENTS.PLAY || action === EVENTS.PAUSE)) {
+            clearTimeout(seekDebounceTimer);
+            seekDebounceTimer = null;
+            const v = findVideo();
+            if (v && Number.isFinite(v.currentTime)) {
+                lastReportedSeekTime = v.currentTime;
+                reportLog(`[Seek] Debounce flushed immediately due to ${action.toUpperCase()}`, 'info');
+                reportEvent(EVENTS.SEEK);
+            }
+        }
+
        const video = findVideo();
        if (!video) return;

@@ -409,14 +495,14 @@

        const eventState = action === EVENTS.PLAY ? 'playing' : (action === EVENTS.PAUSE ? 'paused' : (action === EVENTS.SEEK ? 'seek' : null));
        
-        if (eventState && expectedEvents.has(eventState)) {
-            expectedEvents.delete(eventState);
-            if (expectedTimeouts[eventState]) {
-                clearTimeout(expectedTimeouts[eventState]);
-                delete expectedTimeouts[eventState];
-            }
+        if (_suppressTimers[eventState]) {
+            _clearSuppress(eventState);
            return;
        }
+
+        // Suppress only SEEK during visibility grace period (tab re-focus ghost jump).
+        // Play/Pause pass through — user may want to immediately pause after tabbing back.
+        if (Date.now() < visibilityGraceUntil && action === EVENTS.SEEK) return;
        
        chrome.runtime.sendMessage({
            type: 'CONTENT_EVENT',
@@ -433,6 +519,38 @@
        scheduleProactiveHeartbeat();
    }

+    // --- Tab Visibility Handling ---
+    // Browsers (especially Firefox) aggressively throttle background tabs.
+    // When the user returns to a video tab, the video element may have lost
+    // time-sync and fires spurious seek events as it recovers (jumping back).
+    // We suppress only SEEK for a short grace period after tab re-focus.
+    // Play/Pause are NOT suppressed — the user may legitimately want to
+    // pause immediately after switching back.
+    let pageVisible = !document.hidden;
+    let visibilityGraceUntil = 0;
+    const VISIBILITY_GRACE_MS = 300;
+
+    document.addEventListener('visibilitychange', () => {
+        if (document.hidden) {
+            pageVisible = false;
+        } else if (!pageVisible) {
+            pageVisible = true;
+            visibilityGraceUntil = Date.now() + VISIBILITY_GRACE_MS;
+            reportLog(`Tab re-focused — suppressing seeks for ${VISIBILITY_GRACE_MS / 1000}s to prevent ghost relay`, 'warn');
+        }
+    });
+
+    // Reset on page hide/show (bfcache, tab discard)
+    window.addEventListener('pagehide', () => { pageVisible = false; });
+    window.addEventListener('pageshow', (event) => {
+        // event.persisted is true ONLY when restored from bfcache, not on initial load
+        if (event.persisted && !pageVisible) {
+            pageVisible = true;
+            visibilityGraceUntil = Date.now() + VISIBILITY_GRACE_MS;
+            reportLog(`Page restored from cache — suppressing seeks for ${VISIBILITY_GRACE_MS / 1000}s`, 'warn');
+        }
+    });
+
    const handlePlay = () => reportEvent(EVENTS.PLAY);
    const handlePause = () => reportEvent(EVENTS.PAUSE);

@@ -444,29 +562,27 @@
        const current = video.currentTime;
        if (!Number.isFinite(current)) return;

-        // Step 1: Check expectedEvents (programmatic seek suppression)
-        if (expectedEvents.has('seek')) {
-            expectedEvents.delete('seek');
-            if (expectedTimeouts['seek']) {
-                clearTimeout(expectedTimeouts['seek']);
-                delete expectedTimeouts['seek'];
-            }
+        // Step 1: Check _suppressTimers (programmatic seek from remote peer)
+        if (_suppressTimers['seek']) {
+            _clearSuppress('seek');
            lastReportedSeekTime = current;
-            // No log — this is routine programmatic behavior (Force Sync, lobby, peer command)
            return;
        }

+        // Step 2: Suppress during visibility grace period (tab re-focus ghost events)
+        if (Date.now() < visibilityGraceUntil) return;
+
        const delta = lastReportedSeekTime !== null ? Math.abs(current - lastReportedSeekTime) : null;
        const deltaStr = delta !== null ? `Δ${delta.toFixed(2)}s` : 'Δ?';

-        // Step 2: Delta check — skip micro-seeks (buffering, chapter markers, etc.)
+        // Step 3: Delta check — skip micro-seeks (buffering, chapter markers, etc.)
        if (lastReportedSeekTime !== null && delta < MIN_SEEK_DELTA) {
            reportLog(`[Seek] Filtered (${deltaStr} < ${MIN_SEEK_DELTA}s threshold) @ ${current.toFixed(2)}s — not relayed`, 'warn');
            return;
        }

-        // Step 3: Debounce rapid consecutive seeks (e.g. scrubbing)
-        // — wait 800ms for the user to settle before relaying
+        // Step 4: Debounce rapid consecutive seeks (e.g. scrubbing)
+        // — wait 300ms for the user to settle before relaying
        if (seekDebounceTimer) clearTimeout(seekDebounceTimer);
        seekDebounceTimer = setTimeout(() => {
            seekDebounceTimer = null;
@@ -478,7 +594,7 @@
            lastReportedSeekTime = settled;
            reportLog(`[Seek] Relayed @ ${settled.toFixed(2)}s (${finalDeltaStr})`, 'info');
            reportEvent(EVENTS.SEEK);
-        }, 800);
+        }, 300);
    };


@@ -605,6 +721,24 @@

    // Initial Setup
    setupListeners();
+
+    // Maintain a persistent keep-alive port connection to prevent background SW suspension
+    let keepAlivePort = null;
+    function connectKeepAlivePort() {
+        try {
+            if (chrome.runtime.id) {
+                keepAlivePort = chrome.runtime.connect({ name: 'keepAlive' });
+                keepAlivePort.onDisconnect.addListener(() => {
+                    keepAlivePort = null;
+                    setTimeout(connectKeepAlivePort, 1000);
+                });
+            }
+        } catch (_e) {
+            // Extension context invalidated or disabled
+        }
+    }
+    connectKeepAlivePort();
+
    schedulePeriodicHeartbeat();

    // Immediate heartbeat on injection — populate peer data without waiting 15s
@@ -1,8 +1,8 @@
 {
  "manifest_version": 3,
  "name": "KoalaSync",
-  "version": "1.7.0",
-  "description": "Watch party extension to synchronize video playback on YouTube, Twitch, Netflix, and HTML5 sites in real-time with friends.",
+  "version": "1.9.2",
+  "description": "Synchronize video playback on YouTube, Netflix, Emby, Jellyfin, and any HTML5 site in real-time with friends.",
  "permissions": [
    "storage",
    "tabs",
@@ -27,15 +27,20 @@
            font-size: 14px;
        }

+        .header-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 16px;
+        }
+
        h1 {
            font-size: 18px;
-            margin: 0 0 16px 0;
+            margin: 0;
            color: var(--accent);
            letter-spacing: 1px;
            text-transform: uppercase;
-            display: flex;
+            display: inline-flex;
            align-items: center;
-            justify-content: center;
            gap: 8px;
        }

@@ -46,6 +51,27 @@
            border-radius: 4px;
        }

+        .popup-version {
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-size: 10px;
+            color: var(--text-muted);
+            text-decoration: none;
+            opacity: 0.5;
+            transition: opacity 0.2s, color 0.2s;
+        }
+        .popup-version:hover {
+            opacity: 1;
+            color: var(--accent);
+        }
+        .popup-version svg {
+            width: 12px;
+            height: 12px;
+            display: block;
+        }
+
        /* Tabs */
        .tabs {
            display: flex;
@@ -237,17 +263,72 @@
            from { opacity: 1; }
            to { opacity: 0; transform: translateY(-10px); }
        }
+
+        @keyframes fadeSlideIn {
+            from { opacity: 0; transform: translateX(5px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        .tab-active-animate {
+            animation: fadeSlideIn 0.15s ease-out forwards;
+        }
+
+        /* Toggle Switch CSS */
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 36px;
+            height: 20px;
+        }
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-color: #334155;
+            transition: .3s;
+            border-radius: 20px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 14px;
+            width: 14px;
+            left: 3px;
+            bottom: 3px;
+            background-color: #94a3b8;
+            transition: .3s;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background-color: var(--accent);
+        }
+        input:checked + .slider:before {
+            transform: translateX(16px);
+            background-color: white;
+        }
    </style>
 </head>
 <body>
    <div id="toast-container"></div>
-    <h1><img src="icons/icon128.png" alt="KoalaSync Logo">KoalaSync</h1>
+    <div class="header-row">
+                    <h1><img src="icons/icon128.png" alt="KoalaSync Logo">KoalaSync</h1>
+                    <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="popup-version">
+                        <svg viewBox="0 0 16 16" fill="currentColor">
+                            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+                        </svg>
+                        <span id="popupVersion">v0.0.0</span>
+                    </a>
+                </div>

    <div class="tabs">
-        <button class="tab-btn active" data-tab="tab-room">Room</button>
-        <button class="tab-btn" data-tab="tab-sync">Sync</button>
-        <button class="tab-btn" data-tab="tab-settings">Settings</button>
-        <button class="tab-btn" data-tab="tab-dev">Dev</button>
+        <button class="tab-btn active" data-tab="tab-room" title="Room settings and connection">Room</button>
+        <button class="tab-btn" data-tab="tab-sync" title="Video sync controls and remote actions">Sync</button>
+        <button class="tab-btn" data-tab="tab-settings" title="Extension preferences">Settings</button>
+        <button class="tab-btn" data-tab="tab-dev" title="Advanced Diagnostics & Logs">Status</button>
    </div>

    <!-- Room Tab -->
@@ -255,47 +336,52 @@

        <!-- JOIN SECTION: Visible when not in a room -->
        <div id="section-join">
+            <button id="createRoomBtn" class="primary" style="margin-bottom: 16px; padding: 14px; font-size: 15px; background: linear-gradient(135deg, #6366f1, #a855f7); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);">+ Create New Room</button>
+            <details style="margin-bottom: 12px; background: var(--card); border: 1px solid #334155; border-radius: 8px; padding: 8px;">
+                <summary style="font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; cursor: pointer; outline: none;">Manual Connect / Advanced</summary>
+                <div style="margin-top: 12px;">
            <div class="form-group">
-                <label>Server</label>
+                <label title="Select which KoalaSync server to use">Server</label>
                <div style="display:flex; gap:4px; margin-bottom:8px;">
-                    <button id="serverOfficial" class="tab-btn active" style="flex:1; padding:6px; font-size:11px;">Official</button>
-                    <button id="serverCustom" class="tab-btn" style="flex:1; padding:6px; font-size:11px;">Custom</button>
+                    <button id="serverOfficial" class="tab-btn active" style="flex:1; padding:6px; font-size:11px;" title="Use the official reliable server">Official</button>
+                    <button id="serverCustom" class="tab-btn" style="flex:1; padding:6px; font-size:11px;" title="Connect to your own self-hosted server">Custom</button>
                </div>
                <input type="text" id="serverUrl" placeholder="wss://your-server:3000" style="display:none;">
            </div>
            <div class="form-group">
-                <label>Room ID</label>
-                <input type="text" id="roomId" placeholder="Leave empty to create">
+                <label title="The unique identifier for your sync room">Room ID</label>
+                <input type="text" id="roomId" placeholder="Enter Room ID" title="The unique ID of the room you want to join">
            </div>
            <div class="form-group">
-                <label>Password (Optional)</label>
-                <input type="password" id="password" placeholder="Room password">
+                <label title="Optional password to restrict room access">Password (Optional)</label>
+                <input type="password" id="password" placeholder="Room Password (optional)" title="Password for the room (leave empty if none)">
            </div>
            <div id="roomError" style="display:none; color:var(--error); font-size:11px; margin-bottom:8px; text-align:center;"></div>
-            <button id="joinBtn" class="primary">Join Room</button>
-            <button id="createRoomBtn" class="secondary" style="border: 1px solid var(--accent); color: var(--accent);">Create Random Room</button>
+            <button id="joinBtn" class="primary" title="Connect to the room">Join Room</button>
            
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; margin-bottom: 8px;">
-                <label style="margin:0;">Public Rooms</label>
-                <button id="refreshRooms" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:pointer;">REFRESH</button>
+                <label style="margin:0;" title="List of publicly available rooms on this server">Public Rooms</label>
+                <button id="refreshRooms" class="secondary" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:pointer;" title="Refresh the list of public rooms">REFRESH</button>
            </div>
            <div id="publicRooms" class="info-card" style="max-height: 120px; overflow-y: auto; padding: 4px;">
                <div style="text-align:center; color: var(--text-muted); font-size: 11px; padding: 10px;">Refreshing...</div>
            </div>
+                </div>
+            </details>
        </div>

        <!-- ACTIVE SECTION: Visible when in a room -->
        <div id="section-active" style="display:none;">
            <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;">Active Room</label>
+                    <label style="margin-bottom: 0;" title="The room you are currently connected to">Active Room</label>
                    <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;">Official Server</div>
            </div>

            <div class="info-card" style="margin-bottom: 20px;">
-                <label>Invite Link</label>
+                <label title="Share this link with friends so they can join">Invite Link</label>
                <div class="invite-box">
                    <input type="text" id="inviteLink" readonly>
                    <button id="copyInvite" class="secondary">📋</button>
@@ -303,7 +389,7 @@
            </div>

            <div style="margin-bottom: 20px;">
-                <label>Peers in Room</label>
+                <label title="Other users currently connected to this room">Peers in Room</label>
                <div id="peerList" class="info-card">
                    <div style="text-align:center; color: var(--text-muted); font-size: 12px;">No peers connected</div>
                </div>
@@ -315,29 +401,34 @@

    <!-- Sync Tab -->
    <div id="tab-sync" class="tab-content">
+        <!-- SYNC ACTIVE: Visible when in a room -->
+        <div id="sync-active">
        <div class="form-group">
-            <label>Target Tab (Video Source)</label>
+            <label title="Choose the browser tab containing the video to sync">Select Video</label>
            <select id="targetTab">
                <option value="">-- Select a Tab --</option>
            </select>
        </div>
        
-        <label>Remote Control</label>
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+            <label style="margin: 0;">Remote Control</label>
+            <button id="syncTabCopyInvite" title="Copy Invite Link" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor:pointer; opacity:0.8; transition: opacity 0.2s; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;">📋 Invite Link</button>
+        </div>
        <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-            <button id="playBtn" class="primary" style="flex:1; background: var(--success);">▶ Play</button>
-            <button id="pauseBtn" class="primary" style="flex:1; background: var(--error);">⏸ Pause</button>
+            <button id="playBtn" class="primary" style="flex:1; background: var(--success);" title="Send a Play command to everyone">▶ Play</button>
+            <button id="pauseBtn" class="primary" style="flex:1; background: var(--error);" title="Send a Pause command to everyone">⏸ Pause</button>
        </div>

        <div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
-            <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1;">⚡ Force Sync</button>
-            <select id="forceSyncMode" style="width: auto; min-width: 130px; background: var(--card); border: 1px solid #334155; color: white; padding: 10px 8px; border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer; align-self: stretch;" title="Choose sync target">
+            <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1;" title="Force all users to sync up">⚡ SYNC</button>
+            <select id="forceSyncMode" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 10px 8px; border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer; align-self: stretch;" title="Choose sync target">
                <option value="jump-to-others">Jump to Others</option>
                <option value="jump-to-me">Jump to Me</option>
            </select>
        </div>

        <!-- NEW: Last Action Status Card -->
-        <label>Last Activity Status</label>
+        <label title="Shows the most recent play, pause, or seek command">Last Activity Status</label>
        <div id="lastActionCard" class="info-card" style="margin-bottom: 15px; max-height: 120px; overflow-y: auto;">
            <div style="text-align:center; color: var(--text-muted); font-size: 10px;">No recent commands</div>
        </div>
@@ -349,72 +440,95 @@
                <span style="font-weight: 700; color: var(--star); font-size: 12px;">EPISODE LOBBY</span>
            </div>
            <div id="lobbyTitle" style="font-size: 11px; color: var(--text); margin-bottom: 6px; font-weight: 600;"></div>
-            <div id="lobbyPeerStatus" style="font-size: 10px; color: var(--text-muted);"></div>
+            <div id="lobbyPeerStatus" style="font-size: 10px; color: var(--text-muted); margin-bottom: 8px;"></div>
+            <button id="cancelLobbyBtn" class="secondary" style="margin-top: 4px; padding: 6px 10px; font-size: 11px; width: auto; display: block;" title="Cancel lobby and play anyway">Skip & Play anyway</button>
        </div>

        <div id="peerListSync" class="info-card" style="display:none;"></div>
+        </div>
+        
+        <!-- SYNC INACTIVE: Visible when not in a room -->
+        <div id="sync-inactive" style="display:none; text-align: center; padding: 20px 10px;">
+            <div style="font-size: 32px; margin-bottom: 12px;">🔒</div>
+            <h3 style="margin: 0 0 8px 0; color: var(--accent); font-size: 15px;">Connect to a room first</h3>
+            <p style="color: var(--text-muted); font-size: 12px; margin-bottom: 20px;">You need to join a room via an invite link or create a new one to sync videos.</p>
+            <button id="syncTabCreateRoomBtn" class="primary" style="padding: 12px; font-size: 14px; background: linear-gradient(135deg, #6366f1, #a855f7); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);" title="Create a new random room and join it">Create New Room</button>
+        </div>
    </div>
    
    <!-- Settings Tab -->
    <div id="tab-settings" class="tab-content">
-        <div class="form-group">
-            <label>Your Username</label>
-            <input type="text" id="username" placeholder="Anonymous Koala" maxlength="20">
+        <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
+            <label style="margin-bottom: 0;" title="Username helps others identify you.">Your Username</label>
+            <input type="text" id="username" placeholder="Anonymous Koala" maxlength="20" style="width: 150px;">
        </div>

        <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-            <label style="margin-bottom: 0;">Filter Noise Tabs</label>
-            <input type="checkbox" id="filterNoise" style="width: auto;" checked>
+            <label style="margin-bottom: 0; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">Hide Clutter Tabs</label>
+            <label class="toggle-switch">
+                <input type="checkbox" id="filterNoise" checked>
+                <span class="slider"></span>
+            </label>
        </div>

        <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-            <label style="margin-bottom: 0;">Auto-Sync Next Episode</label>
-            <input type="checkbox" id="autoSyncNextEpisode" style="width: auto;">
+            <label style="margin-bottom: 0; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">Auto-Sync Next Episode</label>
+            <label class="toggle-switch">
+                <input type="checkbox" id="autoSyncNextEpisode">
+                <span class="slider"></span>
+            </label>
        </div>

        <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-            <label style="margin-bottom: 0;">Browser Notifications</label>
-            <input type="checkbox" id="browserNotifications" style="width: auto;">
+            <label style="margin-bottom: 0; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">Auto-Copy Invite Link</label>
+            <label class="toggle-switch">
+                <input type="checkbox" id="autoCopyInvite" checked>
+                <span class="slider"></span>
+            </label>
+        </div>
+
+        <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
+            <label style="margin-bottom: 0; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">Browser Notifications</label>
+            <label class="toggle-switch">
+                <input type="checkbox" id="browserNotifications">
+                <span class="slider"></span>
+            </label>
        </div>
        
-        <div style="font-size: 11px; color: var(--text-muted); padding: 8px;">
-            <p>• Username helps others identify you.</p>
-            <p>• Noise filtering uses a blacklist to hide common non-video sites (e.g. Search, Social Media) from the Target Tab selector.</p>
-            <p>• Auto-Sync will pause and wait for all peers when an episode changes, then sync-start together.</p>
-        </div>
+

        <div style="margin-top: 15px; padding: 8px; border-top: 1px solid var(--card);">
-            <label>Troubleshooting</label>
-            <button id="regenId" class="secondary" style="width: 100%; font-size: 11px;">Regenerate Peer ID</button>
+            <label title="Tools for fixing connection issues">Troubleshooting</label>
+            <button id="regenId" class="secondary" style="width: 100%; font-size: 11px;" title="Regenerate your internal ID and reconnect">Regenerate Peer ID</button>
            <p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center;">Use this if you see "Duplicate Identity" errors.</p>
        </div>
    </div>

    <!-- Dev Tab -->
    <div id="tab-dev" class="tab-content">
-        <label>Connection Status</label>
+        <label title="Current WebSocket connection state">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;">Disconnected</span>
-            <button id="retryBtn" class="secondary" style="display:none; width: auto; padding: 4px 8px; font-size: 10px; margin: 0;">RETRY</button>
-            <button id="copyLogs" class="btn secondary" style="width: auto; padding: 4px 10px; font-size: 11px;">Copy Logs</button>
+            <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">RETRY</button>
+            <button id="copyLogs" class="btn secondary" style="width: auto; padding: 4px 10px; font-size: 11px;" title="Copy logs to clipboard for sharing">Copy Logs</button>
        </div>

-        <label>Video Debug Info</label>
+        <label title="Technical details about the currently selected video element">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;">
            No tab selected or video detected.
        </div>

        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px;">
-            <label>Full Action History</label>
+            <label title="Chronological log of all sync commands in the room">Full Action History</label>
        </div>
        <div id="historyList" class="info-card" style="max-height: 120px; overflow-y: auto; font-size: 10px; margin-bottom: 15px;">
            <div style="text-align:center; color: var(--text-muted); font-size: 11px;">No activity yet</div>
        </div>

        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px;">
-            <label>Logs (Last 50)</label>
-            <button id="clearLogs" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:pointer;">CLEAR</button>
+            <label title="Technical connection logs for debugging">Logs (Last 50)</label>
+            <button id="clearLogs" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:pointer;" title="Clear log output">CLEAR</button>
        </div>
        <div id="logList"></div>
        
@@ -427,14 +541,14 @@
    <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.7); z-index:1000; align-items:center; justify-content:center;">
-        <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-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;">\u{1F44B}</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;">Skip</button>
-                <button id="onboarding-next" class="primary" style="width:auto; padding:8px 16px;">Next</button>
+                <button id="onboarding-skip" class="secondary" style="width:auto; padding:8px 16px;" title="Skip the tutorial">Skip</button>
+                <button id="onboarding-next" class="primary" style="width:auto; padding:8px 16px;" title="Go to next step">Next</button>
            </div>
            <div id="onboarding-dots" style="margin-top:12px; display:flex; gap:6px; justify-content:center;"></div>
        </div>
@@ -1,5 +1,6 @@
 import { EVENTS, OFFICIAL_LANDING_PAGE_URL } from './shared/constants.js';
 import { BLACKLIST_DOMAINS } from './shared/blacklist.js';
+import { getAvatarForName, generateUsername } from './shared/names.js';


 const elements = {
@@ -46,7 +47,10 @@ const elements = {
    episodeLobbyCard: document.getElementById('episodeLobbyCard'),
    lobbyTitle: document.getElementById('lobbyTitle'),
    lobbyPeerStatus: document.getElementById('lobbyPeerStatus'),
-    browserNotifications: document.getElementById('browserNotifications')
+    browserNotifications: document.getElementById('browserNotifications'),
+    autoCopyInvite: document.getElementById('autoCopyInvite'),
+    syncTabCopyInvite: document.getElementById('syncTabCopyInvite'),
+    cancelLobbyBtn: document.getElementById('cancelLobbyBtn')
 };

 let localPeerId = null;
@@ -60,15 +64,15 @@ let populateTabsToken = null;
 let errorToken = 0;
 let forceSyncDone = false;

+// --- Helpers ---
+
 // --- Initialization ---
 async function init() {
    // Load Settings
-    const data = await chrome.storage.sync.get(['serverUrl', 'useCustomServer', 'roomId', 'password', 'filterNoise', 'username', 'autoSyncNextEpisode', 'forceSyncMode', 'browserNotifications']);
+    const data = await chrome.storage.sync.get(['serverUrl', 'useCustomServer', 'roomId', 'password', 'filterNoise', 'username', 'autoSyncNextEpisode', 'forceSyncMode', 'browserNotifications', 'autoCopyInvite']);
    let username = data.username;
    if (!username) {
-        const adjs = ['Happy', 'Cool', 'Fast', 'Smart', 'Brave', 'Calm', 'Sneaky', 'Lazy', 'Wild', 'Chill', 'Lucky', 'Epic', 'Swift', 'Bold', 'Mighty', 'Cosmic', 'Neon', 'Shadow', 'Crystal', 'Thunder', 'Silent', 'Golden', 'Fierce', 'Noble', 'Mystic', 'Frozen', 'Blazing', 'Sapphire', 'Iron', 'Crimson'];
-        const nouns = ['Koala', 'Panda', 'Tiger', 'Eagle', 'Fox', 'Bear', 'Wolf', 'Lion', 'Hawk', 'Seal', 'Owl', 'Shark', 'Dragon', 'Phoenix', 'Falcon', 'Panther', 'Raven', 'Cobra', 'Lynx', 'Jaguar', 'Orca', 'Mantis', 'Viper', 'Condor', 'Badger', 'Otter', 'Rhino', 'Crane', 'Mongoose', 'Specter'];
-        username = `${adjs[Math.floor(Math.random() * adjs.length)]}${nouns[Math.floor(Math.random() * nouns.length)]}`;
+        username = generateUsername();
        chrome.storage.sync.set({ username });
    }
    
@@ -76,16 +80,18 @@ async function init() {
    elements.roomId.value = data.roomId || '';
    elements.password.value = data.password || '';
    elements.username.value = username;
-    elements.filterNoise.checked = data.filterNoise !== false;
-    elements.autoSyncNextEpisode.checked = data.autoSyncNextEpisode !== false;
-    elements.forceSyncMode.value = data.forceSyncMode || 'jump-to-others';
-    elements.browserNotifications.checked = data.browserNotifications === true;
+    if (elements.filterNoise) elements.filterNoise.checked = data.filterNoise !== false;
+    if (elements.autoSyncNextEpisode) elements.autoSyncNextEpisode.checked = data.autoSyncNextEpisode !== false;
+    if (elements.forceSyncMode) elements.forceSyncMode.value = data.forceSyncMode || 'jump-to-others';
+    if (elements.browserNotifications) elements.browserNotifications.checked = data.browserNotifications === true;
+    if (elements.autoCopyInvite) elements.autoCopyInvite.checked = data.autoCopyInvite !== false;
    
    // Set Version Info
+    const versionTxt = `v${chrome.runtime.getManifest().version}`;
    const versionEl = document.getElementById('appVersion');
-    if (versionEl) {
-        versionEl.textContent = `v${chrome.runtime.getManifest().version}`;
-    }
+    if (versionEl) versionEl.textContent = versionTxt;
+    const popupVerEl = document.getElementById('popupVersion');
+    if (popupVerEl) popupVerEl.textContent = versionTxt;

    if (data.useCustomServer) {
        setServerMode(true);
@@ -142,16 +148,31 @@ function toggleUIState(inRoom) {
    if (elements.sectionJoin) elements.sectionJoin.style.display = inRoom ? 'none' : 'block';
    if (elements.sectionActive) elements.sectionActive.style.display = inRoom ? 'block' : 'none';
    if (elements.peerListSync) elements.peerListSync.style.display = inRoom ? 'block' : 'none';
+    
+    const syncActive = document.getElementById('sync-active');
+    const syncInactive = document.getElementById('sync-inactive');
+    if (syncActive) syncActive.style.display = inRoom ? 'block' : 'none';
+    if (syncInactive) syncInactive.style.display = inRoom ? 'none' : 'block';
 }

 function updateUI(roomId, password, useCustomServer = false, serverUrl = '') {
    const inRoom = !!roomId;
    toggleUIState(inRoom);
    if (inRoom) {
-        const serverFlag = useCustomServer ? '1' : '0';
-        const encodedUrl = encodeURIComponent(serverUrl || '');
-        const invite = `${OFFICIAL_LANDING_PAGE_URL}/join.html#join:${roomId}:${password}:${serverFlag}:${encodedUrl}`;
+        let invite = `${OFFICIAL_LANDING_PAGE_URL}/join.html#join:${roomId}:${password}`;
+        if (useCustomServer) {
+            const encodedUrl = encodeURIComponent(serverUrl || '');
+            invite += `:1:${encodedUrl}`;
+        }
        elements.inviteLink.value = invite;
+        
+        if (window.justCreatedRoom) {
+            window.justCreatedRoom = false;
+            if (elements.autoCopyInvite && elements.autoCopyInvite.checked && elements.copyInvite) {
+                elements.copyInvite.click();
+            }
+        }
+
        if (elements.activeRoomId) elements.activeRoomId.textContent = roomId;
        if (elements.activeServer) {
            elements.activeServer.textContent = useCustomServer ? (serverUrl || 'Custom Server') : 'Official Server';
@@ -171,7 +192,11 @@ function updateUI(roomId, password, useCustomServer = false, serverUrl = '') {

 function updateLastActionUI(state, peers) {
    if (!state || !state.action) {
-        elements.lastActionCard.innerHTML = '<div style="text-align:center; color: var(--text-muted); font-size: 10px;">No recent commands</div>';
+        elements.lastActionCard.replaceChildren();
+        const el = document.createElement('div');
+        el.style.cssText = 'text-align:center; color: var(--text-muted); font-size: 10px;';
+        el.textContent = 'No recent commands';
+        elements.lastActionCard.appendChild(el);
        return;
    }

@@ -234,6 +259,7 @@ function updateLastActionUI(state, peers) {
        const isAcked = safeAcks.includes(pId) || pId === state.senderId;
        const color = isAcked ? 'var(--success)' : '#475569';
        const icon = isAcked ? '✓' : '...';
+        const avatar = getAvatarForName(pName);
        
        const peerItem = document.createElement('div');
        peerItem.title = pName;
@@ -245,7 +271,7 @@ function updateLastActionUI(state, peers) {
        
        const nameSpan = document.createElement('span');
        nameSpan.style.cssText = 'font-size:7px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:36px;';
-        nameSpan.textContent = pName;
+        nameSpan.textContent = `${avatar} ${pName}`;
        
        peerItem.appendChild(dot);
        peerItem.appendChild(nameSpan);
@@ -290,7 +316,9 @@ function startInterpolation() {
            const peer = activePeers.find(p => p.peerId === peerId);
            if (peer && peer.playbackState === 'playing' && peer.currentTime != null && peer.lastHeartbeat) {
                const elapsed = (Date.now() - peer.lastHeartbeat) / 1000;
-                el.textContent = formatTime(peer.currentTime + elapsed);
+                if (elapsed < 45) {
+                    el.textContent = formatTime(peer.currentTime + elapsed);
+                }
            }
        });
    }, 1000);
@@ -304,13 +332,21 @@ function renderEmpty(container, type) {
        rooms: { icon: '\u{1F50D}', title: 'No active rooms', hint: 'Create a room or refresh to find public ones' }
    };
    const state = states[type] || { icon: '', title: '', hint: '' };
-    container.innerHTML = `
-        <div style="text-align:center; padding:16px 8px; color:var(--text-muted);">
-            <div style="font-size:24px; margin-bottom:6px;">${state.icon}</div>
-            <div style="font-size:12px; font-weight:600; margin-bottom:4px;">${state.title}</div>
-            <div style="font-size:10px; opacity:0.7;">${state.hint}</div>
-        </div>
-    `;
+    const wrapper = document.createElement('div');
+    wrapper.style.cssText = 'text-align:center; padding:16px 8px; color:var(--text-muted);';
+    const iconDiv = document.createElement('div');
+    iconDiv.style.cssText = 'font-size:24px; margin-bottom:6px;';
+    iconDiv.textContent = state.icon;
+    const titleDiv = document.createElement('div');
+    titleDiv.style.cssText = 'font-size:12px; font-weight:600; margin-bottom:4px;';
+    titleDiv.textContent = state.title;
+    const hintDiv = document.createElement('div');
+    hintDiv.style.cssText = 'font-size:10px; opacity:0.7;';
+    hintDiv.textContent = state.hint;
+    wrapper.appendChild(iconDiv);
+    wrapper.appendChild(titleDiv);
+    wrapper.appendChild(hintDiv);
+    container.replaceChildren(wrapper);
 }

 function updatePeerList(peers) {
@@ -356,18 +392,21 @@ function updatePeerList(peers) {
            header.style.cssText = 'display:flex; justify-content:space-between; align-items:center; padding-right: 24px;';

            const nameSpan = document.createElement('span');
+            nameSpan.style.cssText = 'display: inline-flex; align-items: center; max-width: 200px; overflow: hidden; white-space: nowrap;';
+            const avatar = getAvatarForName(pUsername || pId);
            if (pUsername) {
                const u = document.createElement('span');
-                u.style.cssText = 'font-weight:600; color:white;';
-                u.textContent = pUsername;
+                u.style.cssText = 'font-weight:600; color:white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; display: inline-block;';
+                u.textContent = `${avatar} ${pUsername}`;
                const i = document.createElement('span');
-                i.style.cssText = 'font-size:10px; opacity:0.6; font-style:italic;';
+                i.style.cssText = 'font-size:10px; opacity:0.6; font-style:italic; white-space: nowrap; flex-shrink: 0;';
                i.textContent = ` (${pId})`;
                nameSpan.appendChild(u);
                nameSpan.appendChild(i);
            } else {
                nameSpan.style.fontWeight = '600';
-                nameSpan.textContent = `👤 ${pId}`;
+                nameSpan.style.cssText = 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px;';
+                nameSpan.textContent = `${avatar} ${pId}`;
            }

            header.appendChild(nameSpan);
@@ -424,7 +463,9 @@ function updatePeerList(peers) {
                let displayTime = p.currentTime;
                if (p.playbackState === 'playing' && p.lastHeartbeat && p.currentTime != null) {
                    const elapsed = (Date.now() - p.lastHeartbeat) / 1000;
-                    displayTime += elapsed;
+                    if (elapsed < 45) {
+                        displayTime += elapsed;
+                    }
                }
                timeSpan.textContent = formatTime(displayTime);
                statusLine.appendChild(timeSpan);
@@ -519,36 +560,60 @@ async function populateTabs(providedPeers = null, providedTargetTabId = null) {
        if (!tab.url || tab.url.startsWith('chrome://')) return false;
        if (isFilterActive && tab.id !== parseInt(currentTargetTabId)) {
            const urlStr = tab.url.toLowerCase();
-            if (BLACKLIST_DOMAINS.some(d => urlStr.includes(d.toLowerCase()))) return false;
+            if (BLACKLIST_DOMAINS.some(d => {
+                const domain = d.toLowerCase();
+                try {
+                    const hostname = new URL(tab.url).hostname.toLowerCase();
+                    if (domain.endsWith('.')) return hostname.startsWith(domain) || hostname.includes('.' + domain);
+                    if (domain.includes('.')) return hostname === domain || hostname.endsWith('.' + domain);
+                } catch {
+                    /* ignore invalid URLs */
+                }
+                return urlStr.includes(domain);
+            })) return false;
        }
        return true;
    });

    // Smart Matching Logic — exclude own tabTitle to prevent self-match (computed once)
+    const cleanTitle = (rawTitle) => {
+        if (!rawTitle) return '';
+        return rawTitle
+            .replace(/(?:\s*[-\|•]\s*(?:YouTube|Twitch|Jellyfin|Emby|Netflix|Vimeo|Dailymotion).*)$/i, '')
+            .replace(/^(?:Netflix|Twitch|YouTube|Emby|Jellyfin)\s*[-\|•]\s*/i, '')
+            .trim();
+    };
+
    const peerTitles = peerIds
        .filter(p => (typeof p === 'object' ? p.peerId : p) !== localPeerId)
        .map(p => (typeof p === 'object' ? p.tabTitle : null))
-        .filter(t => t && t.length > 3);
+        .filter(t => t && t.length > 3)
+        .map(t => cleanTitle(t).toLowerCase())
+        .filter(t => t.length > 3);

    filteredTabs.forEach(tab => {
        const option = document.createElement('option');
        option.value = tab.id;
-        const title = (tab.title || 'Loading...');
+        const rawTitle = (tab.title || 'Loading...');
+        const title = cleanTitle(rawTitle).toLowerCase();
        
-        const isMatch = peerTitles.some(pt => {
-            const t1 = title.toLowerCase();
-            const t2 = pt.toLowerCase();
-            return t1.includes(t2) || t2.includes(t1);
+        const isMatch = title.length > 3 && peerTitles.some(pt => {
+            return title.includes(pt) || pt.includes(title);
        });

-        let label = title.substring(0, 45) + (title.length > 45 ? '...' : '');
+        let label = rawTitle.substring(0, 45) + (rawTitle.length > 45 ? '...' : '');
        if (isMatch) {
            label = `⭐ MATCH: ${label}`;
            option.style.fontWeight = 'bold';
            option.style.color = 'var(--star)';
        }
        
+        if (tab.audible) {
+            label = `[🎬] ${label}`;
+        }
+        
        option.textContent = label;
+        option.dataset.originalTitle = tab.title;
        elements.targetTab.appendChild(option);
    });

@@ -577,6 +642,13 @@ async function populateTabs(providedPeers = null, providedTargetTabId = null) {

    if (currentTargetTabId) {
        elements.targetTab.value = currentTargetTabId;
+    } else {
+        const matchOpt = options.find(o => o.textContent.includes('⭐ MATCH:'));
+        if (matchOpt && elements.targetTab.options.length > 1) {
+            elements.targetTab.value = matchOpt.value;
+            const tabTitle = matchOpt.dataset.originalTitle || null;
+            chrome.runtime.sendMessage({ type: 'SET_TARGET_TAB', tabId: parseInt(matchOpt.value), tabTitle });
+        }
    }
 }

@@ -623,7 +695,7 @@ function applyConnectionStatus(status) {

    if (elements.playBtn) elements.playBtn.textContent = '▶ Play';
    if (elements.pauseBtn) elements.pauseBtn.textContent = '⏸ Pause';
-    if (elements.forceSyncBtn) elements.forceSyncBtn.textContent = '⚡ Force Sync';
+    if (elements.forceSyncBtn) elements.forceSyncBtn.textContent = '⚡ SYNC';
 }

 function updateHistory(history) {
@@ -795,6 +867,12 @@ elements.browserNotifications.addEventListener('change', () => {
    chrome.storage.sync.set({ browserNotifications: elements.browserNotifications.checked });
 });

+if (elements.autoCopyInvite) {
+    elements.autoCopyInvite.addEventListener('change', () => {
+        chrome.storage.sync.set({ autoCopyInvite: elements.autoCopyInvite.checked });
+    });
+}
+
 elements.forceSyncMode.addEventListener('change', () => {
    chrome.storage.sync.set({ forceSyncMode: elements.forceSyncMode.value });
 });
@@ -821,7 +899,14 @@ elements.tabs.forEach(btn => {
        elements.tabs.forEach(b => b.classList.remove('active'));
        elements.contents.forEach(c => c.classList.remove('active'));
        btn.classList.add('active');
-        document.getElementById(btn.dataset.tab).classList.add('active');
+        
+        const targetContent = document.getElementById(btn.dataset.tab);
+        targetContent.classList.add('active');
+        
+        targetContent.classList.remove('tab-active-animate');
+        void targetContent.offsetWidth; // Force reflow to restart animation
+        targetContent.classList.add('tab-active-animate');
+        
        isDevTabVisible = btn.dataset.tab === 'tab-dev';
        if (isDevTabVisible) refreshLogs();
        if (btn.dataset.tab === 'tab-sync') refreshHistory();
@@ -857,6 +942,10 @@ function showError(msg) {
 }

 // --- Action Handlers ---
+elements.roomId.addEventListener('input', () => {
+    elements.roomId.value = elements.roomId.value.replace(/[^a-zA-Z0-9\-]/g, '');
+});
+
 elements.joinBtn.addEventListener('click', async () => {
    if (elements.joinBtn.disabled) return;
    const roomIdInput = elements.roomId.value.trim();
@@ -911,21 +1000,36 @@ elements.leaveBtn.addEventListener('click', async () => {
    updateUI(null, null);
 });

-elements.createRoomBtn.addEventListener('click', () => {
-    const animals = ['koala', 'panda', 'tiger', 'eagle', 'fox', 'bear'];
-    const adj = ['happy', 'cool', 'fast', 'smart', 'brave', 'calm'];
-    const id = `${adj[Math.floor(Math.random() * adj.length)]}-${animals[Math.floor(Math.random() * animals.length)]}-${Math.floor(Math.random() * 100)}`;
-    const array = new Uint32Array(1);
-    window.crypto.getRandomValues(array);
-    const pass = array[0].toString(36).substring(0, 6);
+function handleCreateRoom() {
+    const secureGenerateId = (length = 6) => {
+        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+        const array = new Uint8Array(length);
+        self.crypto.getRandomValues(array);
+        return Array.from(array, byte => chars[byte % chars.length]).join('');
+    };
+    const roomId = secureGenerateId();
+    const password = secureGenerateId();
+    elements.roomId.value = roomId;
+    elements.password.value = password;
+    window.justCreatedRoom = true;
    
-    elements.roomId.value = id;
-    elements.password.value = pass;
+    // Auto-connect
    elements.joinBtn.click();
+}
+
+elements.createRoomBtn.addEventListener('click', handleCreateRoom);
+const syncTabCreateRoomBtn = document.getElementById('syncTabCreateRoomBtn');
+if (syncTabCreateRoomBtn) syncTabCreateRoomBtn.addEventListener('click', () => {
+    document.querySelector('.tab-btn[data-tab="tab-room"]').click();
+    handleCreateRoom();
 });

 elements.refreshRooms.addEventListener('click', () => {
-    elements.publicRooms.innerHTML = '<div style="text-align:center; padding: 10px; color:var(--text-muted);">Refreshing...</div>';
+    elements.publicRooms.replaceChildren();
+    const el = document.createElement('div');
+    el.style.cssText = 'text-align:center; padding: 10px; color:var(--text-muted);';
+    el.textContent = 'Refreshing...';
+    elements.publicRooms.appendChild(el);
    chrome.runtime.sendMessage({ type: 'GET_ROOM_LIST' });
 });

@@ -936,7 +1040,7 @@ elements.retryBtn.addEventListener('click', () => {
 elements.targetTab.addEventListener('change', () => {
    const val = elements.targetTab.value;
    const tabId = val ? parseInt(val) : null;
-    const tabTitle = elements.targetTab.options[elements.targetTab.selectedIndex]?.text.replace('⭐ MATCH: ', '') || null;
+    const tabTitle = elements.targetTab.options[elements.targetTab.selectedIndex]?.dataset.originalTitle || null;
    chrome.runtime.sendMessage({ type: 'SET_TARGET_TAB', tabId, tabTitle });
 });

@@ -973,13 +1077,15 @@ elements.forceSyncBtn.addEventListener('click', async () => {
    elements.forceSyncBtn.disabled = true;
    elements.forceSyncBtn.textContent = mode === 'jump-to-others' ? `Syncing to group (${formatTime(targetTime)})...` : 'Syncing...';
    forceSyncDone = false;
+    const peerCount = (status.peers || []).filter(p => (typeof p === 'object' ? p.peerId : p) !== localPeerId).length;
+    const syncTimeoutMs = peerCount === 0 ? 3000 : 12000;
    const forceSyncReset = () => {
        if (!forceSyncDone) {
            elements.forceSyncBtn.disabled = false;
            elements.forceSyncBtn.textContent = originalText;
        }
    };
-    forceSyncResetTimer = setTimeout(forceSyncReset, 12000);
+    forceSyncResetTimer = setTimeout(forceSyncReset, syncTimeoutMs);
    const tabId = parseInt(status.targetTabId);

    const sendForceSync = (time) => {
@@ -1021,19 +1127,55 @@ elements.forceSyncBtn.addEventListener('click', async () => {
 });

 elements.playBtn.addEventListener('click', () => {
+    if (!elements.targetTab.value) {
+        showToast('Please select a video first!', 'warning');
+        return;
+    }
+    elements.playBtn.textContent = '▶ Playing...';
+    elements.playBtn.disabled = true;
    chrome.runtime.sendMessage({
        type: 'CONTENT_EVENT',
        action: EVENTS.PLAY,
        payload: {}
+    }, (response) => {
+        if (response && response.status === 'ok_solo') {
+            elements.playBtn.textContent = '▶ Play';
+            elements.playBtn.disabled = false;
+        }
    });
+    // Safety reset: restore button after 2.5s in case no peers respond
+    setTimeout(() => {
+        if (elements.playBtn.disabled) {
+            elements.playBtn.textContent = '▶ Play';
+            elements.playBtn.disabled = false;
+        }
+    }, 2500);
 });

 elements.pauseBtn.addEventListener('click', () => {
+    if (!elements.targetTab.value) {
+        showToast('Please select a video first!', 'warning');
+        return;
+    }
+    elements.pauseBtn.textContent = '⏸ Pausing...';
+    elements.pauseBtn.disabled = true;
    chrome.runtime.sendMessage({
        type: 'CONTENT_EVENT',
        action: EVENTS.PAUSE,
        payload: {}
+    }, (response) => {
+        if (response && response.status === 'ok_solo') {
+            elements.pauseBtn.textContent = '⏸ Pause';
+            elements.pauseBtn.disabled = false;
+        }
    });
+    // Safety reset: restore button after 2.5s in case no peers respond
+    setTimeout(() => {
+        if (elements.pauseBtn.disabled) {
+            elements.pauseBtn.textContent = '⏸ Pause';
+            elements.pauseBtn.disabled = false;
+        }
+    }, 2500);
 });

 elements.clearLogs.addEventListener('click', () => {
@@ -1059,6 +1201,36 @@ elements.copyInvite.addEventListener('click', () => {
    });
 });

+if (elements.syncTabCopyInvite) {
+    elements.syncTabCopyInvite.addEventListener('click', () => {
+        navigator.clipboard.writeText(elements.inviteLink.value).then(() => {
+            const original = elements.syncTabCopyInvite.textContent;
+            elements.syncTabCopyInvite.textContent = '✓';
+            elements.syncTabCopyInvite.style.color = 'var(--success)';
+            showToast('Invite link copied!', 'success', 2000);
+            setTimeout(() => {
+                elements.syncTabCopyInvite.textContent = original;
+                elements.syncTabCopyInvite.style.color = '';
+            }, 2000);
+        });
+    });
+}
+
+if (elements.cancelLobbyBtn) {
+    elements.cancelLobbyBtn.addEventListener('click', () => {
+        chrome.runtime.sendMessage({ type: 'CANCEL_EPISODE_LOBBY' }, (response) => {
+            if (response && response.status === 'ok') {
+                showToast('Episode Lobby skipped.', 'info');
+                if (elements.episodeLobbyCard) {
+                    elements.episodeLobbyCard.style.display = 'none';
+                }
+            } else {
+                showToast('Failed to skip lobby.', 'error');
+            }
+        });
+    });
+}
+
 // --- Logs & Status ---
 async function refreshLogs() {
    chrome.runtime.sendMessage({ type: 'GET_LOGS' }, (logs) => {
@@ -1092,12 +1264,29 @@ chrome.runtime.onMessage.addListener((msg) => {
                'play': '▶ Play',
                'pause': '⏸ Pause',
                'seek': '⏩ Seek',
-                'force_sync_prepare': '⚡ Force Sync',
-                'force_sync_execute': '⚡ Force Play'
+                'force_sync_prepare': '⚡ Sync',
+                'force_sync_execute': '⚡ Sync Play'
            };
            const action = actionNames[state.action] || state.action;
            showToast(`${state.senderId} ${action}`, 'info', 2000);
        }
+
+        if (state && (state.action === 'play' || state.action === 'pause')) {
+            const btn = state.action === 'play' ? elements.playBtn : elements.pauseBtn;
+            if (btn && btn.disabled) {
+                chrome.runtime.sendMessage({ type: 'GET_STATUS' }, (res) => {
+                    const peerCount = res && res.peers ? res.peers.length : 1;
+                    if (state.acks && state.acks.length >= peerCount) {
+                        btn.textContent = '✅ Synced!';
+                        setTimeout(() => {
+                            btn.disabled = false;
+                            btn.textContent = state.action === 'play' ? '▶ Play' : '⏸ Pause';
+                        }, 2000);
+                    }
+                });
+            }
+        }
+
        if (state && state.action === 'force_sync_execute') {
            forceSyncDone = true;
            if (forceSyncResetTimer) {
@@ -1106,7 +1295,10 @@ chrome.runtime.onMessage.addListener((msg) => {
            }
            if (elements.forceSyncBtn) {
                elements.forceSyncBtn.disabled = false;
-                elements.forceSyncBtn.textContent = '⚡ Force Sync';
+                elements.forceSyncBtn.textContent = '✅ Synced!';
+                setTimeout(() => {
+                    elements.forceSyncBtn.textContent = '⚡ SYNC';
+                }, 2000);
            }
        }
        chrome.runtime.sendMessage({ type: 'GET_STATUS' }, (res) => {
@@ -1293,10 +1485,11 @@ function updateLobbyUI(lobby, peers) {
        peers.forEach(p => {
            const pId = typeof p === 'object' ? p.peerId : p;
            const pName = (typeof p === 'object' && p.username) ? p.username : pId;
+            const avatar = getAvatarForName(pName);
            const isReady = readySet.has(pId);
            const icon = isReady ? '\u2705' : '\u23f3';
            const label = isReady ? 'Ready' : 'Loading...';
-            peerLines.push(`${icon} ${pName} \u2014 ${label}`);
+            peerLines.push(`${icon} ${avatar} ${pName} \u2014 ${label}`);
        });
    }

@@ -1315,11 +1508,11 @@ function updateLobbyUI(lobby, peers) {

 // --- Onboarding Tour ---
 const onboardingSteps = [
-    { icon: '\u{1F44B}', title: 'Welcome to KoalaSync!', text: 'Watch videos together in perfect sync — no matter where you are. Let\'s take a quick tour!' },
-    { icon: '\u{1F3E0}', title: 'Room Tab', text: 'Create a room and share the invite link with friends. Anyone with the link can join instantly.' },
-    { icon: '\u{1F3AC}', title: 'Sync Tab', text: 'Pick the tab with your video. Play, pause, and seek — everyone stays in sync. Drift? Just hit Force Sync.' },
-    { icon: '\u2699\uFE0F', title: 'Settings', text: 'Pick a fun username, hide distracting tabs, and enable notifications so you never miss a moment.' },
-    { icon: '\u{1F389}', title: 'You\'re all set!', text: 'Open a video, create a room, and start watching together. Enjoy!' }
+    { icon: '👋', title: 'Welcome to KoalaSync!', text: 'Watch videos together in perfect sync — no matter where you are. Let\'s take a quick tour!', targetTab: 'tab-room' },
+    { icon: '🏠', title: '1. Create a Room', text: 'Start here. Create a room and share the invite link with your friends.', targetTab: 'tab-room' },
+    { icon: '🎬', title: '2. Select Video', text: 'Navigate here to select the video you want to sync. Play, pause, and seek — everyone stays in sync.', targetTab: 'tab-sync' },
+    { icon: '⚙️', title: '3. Personalize', text: 'Pick a fun username so your friends know who you are.', targetTab: 'tab-settings' },
+    { icon: '🎉', title: 'You\'re all set!', text: 'Time to grab some popcorn. Enjoy watching together!', targetTab: 'tab-room' }
 ];

 let onboardingStep = 0;
@@ -1327,6 +1520,7 @@ let onboardingStep = 0;
 function showOnboarding() {
    const overlay = document.getElementById('onboarding-overlay');
    if (!overlay) return;
+    document.body.style.minHeight = '400px';
    overlay.style.display = 'flex';
    renderOnboardingStep();
 }
@@ -1344,9 +1538,29 @@ function renderOnboardingStep() {
    title.textContent = step.title;
    text.textContent = step.text;

-    dots.innerHTML = onboardingSteps.map((_, i) =>
-        `<div style="width:8px; height:8px; border-radius:50%; background:${i === onboardingStep ? 'var(--accent)' : '#475569'};"></div>`
-    ).join('');
+    if (step.targetTab) {
+        const tabBtn = document.querySelector(`.tab-btn[data-tab="${step.targetTab}"]`);
+        if (tabBtn) tabBtn.click();
+        
+        const syncActive = document.getElementById('sync-active');
+        const syncInactive = document.getElementById('sync-inactive');
+        if (step.targetTab === 'tab-sync') {
+            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);
+    });

    nextBtn.textContent = onboardingStep === onboardingSteps.length - 1 ? 'Done!' : 'Next';
 }
@@ -1354,7 +1568,11 @@ function renderOnboardingStep() {
 function completeOnboarding() {
    const overlay = document.getElementById('onboarding-overlay');
    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);
 }

 document.getElementById('onboarding-next')?.addEventListener('click', () => {
@@ -1,12 +1,12 @@
 {
  "name": "koalasync",
-  "version": "1.6.1",
+  "version": "1.8.5",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "koalasync",
-      "version": "1.6.1",
+      "version": "1.8.5",
      "devDependencies": {
        "archiver": "^7.0.1",
        "eslint": "^10.4.0",
@@ -1,6 +1,6 @@
 {
  "name": "koalasync",
-  "version": "1.7.0",
+  "version": "1.9.2",
  "description": "KoalaSync Build Scripts",
  "private": true,
  "scripts": {
@@ -22,7 +22,7 @@ if (!fs.existsSync(extSharedDir)) {
  fs.mkdirSync(extSharedDir, { recursive: true });
 }

-const sharedFiles = ['constants.js', 'blacklist.js', 'README.md'];
+const sharedFiles = ['constants.js', 'blacklist.js', 'names.js', 'README.md'];
 for (const file of sharedFiles) {
  const src = path.join(masterSharedDir, file);
  const dest = path.join(extSharedDir, file);
@@ -31,7 +31,7 @@ for (const file of sharedFiles) {
  }
  fs.copyFileSync(src, dest);
 }
-console.log('✓ constants.js, blacklist.js, and README.md synced to extension/shared/');
+console.log('✓ constants.js, blacklist.js, names.js, and README.md synced to extension/shared/');

 // Read the base manifest
 const baseManifest = JSON.parse(fs.readFileSync(baseManifestPath, 'utf8'));
@@ -1,12 +1,18 @@
 import express from 'express';
 import { createServer } from 'http';
 import { Server } from 'socket.io';
-import bcrypt from 'bcryptjs';
+import crypto from 'crypto';
 import dotenv from 'dotenv';
 import { EVENTS, OFFICIAL_SERVER_TOKEN, PROTOCOL_VERSION } from '../shared/constants.js';

 dotenv.config();

+function hashPassword(password) {
+    if (!password) return null;
+    const salt = process.env.SERVER_SALT || 'koalasync_salt_3i';
+    return crypto.createHmac('sha256', salt).update(password).digest('hex');
+}
+
 const PORT = process.env.PORT || 3000;
 const MAX_ROOMS = parseInt(process.env.MAX_ROOMS) || 1000;
 const MAX_PEERS_PER_ROOM = parseInt(process.env.MAX_PEERS_PER_ROOM) || 50;
@@ -44,9 +50,10 @@ const httpServer = createServer(app);
 const io = new Server(httpServer, {
    cors: {
        origin: (origin, callback) => {
-            if (!origin || origin === 'https://sync.koalastuff.net' || origin.startsWith('chrome-extension://')) {
+            if (!origin || origin === 'https://sync.koalastuff.net' || origin.startsWith('chrome-extension://') || origin.startsWith('moz-extension://')) {
                callback(null, true);
            } else {
+                log('CORS', `Rejected origin: ${origin}`);
                callback(new Error('Not allowed by CORS'));
            }
        },
@@ -93,6 +100,26 @@ function checkAuthRate(ip, roomId) {
 }

 function recordAuthFailure(ip, roomId) {
+    if (failedAuthAttempts.size > 50000) {
+        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);
+            }
+        }
+        
+        // 2. If still over 50k, perform LRU-style eviction on the oldest 10,000 entries
+        if (failedAuthAttempts.size > 50000) {
+            log('SECURITY', 'failedAuthAttempts size exceeded 50000. Performing LRU-style eviction.');
+            const sortedEntries = Array.from(failedAuthAttempts.entries())
+                .sort((a, b) => a[1].lastAttempt - b[1].lastAttempt);
+            
+            for (let i = 0; i < 10000 && i < sortedEntries.length; i++) {
+                failedAuthAttempts.delete(sortedEntries[i][0]);
+            }
+        }
+    }
    const key = `${ip}:${roomId}`;
    const record = failedAuthAttempts.get(key) || { count: 0, lastAttempt: 0 };
    record.count++;
@@ -191,7 +218,18 @@ function removePeerFromRoom(socketId, roomId, reason) {

    // 3. Notify remaining peers (use io.to so the removed socket itself
    //    doesn't receive it — it has already left or is disconnecting)
-    io.to(roomId).emit(EVENTS.PEER_STATUS, { peerId, status: 'left' });
+    const isPeerStillConnected = Array.from(room.peerData.values()).some(data => data.peerId === peerId);
+    if (!isPeerStillConnected) {
+        io.to(roomId).emit(EVENTS.PEER_STATUS, { peerId, status: 'left' });
+    }
+
+    // 3.5. Clean up active lobby if a peer leaves
+    if (room.activeLobby) {
+        room.activeLobby.readyPeers = room.activeLobby.readyPeers.filter(id => id !== peerId);
+        if (room.activeLobby.readyPeers.length <= 1 || room.activeLobby.initiatorPeerId === peerId) {
+            room.activeLobby = null; // Dissolve lobby
+        }
+    }

    // 4. Delete empty room
    if (room.peers.size === 0) {
@@ -227,6 +265,12 @@ io.on('connection', (socket) => {
    }

    if (clientVersion) {
+        if (typeof clientVersion !== 'string') {
+            log('AUTH', `Invalid version type from ${clientIp}`);
+            socket.emit(EVENTS.ERROR, { message: 'Invalid version format' });
+            socket.disconnect(true);
+            return;
+        }
        const parts = clientVersion.split('.').map(Number);
        const cMaj = parts[0], cMin = parts[1], cPatch = parts[2] || 0;
        const [mMaj, mMin, mPatch] = MIN_VERSION.split('.').map(Number);
@@ -286,11 +330,13 @@ io.on('connection', (socket) => {

            const ip = socket._clientIp || socket.handshake.address;
            if (!checkAuthRate(ip, roomId)) {
+                log('AUTH', `Auth rate limit blocked ${ip} from room ${roomId.substring(0, 3)}***`);
                socket.emit(EVENTS.ERROR, { message: "Too many failed attempts. Try again later." });
                return;
            }

            let room = rooms.get(roomId);
+            let createdByMe = false;

            if (!room) {
                // Acquire per-room creation lock to prevent race conditions
@@ -298,9 +344,6 @@ io.on('connection', (socket) => {
                if (lockPromise) {
                    await lockPromise;
                    room = rooms.get(roomId);
-                    if (room) {
-                        // Another concurrent request created it, fall through to password check
-                    }
                }
                if (!room) {
                    // Create and store lock before async boundary
@@ -309,11 +352,12 @@ io.on('connection', (socket) => {
                    roomCreationLocks.set(roomId, lockPromise);
                    try {
                        if (rooms.size >= MAX_ROOMS) {
+                            log('ROOM', `Server at capacity: ${rooms.size}/${MAX_ROOMS} rooms — rejecting join`);
                            socket.emit(EVENTS.ERROR, { message: "Server capacity reached" });
                            return;
                        }

-                        const passwordHash = password ? await bcrypt.hash(password, 10) : null;
+                        const passwordHash = hashPassword(password);
                        room = {
                            passwordHash,
                            peers: new Set(),
@@ -322,21 +366,31 @@ io.on('connection', (socket) => {
                            lastActivity: Date.now()
                        };
                        rooms.set(roomId, room);
+                        createdByMe = true;
                        log('ROOM', `Created room: ${roomId.substring(0, 3)}***`);
                    } finally {
                        roomCreationLocks.delete(roomId);
                        resolveLock();
                    }
                }
-            } else {
+            }
+
+            if (!room) {
+                socket.emit(EVENTS.ERROR, { message: "Join error" });
+                return;
+            }
+
+            if (!createdByMe) {
                if (room.passwordHash) {
-                    if (!password || !(await bcrypt.compare(password, room.passwordHash))) {
+                    if (!password || hashPassword(password) !== room.passwordHash) {
                        recordAuthFailure(ip, roomId);
+                        log('AUTH', `Invalid password from ${ip} for room ${roomId.substring(0, 3)}***`);
                        socket.emit(EVENTS.ERROR, { message: "Invalid password" });
                        return;
                    }
                }
                if (room.peers.size >= MAX_PEERS_PER_ROOM) {
+                    log('ROOM', `Room full (${room.peers.size}/${MAX_PEERS_PER_ROOM}): ${roomId.substring(0, 3)}***`);
                    socket.emit(EVENTS.ERROR, { message: "Room full" });
                    return;
                }
@@ -380,7 +434,8 @@ io.on('connection', (socket) => {
            socket.to(roomId).emit(EVENTS.PEER_STATUS, { peerId, username: username || null, tabTitle: tabTitle || null, mediaTitle: mediaTitle || null, status: 'joined' });
            socket.emit(EVENTS.ROOM_DATA, { 
                roomId, 
-                peers: Array.from(room.peers).map(sid => room.peerData.get(sid)) 
+                peers: Array.from(room.peers).map(sid => room.peerData.get(sid)),
+                activeLobby: room.activeLobby || null
            });
            log('ROOM', `Peer ${peerId} joined: ${roomId.substring(0, 3)}***`);
        } catch (err) {
@@ -396,7 +451,8 @@ io.on('connection', (socket) => {
        EVENTS.PLAY, EVENTS.PAUSE, EVENTS.SEEK, 
        EVENTS.PEER_STATUS, EVENTS.FORCE_SYNC_PREPARE, 
        EVENTS.FORCE_SYNC_ACK, EVENTS.FORCE_SYNC_EXECUTE,
-        EVENTS.EPISODE_LOBBY, EVENTS.EPISODE_READY
+        EVENTS.EPISODE_LOBBY, EVENTS.EPISODE_READY,
+        EVENTS.EPISODE_LOBBY_CANCEL
    ];

    relayEvents.forEach(eventName => {
@@ -438,6 +494,7 @@ io.on('connection', (socket) => {
                    // --- S-3: Construct clean relay payload — never forward raw client data ---
                    const relayPayload = {
                        senderId:        mapping.peerId,
+                        seq:             clampNum(data.seq, 0, Number.MAX_SAFE_INTEGER),
                        currentTime:     clampNum(data.currentTime, 0, 86400),
                        targetTime:      clampNum(data.targetTime, 0, 86400),
                        playbackState:   validState(data.playbackState),
@@ -455,6 +512,21 @@ io.on('connection', (socket) => {
                    // Strip undefined keys for clean wire format
                    Object.keys(relayPayload).forEach(k => relayPayload[k] === undefined && delete relayPayload[k]);
                    socket.to(mapping.roomId).emit(eventName, relayPayload);
+
+                    // --- Side-effects: Server-side Episode Lobby Tracking ---
+                    if (eventName === EVENTS.EPISODE_LOBBY && relayPayload.expectedTitle) {
+                        room.activeLobby = {
+                            expectedTitle: relayPayload.expectedTitle,
+                            initiatorPeerId: mapping.peerId,
+                            readyPeers: [mapping.peerId]
+                        };
+                    } else if (eventName === EVENTS.EPISODE_READY && room.activeLobby) {
+                        if (!room.activeLobby.readyPeers.includes(mapping.peerId)) {
+                            room.activeLobby.readyPeers.push(mapping.peerId);
+                        }
+                    } else if ((eventName === EVENTS.FORCE_SYNC_PREPARE || eventName === EVENTS.FORCE_SYNC_EXECUTE || eventName === EVENTS.EPISODE_LOBBY_CANCEL) && room.activeLobby) {
+                        room.activeLobby = null;
+                    }
                    }
                }
            } catch (err) {
@@ -464,6 +536,11 @@ io.on('connection', (socket) => {
    });

    socket.on(EVENTS.GET_ROOMS, () => {
+        if (!checkEventRate(socket.id)) {
+            log('SECURITY', `Event rate limit exceeded for socket (GET_ROOMS): ${socket.id}`);
+            socket.disconnect(true);
+            return;
+        }
        const list = Array.from(rooms.entries()).map(([id, r]) => ({
            id,
            peerCount: r.peers.size,
@@ -581,8 +658,10 @@ process.on('SIGINT',  () => gracefulShutdown('SIGINT'));

 process.on('uncaughtException', (err) => {
    log('ERROR', `Uncaught exception: ${err.message}`, err.stack);
+    process.exit(1);
 });

 process.on('unhandledRejection', (reason) => {
    log('ERROR', `Unhandled rejection: ${reason}`);
+    process.exit(1);
 });
@@ -7,7 +7,7 @@
 */

 export const PROTOCOL_VERSION = "1.0.0";
-export const APP_VERSION = "1.3.1";
+export const APP_VERSION = "1.9.0";

 export const OFFICIAL_SERVER_URL = 'wss://syncserver.koalastuff.net';
 export const OFFICIAL_LANDING_PAGE_URL = 'https://sync.koalastuff.net';
@@ -36,7 +36,8 @@ export const EVENTS = {

    // Episode Auto-Sync
    EPISODE_LOBBY: "episode_lobby",     // Broadcast: waiting for everyone on this episode
-    EPISODE_READY: "episode_ready"      // Response: loaded the episode and paused at 0:00
+    EPISODE_READY: "episode_ready",      // Response: loaded the episode and paused at 0:00
+    EPISODE_LOBBY_CANCEL: "episode_lobby_cancel" // Broadcast: cancel active lobby and resume
 };

 export const HEARTBEAT_INTERVAL = 15000; // 15s
@@ -0,0 +1,281 @@
+/**
+ * KoalaSync Shared Name Generation & Emoji Mapping
+ *
+ * ⚠️ WARNING: This is the SINGLE SOURCE OF TRUTH.
+ * If you edit this file, you MUST run: node scripts/build-extension.js
+ * to propagate changes to the extension.
+ *
+ * The emoji map covers every animal/creature that has a Unicode emoji.
+ * Entries are sorted by key length (longest first) at lookup time to
+ * prevent substring false-matches (e.g. "caterpillar" must be checked
+ * before "cat").
+ *
+ * If you add a new animal noun to USERNAME_NOUNS, ensure it has a
+ * corresponding entry in ANIMAL_EMOJI_MAP (or a substring that already
+ * maps to a suitable emoji).
+ */
+
+export const USERNAME_ADJECTIVES = [
+    'Happy', 'Cool', 'Fast', 'Smart', 'Brave', 'Calm', 'Sneaky', 'Lazy',
+    'Wild', 'Chill', 'Lucky', 'Epic', 'Swift', 'Bold', 'Mighty',
+    'Cosmic', 'Neon', 'Shadow', 'Crystal', 'Thunder', 'Silent', 'Golden',
+    'Fierce', 'Noble', 'Mystic', 'Frozen', 'Blazing', 'Sapphire', 'Iron', 'Crimson'
+];
+
+export const USERNAME_NOUNS = [
+    'Koala', 'Panda', 'Tiger', 'Eagle', 'Fox', 'Bear', 'Wolf', 'Lion',
+    'Hawk', 'Seal', 'Owl', 'Shark', 'Dragon', 'Phoenix', 'Falcon',
+    'Panther', 'Raven', 'Cobra', 'Lynx', 'Jaguar', 'Orca', 'Mantis',
+    'Viper', 'Condor', 'Badger', 'Otter', 'Rhino', 'Crane', 'Mongoose',
+    'Specter',
+    'Cat', 'Dog', 'Deer', 'Bat', 'Gorilla', 'Monkey', 'Rabbit',
+    'Horse', 'Unicorn', 'Zebra', 'Leopard', 'Cheetah', 'Puma',
+    'Ram', 'Goat', 'Bull', 'Donkey', 'Moose',
+    'Elephant', 'Giraffe', 'Hippo', 'Sloth', 'Kangaroo',
+    'Raccoon', 'Hamster', 'Hedgehog', 'Skunk', 'Beaver', 'Bison',
+    'Camel', 'Llama', 'Hyena', 'Coyote',
+    'Mouse', 'Pig', 'Boar', 'Polar', 'Orangutan', 'Mammoth',
+    'Crow', 'Duck', 'Swan', 'Penguin', 'Parrot', 'Peacock',
+    'Dove', 'Dodo', 'Turkey', 'Flamingo', 'Chicken', 'Rooster', 'Goose',
+    'Dolphin', 'Whale', 'Crab', 'Lobster', 'Octopus', 'Squid',
+    'Jellyfish', 'Turtle',
+    'Crocodile', 'Lizard', 'Snake', 'Frog', 'Toad', 'Gecko',
+    'Bee', 'Ant', 'Spider', 'Scorpion', 'Butterfly', 'Ladybug',
+    'Beetle', 'Snail', 'Dragonfly', 'Caterpillar',
+    'Alien', 'Robot', 'Mermaid', 'Ghoul', 'Sprite', 'Cyborg',
+    'Dinosaur', 'Reaper', 'Wraith', 'Sphinx',
+];
+
+export const ANIMAL_EMOJI_MAP = {
+    'hippopotamus': '🦛',
+    'rhinoceros': '🦏',
+    'caterpillar': '🐛',
+    'chimpanzee': '🐵',
+    'orangutan': '🦧',
+    'blackbird': '🐦‍⬛',
+    'bumblebee': '🐝',
+    'cockatoo': '🦜',
+    'cockroach': '🪳',
+    'dragonfly': '🐉',
+    'grasshopper': '🦗',
+    'hedgehog': '🦔',
+    'jellyfish': '🪼',
+    'kangaroo': '🦘',
+    'ladybird': '🐞',
+    'ladybug': '🐞',
+    'porcupine': '🦔',
+    'scorpion': '🦂',
+    'tarantula': '🕷️',
+    'alligator': '🐊',
+    'anaconda': '🐍',
+    'antelope': '🦌',
+    'blowfish': '🐡',
+    'butterfly': '🦋',
+    'chameleon': '🦎',
+    'chipmunk': '🐿️',
+    'crocodile': '🐊',
+    'dinosaur': '🦖',
+    'elephant': '🐘',
+    'flamingo': '🦩',
+    'giraffe': '🦒',
+    'hamster': '🐹',
+    'leopard': '🐆',
+    'lobster': '🦞',
+    'mermaid': '🧜‍♀️',
+    'mongoose': '🦦',
+    'mosquito': '🦟',
+    'pangolin': '🦔',
+    'peacock': '🦚',
+    'penguin': '🐧',
+    'phoenix': '🐦‍🔥',
+    'raccoon': '🦝',
+    'seahorse': '🐴',
+    'sealion': '🦭',
+    'unicorn': '🦄',
+    'vampire': '🦇',
+    'warthog': '🐗',
+    'wolverine': '🦡',
+    'mammoth': '🦣',
+    'meerkat': '🦦',
+    'octopus': '🐙',
+    'opposum': '🐭',
+    'ostrich': '🐦',
+    'panther': '🐆',
+    'pelican': '🦩',
+    'rooster': '🐓',
+    'serpent': '🐍',
+    'specter': '👻',
+    'spectre': '👻',
+    'sparrow': '🐦',
+    'spider': '🕷️',
+    'sphinx': '🦁',
+    'squirrel': '🐿️',
+    'stingray': '🦈',
+    'termite': '🐜',
+    'tortoise': '🐢',
+    'turkey': '🦃',
+    'walrus': '🦭',
+    'wombat': '🦡',
+    'woodpecker': '🐦',
+    'alien': '👾',
+    'badger': '🦡',
+    'beaver': '🦫',
+    'beetle': '🪲',
+    'beluga': '🐋',
+    'bison': '🦬',
+    'bobcat': '🐱',
+    'buffalo': '🦬',
+    'bunny': '🐰',
+    'camel': '🐪',
+    'cheetah': '🐆',
+    'chicken': '🐔',
+    'cobra': '🐍',
+    'condor': '🦅',
+    'cougar': '🐆',
+    'coyote': '🐺',
+    'crane': '🦩',
+    'cricket': '🦗',
+    'crow': '🐦‍⬛',
+    'cyborg': '🤖',
+    'dolphin': '🐬',
+    'donkey': '🫏',
+    'dragon': '🐉',
+    'drake': '🐉',
+    'eagle': '🦅',
+    'falcon': '🦅',
+    'ferret': '🦦',
+    'gazelle': '🦌',
+    'gecko': '🦎',
+    'gerbil': '🐹',
+    'ghost': '👻',
+    'ghoul': '👻',
+    'goose': '🪿',
+    'gopher': '🐹',
+    'gorilla': '🦍',
+    'grizzly': '🐻',
+    'heron': '🦩',
+    'hippo': '🦛',
+    'hornet': '🐝',
+    'hyena': '🐺',
+    'iguana': '🦎',
+    'jackal': '🐺',
+    'jaguar': '🐆',
+    'kitten': '🐱',
+    'koala': '🐨',
+    'lemur': '🐒',
+    'lizard': '🦎',
+    'llama': '🦙',
+    'locust': '🦗',
+    'lynx': '🐱',
+    'macaw': '🦜',
+    'mantis': '🦗',
+    'mink': '🦦',
+    'monkey': '🐵',
+    'moose': '🦌',
+    'mouse': '🐭',
+    'orca': '🐋',
+    'otter': '🦦',
+    'oyster': '🦪',
+    'panda': '🐼',
+    'parrot': '🦜',
+    'pigeon': '🕊️',
+    'polar': '🐻‍❄️',
+    'poodle': '🐩',
+    'puffin': '🐧',
+    'puma': '🐆',
+    'rabbit': '🐰',
+    'raptor': '🦖',
+    'raven': '🐦‍⬛',
+    'reaper': '👻',
+    'rhino': '🦏',
+    'robin': '🐦',
+    'robot': '🤖',
+    'salmon': '🐟',
+    'shrimp': '🦐',
+    'skunk': '🦨',
+    'sloth': '🦥',
+    'snail': '🐌',
+    'snake': '🐍',
+    'sprite': '🧚',
+    'squid': '🦑',
+    'swan': '🦢',
+    'tapir': '🐗',
+    'tiger': '🐯',
+    'toad': '🐸',
+    'trout': '🐟',
+    'tuna': '🐟',
+    'turtle': '🐢',
+    'viper': '🐍',
+    'vulture': '🦅',
+    'weasel': '🦦',
+    'whale': '🐋',
+    'wolf': '🐺',
+    'wraith': '👻',
+    'zebra': '🦓',
+    'ape': '🦍',
+    'ant': '🐜',
+    'bat': '🦇',
+    'bee': '🐝',
+    'bug': '🐛',
+    'cat': '🐱',
+    'cow': '🐮',
+    'crab': '🦀',
+    'dog': '🐶',
+    'duck': '🦆',
+    'elk': '🦌',
+    'fly': '🪰',
+    'fox': '🦊',
+    'frog': '🐸',
+    'goat': '🐐',
+    'hawk': '🦅',
+    'hen': '🐔',
+    'hog': '🐷',
+    'lion': '🦁',
+    'mole': '🐭',
+    'moth': '🦋',
+    'mule': '🫏',
+    'owl': '🦉',
+    'pig': '🐷',
+    'ram': '🐏',
+    'rat': '🐀',
+    'seal': '🦭',
+    'shark': '🦈',
+    'wasp': '🐝',
+    'yak': '🐂',
+    'doe': '🦌',
+    'ewe': '🐑',
+    'buck': '🦌',
+    'ox': '🐂',
+    'bull': '🐂',
+    'dodo': '🦤',
+    'boar': '🐗',
+    'bear': '🐻',
+    'deer': '🦌',
+    'dove': '🕊️',
+    'fish': '🐟',
+    'hare': '🐰',
+    'horse': '🐴',
+    'lamb': '🐑',
+    'mare': '🐴',
+    'pony': '🐴',
+    'pup': '🐶',
+    'croc': '🐊',
+    'gnat': '🦟',
+    'gnu': '🦬',
+};
+
+export function getAvatarForName(username) {
+    if (!username) return '\u{1F464}';
+    const lower = username.toLowerCase();
+    const sorted = Object.entries(ANIMAL_EMOJI_MAP).sort((a, b) => b[0].length - a[0].length);
+    for (const [key, emoji] of sorted) {
+        if (lower.includes(key)) return emoji;
+    }
+    return '\u{1F464}';
+}
+
+export function generateUsername() {
+    const adj = USERNAME_ADJECTIVES[Math.floor(Math.random() * USERNAME_ADJECTIVES.length)];
+    const noun = USERNAME_NOUNS[Math.floor(Math.random() * USERNAME_NOUNS.length)];
+    return `${adj}${noun}`;
+}
@@ -195,7 +195,7 @@ document.addEventListener('DOMContentLoaded', () => {
                const isDE = document.documentElement.classList.contains('lang-de');
                title.textContent = isDE ? 'Erfolgreich!' : 'Success!';
                
-                let count = 3;
+                let count = 2;
                const updateCountdown = () => {
                    const closingMsg = isDE 
                        ? `Du bist dem Raum beigetreten. <br><span style="color:var(--accent); font-weight:bold;">Dieser Tab schließt sich in ${count} Sekunden...</span>`
@@ -226,8 +226,8 @@ document.addEventListener('DOMContentLoaded', () => {
            if (banner) {
                if (success) {
                    banner.style.background = 'var(--success)';
-                    banner.innerHTML = '<div class="container">✅ Joined! This tab will close in 3s...</div>';
-                    setTimeout(() => window.close(), 3000);
+                    banner.innerHTML = '<div class="container">✅ Joined! This tab will close in 2s...</div>';
+                    setTimeout(() => window.close(), 2000);
                } else {
                    banner.style.background = 'var(--error)';
                    banner.innerHTML = '';
@@ -3,15 +3,18 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>KoalaSync | Real-time Video Synchronization for Friends</title>
-    <meta name="description" content="Watch YouTube, Twitch, and HTML5 videos in sync with friends. KoalaSync is a privacy-first, open-source browser extension for Chrome and Firefox.">
+    <title>KoalaSync | Sync Netflix, Emby, Jellyfin & Any Video with Friends – Browser Extension</title>
+    <meta name="description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and any HTML5 video in perfect sync with friends. KoalaSync is a privacy-first, open-source browser extension for Chrome and Firefox. Works on almost any site with a video element.">
    
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" href="assets/logo.png">
-    <meta property="og:title" content="KoalaSync | Sync your videos">
-    <meta property="og:description" content="Watch together, stay in sync. Privacy-first video synchronization.">
+    <link rel="canonical" href="https://sync.koalastuff.net/">
+    <meta name="robots" content="index, follow">
+    <meta property="og:title" content="KoalaSync | Sync Netflix, Emby, Jellyfin & Any Video with Friends">
+    <meta property="og:description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and any HTML5 video in perfect sync. Privacy-first, open-source browser extension for Chrome & Firefox.">
    <meta property="og:image" content="https://sync.koalastuff.net/assets/logo.png">
    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://sync.koalastuff.net/">

    <script src="lang-init.js"></script>
 </head>
@@ -54,8 +57,8 @@
                    <span lang="de">Gemeinsam schauen.<br>Perfekt synchron.</span>
                </h1>
                <h2 class="hero-subtitle" data-reveal>
-                    <span lang="en">A free, open-source watch party extension for YouTube, Twitch, and local MP4s. Built for reliable synchronization and data sovereignty.</span>
-                    <span lang="de">Eine kostenlose, quelloffene Watch-Party-Erweiterung für YouTube, Twitch und lokale MP4s. Entwickelt für zuverlässige Synchronisation und Datenhoheit.</span>
+                    <span lang="en">Your remote movie night without lags. No registration, no data collection. Just share a link and watch together.</span>
+                    <span lang="de">Dein Kino-Abend auf Distanz. Keine Lags, keine Anmeldung. Einfach Link teilen und zusammen schauen.</span>
                </h2>
                <div class="cta-group" data-reveal>
                    <a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
@@ -100,7 +103,7 @@
                                <div class="mock-label"><span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span></div>
                                <div class="mock-invite-box">
                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join.html#join:brave-eagle-80:pass" readonly>
-                                    <button class="mock-btn" style="padding: 0.35rem 0.5rem;" onclick="navigator.clipboard.writeText('https://sync.koalastuff.net/join.html#join:brave-eagle-80:pass')"><span lang="en">Copy</span><span lang="de">Kopieren</span></button>
+                                    <button class="mock-btn" style="padding: 0.35rem 0.5rem;"><span lang="en">Copy</span><span lang="de">Kopieren</span></button>
                                </div>
                            </div>
                            <div class="mock-card" style="margin-bottom: 12px;">
@@ -131,7 +134,7 @@
                        <div id="mock-sync" class="mock-screen">
                            <div class="mock-form-group" style="margin-bottom: 12px;">
                                <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
-                                    <span lang="en">Target Tab (Video Source)</span><span lang="de">Ziel-Tab (Video-Quelle)</span>
+                                    <span lang="en">Select Video</span><span lang="de">Video auswählen</span>
                                </label>
                                <select class="mock-input" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
                                    <option>🎬 Germany's Next Flopmodel - S21E12</option>
@@ -146,7 +149,7 @@
                                <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;"><span lang="en">⏸ Pause</span><span lang="de">⏸ Pause</span></button>
                            </div>
                            <button class="mock-btn mock-btn-force" style="background: linear-gradient(135deg, #6366f1, #a855f7); width: 100%; padding: 10px; color: white; border: none; font-weight: 700; border-radius: 8px; margin-bottom: 15px; cursor: pointer;">
-                                <span lang="en">⚡ Force Sync Everyone</span><span lang="de">⚡ Synchronisation erzwingen</span>
+                                <span lang="en">⚡ Sync All Viewers</span><span lang="de">⚡ Alle synchronisieren</span>
                            </button>

                            <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
@@ -174,7 +177,7 @@

                            <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: pointer;" for="chk-noise">
-                                    <span lang="en">Filter Noise Tabs</span><span lang="de">Noise-Tabs filtern</span>
+                                    <span lang="en">Show Video Tabs Only</span><span lang="de">Nur Video-Tabs anzeigen</span>
                                </label>
                                <input type="checkbox" id="chk-noise" checked disabled style="width: auto; cursor: not-allowed;">
                            </div>
@@ -277,8 +280,8 @@
                        <span lang="en">Zero Accounts / Pure Privacy</span>
                        <span lang="de">Keine Accounts / Datenschutz</span>
                    </h3>
-                    <p lang="en">No registration, no tracking, and no database persistence. The server runs entirely in RAM, collects no telemetry or persistent logs, and purges your room when you leave.</p>
-                    <p lang="de">Keine Registrierung, kein Tracking und keine Datenspeicherung. Der Server läuft flüchtig im RAM, speichert keine dauerhaften Logs und löscht deinen Raum nach dem Verlassen.</p>
+                    <p lang="en">No registration, no tracking, no bullshit. Just share a link and watch. The server runs entirely in RAM and purges your room when you leave.</p>
+                    <p lang="de">Kein Login. Keine Daten. Einfach Link teilen und schauen. Der Server läuft flüchtig im RAM und löscht deinen Raum komplett nach dem Verlassen.</p>
                </div>
                <div class="feature-card" data-reveal>
                    <div class="feature-icon">🌐</div>
@@ -295,8 +298,8 @@
                        <span lang="en">Self-Hostable & Docker-Ready</span>
                        <span lang="de">Self-Hostable & Docker-Ready</span>
                    </h3>
-                    <p lang="en">Take full ownership of your sync relay. We offer ready-to-use Docker images and lightweight Caddy configurations, enabling you to launch your private server in seconds.</p>
-                    <p lang="de">Übernimm die volle Kontrolle. Mit unseren fertigen Docker-Images und einfachen Caddy-Konfigurationen startest du deinen eigenen, komplett privaten Relay-Server in wenigen Sekunden.</p>
+                    <p lang="en">Our official servers are free and fast, but you <strong>can</strong> take full ownership if you want to. Launch your own private relay server in seconds via Docker.</p>
+                    <p lang="de">Unsere Server sind kostenlos und schnell, aber du <strong>kannst</strong> auch die volle Kontrolle übernehmen, wenn du willst. Starte dein eigenes privates Relay in Sekunden via Docker.</p>
                </div>
                <div class="feature-card" data-reveal>
                    <div class="feature-icon">🔗</div>
@@ -454,7 +457,7 @@
      <span class="t-key">-</span> <span class="t-str">MAX_PEERS_PER_ROOM=50</span>
    <span class="t-key">pids_limit:</span> <span class="t-val">2048</span></code></pre>
                        <div style="margin-top: 1rem; font-size: 0.75rem; text-align: right; padding-right: 0.5rem;">
-                            <a href="https://github.com/Shik3i/KoalaSync/pkgs/container/koalasync" target="_blank" style="color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; transition: opacity 0.2s; opacity: 0.85;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.85'">
+                            <a href="https://github.com/Shik3i/KoalaSync/pkgs/container/koalasync" target="_blank" style="color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; transition: opacity 0.2s; opacity: 0.85;">
                                📦 <span lang="en">View all image tags on GitHub Packages</span><span lang="de">Alle Image-Tags auf GitHub Packages ansehen</span> →
                            </a>
                        </div>
@@ -1,4 +1,6 @@
+# KoalaSync Website — Allow all crawlers, full indexing
 User-agent: *
 Allow: /

+# Sitemap for search engines
 Sitemap: https://sync.koalastuff.net/sitemap.xml
@@ -1,4 +1,4 @@
 {
-  "version": "1.7.0",
-  "date": "2026-05-25T10:40:34Z"
+  "version": "1.9.2",
+  "date": "2026-05-29T23:35:36Z"
 }
Author	SHA1	Message	Date
Timo	f7096edd30	Refactor: Behebung Force-Sync ACK-Zaehler-Inflation, SHA-256 Hashing, Room-ID-Desinfizierung, Reduzierung MIN_SEEK_DELTA auf 2s und seekDebounce auf 300ms	2026-05-30 02:00:17 +02:00
GitHub Action	e2b76b05a1	chore(release): update versions to v1.9.2 [skip ci]	2026-05-29 23:35:36 +00:00
Timo	93acd0b44c	fix: resolve F-01 to F-08 audit bugs and QoL improvements	2026-05-30 01:34:48 +02:00
GitHub Action	ce7b5c47f2	chore(release): update versions to v1.9.1 [skip ci]	2026-05-29 22:08:39 +00:00
Timo	92fb8e2d00	Roll back network latency compensation to maximize simplicity and clock skew safety	2026-05-30 00:06:52 +02:00
Timo	43cde9bbef	Optimize network latency compensation cap to protect against system clock skew	2026-05-30 00:03:56 +02:00
Timo	56955027f9	Fix critical sync lockouts, zombie disconnects, play-seek debounces, active lobbies, SW keep-alives, branding matches and ESLint warnings	2026-05-30 00:02:19 +02:00
GitHub Action	5ef059a94f	chore(release): update versions to v1.9.0 [skip ci]	2026-05-28 02:55:04 +00:00
Koala	98b4fc5fb4	release: v1.9.0 — command sequencing, episode-aware sync, echo suppression - Add per-peer monotonically increasing seq numbers (localSeq + lastSeqBySender) - Server relays seq for stale command detection (backward compatible) - Replace expectedEvents (1500ms timeout) with _suppressTimers (per-type, 300ms) - Fix FORCE_SYNC_ACK missing seq (stale-ACK guard) - Fix episode lobby readyPeers asymmetry (initiator now included) - Add extractEpisodeId() parsing S01E01, Season 1 Ep 1, Folge 5, Ep. 3, #42 - Add isDifferentEpisode() guard blocking cross-episode sync commands - Add sameEpisode() for format-tolerant lobby title matching - Guard controlled via autoSyncNextEpisode setting - Reduce reactive lock 1000ms → 300ms - Fix routeToContent unbounded retry (max 3 attempts) - Fix server bcrypt.hash failure crashing join flow - Fix sameEpisode(null, title) returning true - Fix forceSyncTimeout leak on rapid force sync clicks - Persist lastSeqBySender across service worker restarts - Bump version: 1.8.10 → 1.9.0	2026-05-28 04:54:54 +02:00
Koala	762d6425be	fix: audit corrections for sameEpisode, CMD_ACK, lastSeqBySender, forceSyncTimeout - sameEpisode: return false when one title is null (prevent false lobby completions) - Episode guard: skip CMD_ACK for FORCE_SYNC_EXECUTE on mismatch (H1) - Persist lastSeqBySender in chrome.storage.session (M3, survives SW restart) - Clear forceSyncTimeout before overwriting (H3, pre-existing timer leak)	2026-05-28 04:45:52 +02:00
Koala	1fba2fb69c	perf: add command sequence numbers, episode-aware sync guard, fix echo suppression - Add monotonically increasing seq per peer (localSeq + lastSeqBySender) - Server relays seq field for stale command detection (backward compatible) - Replace expectedEvents (1500ms timeout) with _suppressTimers (per-type, 300ms) - Fix FORCE_SYNC_ACK missing seq (stale-ACK could trigger premature exec) - Fix episode lobby readyPeers asymmetry (initiator never broadcasted readiness) - Add extractEpisodeId() parsing S01E01/Season 1 Episode 1/Folge 5 patterns - Add isDifferentEpisode() guard blocking sync commands across different episodes - add sameEpisode() for format-tolerant lobby title matching - Guard controlled by autoSyncNextEpisode setting with disable hint in warning - Reduce reactive lock from 1000ms to 300ms (seq numbers handle ordering)	2026-05-28 04:30:32 +02:00
Koala	eca259281a	feat: expand emoji/name system with comprehensive animal mapping - Create shared/names.js as single source of truth for emoji maps, noun lists, adjectives, and username generation (215 animal emoji entries) - Remove duplicated inline lists from popup.js and background.js; both now import getAvatarForName / generateUsername from shared/names.js - Add names.js to the build script sync list so it stays DRY across extension builds - Fix missing cat emoji: CoolCat now correctly resolves to 🐱 - Sort emoji map keys by length at lookup time to prevent substring false-matches (e.g. 'caterpillar' before 'cat')	2026-05-28 03:35:17 +02:00
GitHub Action	afd28be2e6	chore(release): update versions to v1.8.10 [skip ci]	2026-05-26 15:42:24 +00:00
Koala	cc0265c836	v1.8.10: fix description length, solo peer detection, tab-close peer notify, lastHeartbeat guard, time interpolation stale guard	2026-05-26 17:42:11 +02:00
GitHub Action	6ebff9ab4c	chore(release): update versions to v1.8.9 [skip ci]	2026-05-26 01:07:16 +00:00
Koala	35e779c1ff	move version link outside h1 to avoid inherited heading styles	2026-05-26 03:00:29 +02:00
Koala	09f0e04891	add clickable version with GitHub icon to popup header	2026-05-26 02:58:36 +02:00
Koala	9eff53ba46	chore: remove CSP-blocked inline handlers from landing page	2026-05-26 02:47:45 +02:00
GitHub Action	bde2f7ea55	chore(release): update versions to v1.8.8 [skip ci]	2026-05-26 00:34:04 +00:00
Koala	901861269a	fix: Firefox invite — cloneInto() for CustomEvent detail (XrayWrapper)	2026-05-26 02:33:54 +02:00
GitHub Action	ba91e2744c	chore(release): update versions to v1.8.7 [skip ci]	2026-05-26 00:06:39 +00:00
Koala	b7a44024ab	fix: suppress ghost seek events on tab re-focus (Firefox tab throttling)	2026-05-26 02:06:23 +02:00
Koala	3c49bfe54c	feat: SEO — add Emby/Jellyfin to descriptions, optimize meta tags, fix APP_VERSION	2026-05-26 01:51:34 +02:00
GitHub Action	d2ea7c7423	chore(release): update versions to v1.8.6 [skip ci]	2026-05-25 23:07:55 +00:00
Koala	db11812bd6	fix: suppress seek events when solo, add moz-extension CORS, add server logging	2026-05-26 01:06:04 +02:00
GitHub Action	6db8fdbf75	chore(release): update versions to v1.8.5 [skip ci]	2026-05-25 21:56:58 +00:00
Koala	d23c37f87f	chore(release): v1.8.5	2026-05-25 23:56:50 +02:00
Koala	acd428d4f7	fix: audit fixes — auto-match title corruption, duplicate HTML attrs, stale ℹ️ icons, missing tooltip, remove fix_ui.js	2026-05-25 23:56:14 +02:00
Koala	c0a6f0adc2	ui: clipboard emoji for invite button, movie emoji for audible tab indicator	2026-05-25 23:56:14 +02:00
GitHub Action	42b73bb97f	chore(release): update versions to v1.8.3 [skip ci]	2026-05-25 21:43:51 +00:00
Koala	dc36bfdded	chore(release): v1.8.3	2026-05-25 23:43:41 +02:00
Koala	06db850387	fix(ui): add comprehensive tooltips to all labels, buttons and inputs	2026-05-25 23:43:09 +02:00
Koala	0de92b5b61	fix(ui): tooltips, full emoji map, and onboarding layout	2026-05-25 23:37:21 +02:00
GitHub Action	8ff8e7beb6	chore(release): update versions to v1.8.1 [skip ci]	2026-05-25 21:32:16 +00:00
Koala	8317099072	chore(release): prep for v1.8.1	2026-05-25 23:32:07 +02:00
Koala	04c63dcf68	fix(ui): add missing avatar emoji in episode lobby UI	2026-05-25 23:30:26 +02:00
Koala	fd23ccc23a	feat(ui): v1.8.1 visual upgrades (emojis, animations, audio indicator)	2026-05-25 23:29:06 +02:00
Koala	4d5caeda9e	style(ui): redesign sync button layout and rename to SYNC	2026-05-25 23:20:37 +02:00
Koala	f1f41e5cac	fix(ui): apply tooltip to full label text for settings	2026-05-25 23:19:23 +02:00
GitHub Action	473eacda22	chore(release): update versions to v1.8.0 [skip ci]	2026-05-25 21:09:07 +00:00
Koala	42029f86bf	chore(release): prep for v1.8.0	2026-05-25 23:08:55 +02:00
Koala	4c4a2638d7	docs: rearrange README to prioritize user quick start	2026-05-25 23:06:58 +02:00
Koala	5b57970c4c	docs: use for-the-badge style for download links	2026-05-25 23:05:22 +02:00
Koala	61492f953b	docs: Update README quick start for users	2026-05-25 23:04:14 +02:00
Koala	da6a1cc643	Server updates	2026-05-25 22:59:54 +02:00
Koala	62fdffa5ee	UX Improvements: Onboarding, UI Feedback, Auto-Copy Invite	2026-05-25 22:59:54 +02:00
GitHub Action	fb13978c9d	chore(release): update versions to v1.7.5 [skip ci]	2026-05-25 11:26:16 +00:00
Koala	82c09a5328	fix(popup): use hostname-aware domain matching to prevent false positives The noise filter used naive String.includes() on the full URL, causing blacklist entry 'x.com' to match netflix.com (since 'netflix.com' contains 'x.com' as substring). This made Netflix tabs disappear when the filter was enabled. Fixed by extracting the URL hostname and matching at domain boundaries: - Domain entries (x.com): hostname === domain \|\| endsWith('.' + domain) - Prefix entries (amazon.): startsWith \|\| includes('.' + domain) - Keyword entries (jira): substring fallback on full URL Release v1.7.5	2026-05-25 13:26:01 +02:00
Koala	2fbeafeb3f	fix(website): 'any' → 'almost any' for honesty	2026-05-25 13:01:59 +02:00
Koala	80f8c821cb	docs: clarify that website and documentation changes do not need release tags	2026-05-25 13:00:38 +02:00
GitHub Action	7d3965a9fd	chore(release): update versions to v1.7.4 [skip ci]	2026-05-25 10:59:16 +00:00
Koala	1aca6c37d4	fix(website): replace misleading 'local MP4s' with accurate platform list The hero subtitle claimed support for 'local MP4s' which makes no sense for a browser-based synchronization tool (local files can't be synced across different computers). Changed to accurately reflect actual platform support: YouTube, Twitch, Netflix, and any website with a video player.	2026-05-25 12:59:00 +02:00
GitHub Action	aa740592dd	chore(release): update versions to v1.7.3 [skip ci]	2026-05-25 10:52:55 +00:00
Koala	6f8bcf8478	fix(popup): replace innerHTML with DOM API to fix Firefox warnings Firefox flagged unsafe innerHTML assignments: - renderEmpty() container.innerHTML with template literal - renderOnboardingStep() dots.innerHTML with mapped content - updateLastActionUI() lastActionCard.innerHTML static string - refreshRooms click handler publicRooms.innerHTML Replaced all with createElement + textContent/replaceChildren.	2026-05-25 12:52:33 +02:00
GitHub Action	807a620fe9	chore(release): update versions to v1.7.2 [skip ci]	2026-05-25 10:46:16 +00:00