feat: reorganize popup tabs and add video debug diagnostics

extension/background.js

@@ -531,6 +531,20 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
             connect();
             // We wait for status update in handleServerEvent
         });
+    } else if (message.type === 'GET_VIDEO_STATE') {
+        const { tabId } = message;
+        if (!tabId) {
+            sendResponse({ error: 'No tabId provided' });
+            return;
+        }
+        chrome.tabs.sendMessage(tabId, { type: 'GET_VIDEO_STATE' }, (res) => {
+            if (chrome.runtime.lastError) {
+                sendResponse({ error: chrome.runtime.lastError.message });
+            } else {
+                sendResponse(res);
+            }
+        });
+        return true; // Keep channel open
     } else if (message.type === 'CONTENT_EVENT') {
         if (sender.tab) {
             currentTabId = sender.tab.id;

extension/content.js

@@ -146,6 +146,24 @@
                 tryMediaAction(EVENTS.PLAY);
             }
         }
+
+        if (message.type === 'GET_VIDEO_STATE') {
+            const video = findVideo();
+            if (video) {
+                sendResponse({
+                    paused: video.paused,
+                    currentTime: video.currentTime,
+                    duration: video.duration || 0,
+                    readyState: video.readyState,
+                    muted: video.muted,
+                    playbackRate: video.playbackRate,
+                    url: window.location.href,
+                    id: video.id || 'none'
+                });
+            } else {
+                sendResponse({ error: 'No video found' });
+            }
+        }
     });
 
     // Detect native events

extension/popup.html

@@ -200,15 +200,12 @@
     <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>
     </div>
 
     <!-- Room Tab -->
     <div id="tab-room" class="tab-content active">
-        <div class="form-group">
-            <label>Your Username</label>
-            <input type="text" id="username" placeholder="Anonymous Koala" maxlength="20">
-        </div>
 
         <!-- JOIN SECTION: Visible when not in a room -->
         <div id="section-join">
@@ -301,12 +298,30 @@
             <!-- History will be injected here -->
         </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>
+
+        <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>
+        </div>
+        
+        <div style="font-size: 11px; color: var(--text-muted); padding: 8px;">
+            <p>• Username helps others identify you.</p>
+            <p>• Noise filtering hides tabs without videos.</p>
+        </div>
+    </div>
 
     <!-- Dev Tab -->
     <div id="tab-dev" class="tab-content">
-        <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;">
-            <label style="margin-bottom: 0;">Filter Noise Tabs</label>
-            <input type="checkbox" id="filterNoise" style="width: auto;" checked>
+        <label>Video Debug Info</label>
+        <div id="videoDebug" class="info-card" style="font-size: 10px; font-family: monospace; color: var(--text-muted); min-height: 60px; line-height: 1.4;">
+            No tab selected or video detected.
         </div>
 
         <label>Connection Status</label>

extension/popup.js

@@ -44,6 +44,7 @@ const elements = {
     activeServer: document.getElementById('activeServer'),
     peerList: document.getElementById('peerList'),
     peerListSync: document.getElementById('peerListSync'),
+    videoDebug: document.getElementById('videoDebug'),
     playBtn: document.getElementById('playBtn'),
     pauseBtn: document.getElementById('pauseBtn')
 };
@@ -89,6 +90,9 @@ async function init() {
 
     // Initial room list fetch
     chrome.runtime.sendMessage({ type: 'GET_ROOM_LIST' });
+
+    // Debug Info Refresh
+    setInterval(refreshDebugInfo, 2000);
 }
 
 // --- UI Logic ---
@@ -575,5 +579,36 @@ elements.copyLogs.addEventListener('click', () => {
     });
 });
 
+function refreshDebugInfo() {
+    // Only refresh if Dev tab is visible
+    const devTab = document.getElementById('tab-dev');
+    if (!devTab || devTab.style.display === 'none') return;
+
+    chrome.runtime.sendMessage({ type: 'GET_STATUS' }, (res) => {
+        if (!res || !res.targetTabId) {
+            if (elements.videoDebug) elements.videoDebug.textContent = 'No target tab selected.';
+            return;
+        }
+
+        // Request direct state from the content script via background
+        chrome.runtime.sendMessage({ type: 'GET_VIDEO_STATE', tabId: res.targetTabId }, (state) => {
+            if (!state || state.error) {
+                if (elements.videoDebug) elements.videoDebug.textContent = 'Could not communicate with tab video.';
+                return;
+            }
+
+            if (elements.videoDebug) {
+                elements.videoDebug.innerHTML = `
+                    <div style="color:var(--accent); margin-bottom:4px;">VIDEO STATE: ${state.paused ? 'PAUSED' : 'PLAYING'}</div>
+                    <div style="font-size: 11px;">Time: ${state.currentTime.toFixed(2)}s / ${state.duration.toFixed(2)}s</div>
+                    <div style="font-size: 11px;">ReadyState: ${state.readyState}</div>
+                    <div style="font-size: 11px;">Muted: ${state.muted} | PlaybackRate: ${state.playbackRate}</div>
+                    <div style="font-size:9px; margin-top:4px; opacity:0.7;">URL: ${state.url.substring(0, 40)}...</div>
+                `;
+            }
+        });
+    });
+}
+
 init();
 setInterval(refreshLogs, 5000);