Refactor agent.user.js to enhance debug functionality and server management. Introduce new debug state handling, update logging mechanisms, and improve popup menu commands for better user interaction. Ensure consistent formatting and code readability throughout the script.

agent.user.js

@@ -33,7 +33,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
     const CONFIG = {
         heartbeat_interval: 10000,
         task_poll_interval: 10000,
-        is_debug: true,
+
         servers: {
             local: { label: '🏠 Local', url: 'http://localhost:3000' },
             prod: { label: '🌐 Prod', url: 'https://baf.thuanle.me' },
@@ -47,6 +47,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
                 // Server configuration
                 server_type: 'prod',
                 server_url: null,
+                server_last_seen: null,
 
                 // Page state
                 current_page: null,
@@ -67,7 +68,12 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
 
                 // Popup state
                 popup_position: 4, // 1: top-left, 2: top-right, 3: bottom-left, 4: bottom-right
-                popup_visible: true
+                popup_visible: true,
+
+                // Debug state
+                is_debug: true
+
+
             };
 
             this.observers = new Map();
@@ -85,6 +91,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
             this.data.bot_status = await STORAGE.getBotStatus();
             this.data.popup_position = await STORAGE.getPopupPosition();
             this.data.popup_visible = await STORAGE.getPopupVisible();
+            this.data.is_debug = await STORAGE.getDebug();
 
             // Detect current page and login state
             this.data.current_page = BINANCE.detectPage();
@@ -152,6 +159,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
         key_navigation_state: 'baf-navigation-state',
         key_popup_position: 'baf-popup-position',
         key_popup_visible: 'baf-popup-visible',
+        key_debug: 'baf-debug',
 
         getToken: () => GM_getValue(STORAGE.key_token, ''),
         setToken: token => GM_setValue(STORAGE.key_token, String(token || '').trim().replace(/^Bearer\s+/i, '')),
@@ -182,12 +190,15 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
         setPopupPosition: (position) => GM_setValue(STORAGE.key_popup_position, position),
 
         getPopupVisible: () => GM_getValue(STORAGE.key_popup_visible, true),
-        setPopupVisible: (visible) => GM_setValue(STORAGE.key_popup_visible, visible)
+        setPopupVisible: (visible) => GM_setValue(STORAGE.key_popup_visible, visible),
+
+        getDebug: () => GM_getValue(STORAGE.key_debug, true),
+        setDebug: (debug) => GM_setValue(STORAGE.key_debug, debug)
     };
 
     // ====== UTILITY MODULE ======
     const TL = {
-        debug: (tag, msg, ...args) => CONFIG.is_debug && GM_log(`[TL] [${tag}]\n${msg}`, ...args),
+        debug: (tag, msg, ...args) => APP_STATE.getData().is_debug && GM_log(`[TL] [${tag}]\n${msg}`, ...args),
         log: (tag, msg, ...args) => GM_log(`[TL] [${tag}]\n${msg}`, ...args),
         warn: (tag, msg, ...args) => GM_log(`[TL] [WARN] [${tag}] ⚠️\n${msg}`, ...args),
         error: (tag, msg, ...args) => GM_log(`[TL] [ERROR] [${tag}] ❌\n${msg}`, ...args),
@@ -452,7 +463,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
             const isWalletVisible = walletBtn && TL.dom.isVisible?.(walletBtn);
 
             // msg += `dashboard: ${dashboardLink}, accountIcon: ${accountIcon}, walletBtn: ${walletBtn}\n`;
-            msg += `Visible: dashboard: ${isDashboardVisible? '✓' : '✗'}, accountIcon: ${isAccountIconVisible? '✓' : '✗'}, walletBtn: ${isWalletVisible? '✓' : '✗'}\n`;
+            msg += `Visible: dashboard: ${isDashboardVisible ? '✓' : '✗'}, accountIcon: ${isAccountIconVisible ? '✓' : '✗'}, walletBtn: ${isWalletVisible ? '✓' : '✗'}\n`;
 
             // If we see user account elements, likely logged in
             if (isDashboardVisible && isAccountIconVisible && isWalletVisible) {
@@ -1346,7 +1357,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
         const data = APP_STATE.getData();
         const curSrv = data.server_url;
 
-        GM_registerMenuCommand(`Server: ${curSrv.label} (${curSrv.url})`, async () => {
+        GM_registerMenuCommand(`🌐 Server: ${curSrv.label} (${curSrv.url})`, async () => {
             try {
                 const next = (data.server_type === 'local') ? 'prod' : 'local';
                 await APP_STATE.update({ server_type: next });
@@ -1361,7 +1372,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
             }
         });
 
-        GM_registerMenuCommand('Token', async () => {
+        GM_registerMenuCommand('🔑 Token', async () => {
             try {
                 const curToken = await STORAGE.getToken();
                 const input = prompt('Bearer token:', curToken || '');
@@ -1382,90 +1393,10 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
             }
         });
 
-        // Bot Status Menu với icon và tên task
-        const getStatusDisplay = () => {
-            const data = APP_STATE.getData();
-            const taskName = data.current_task?.type || '';
-
-            switch (data.bot_status) {
-                case BOT_STATUS.WAITING:
-                    return `💤 Waiting for new task`;
-                case BOT_STATUS.RUNNING:
-                    return `▶️ Running: ${taskName}`;
-                case BOT_STATUS.PAUSED:
-                    return `⏸️ Paused: ${taskName}`;
-                case BOT_STATUS.STOPPED:
-                    return `⏹️ Stopped`;
-                default:
-                    return `❓ Unknown status`;
-            }
-        };
-
         // Popup toggle menu
-        const popupData = APP_STATE.getData();
+        GM_registerMenuCommand("👁️ Toggle Popup", () => {
-        const popupStatus = popupData.popup_visible ? '👁️ Hide Popup' : '👁️ Show Popup';
-        GM_registerMenuCommand(popupStatus, () => {
             UI.statusOverlay.toggle();
         });
-
-
-
- 
-        // Debug tools
-        GM_registerMenuCommand('🔍 Current Status', () => {
-            const detectedPage = APP_STATE.getData().current_page;
-            const isLoggedIn = APP_STATE.getData().is_logged_in;
-            const currentUrl = window.location.href;
-
-            const status = `Page: ${detectedPage}\nLogin: ${isLoggedIn ? 'Yes' : 'No'}\nURL: ${currentUrl}`;
-
-            console.log('Current Status:', status);
-            alert(status);
-        });
-
-        GM_registerMenuCommand('🔐 Debug Login State', () => {
-            const isInIframe = window.top !== window;
-            const loginState = BINANCE.detectLoginState();
-            
-            // Check all possible login indicators
-            const loginIndicators = {
-                'In iframe': isInIframe,
-                'Login button visible': TL.dom.isVisible?.(document.querySelector('#toLoginPage')),
-                'Register button visible': TL.dom.isVisible?.(document.querySelector('#toRegisterPage')),
-                'Account icon found': !!document.querySelector('.header-account-icon'),
-                'Deposit button found': !!document.querySelector('.deposit-btn'),
-                'Wallet button found': !!document.querySelector('#ba-wallet'),
-                'User menu found': !!document.querySelector('.header-dropdown-menu'),
-                'Dashboard link found': !!document.querySelector('a[href*="/my/dashboard"]'),
-                'Detected login state': loginState
-            };
-
-            const debugInfo = Object.entries(loginIndicators)
-                .map(([key, value]) => `${key}: ${value}`)
-                .join('\n');
-
-            console.log('=== LOGIN STATE DEBUG ===');
-            console.log(debugInfo);
-            alert(`Login State Debug:\n\n${debugInfo}`);
-        });
-
-        GM_registerMenuCommand('🔍 Debug URL Sources', () => {
-            const mainUrl = window.location.href;
-            const frames = Array.from(document.querySelectorAll('iframe')).map(frame => frame.src);
-            const popups = window.opener ? window.opener.location.href : null;
-
-            const debugInfo = `
-Main Window: ${mainUrl}
-Frames: ${frames.length > 0 ? frames.join('\n') : 'None'}
-Popup Opener: ${popups || 'None'}
-            `;
-
-            console.log('=== URL SOURCES DEBUG ===');
-            console.log(debugInfo);
-            alert(`URL Sources Debug:\n\n${debugInfo}`);
-        });
-
-
     }
 
     // ====== HEARTBEAT ======
@@ -1484,7 +1415,11 @@ Popup Opener: ${popups || 'None'}
             };
 
             // TL.debug(`HEARTBEAT`, `${JSON.stringify(status, null, 2)}`);
-            await BAF.ping(status);
+            const res = await BAF.ping(status);
+            if (res.ok) {
+                APP_STATE.update({ server_last_seen: new Date() });
+            }
+
             return status;
         } catch (e) {
             TL.error('HEARTBEAT', e.message);
@@ -1593,7 +1528,6 @@ Popup Opener: ${popups || 'None'}
 
             // Update overlay content
             updateContent: () => {
-                if (!UI.statusOverlay.element) return;
 
                 const data = APP_STATE.getData();
                 const taskName = data.current_task?.type || 'No task';
@@ -1620,27 +1554,36 @@ Popup Opener: ${popups || 'None'}
 
                 // Get server info
                 const serverLabel = data.server_url?.label || 'Unknown';
+                // data.server_last_seen < 1min == connected
+                const serverConnected = data.server_last_seen && new Date() - data.server_last_seen < 60000 ? '🟢' : '🔴';
 
                 // Get page info
                 const pageDisplay = data.current_page || 'unknown';
 
                 // Get login status
-                const loginStatus = data.is_logged_in ? '✅ Logged in' : '❌ Not logged in';
+                const loginStatus = data.is_logged_in ? '✅' : '❌';
 
                 // Get SafetyGuard status
                 const safetyStatus = SafetyGuard.getStatus();
-                const safetyDisplay = safetyStatus.enabled ? '🛡️ Safe' : '🚨 Blocked';
 
                 // Build content
                 const content = `
-                    <div style="margin-bottom: 8px;">
+                    <div style="margin-bottom: 8px;"><strong>BAF Agent Status</strong></div>
-                        <strong>BAF Agent Status</strong>
+
+                    <div style="margin-bottom: 4px;">
+                        <span id="safety-toggle-btn" style="color: ${safetyStatus.enabled ? '#28a745' : '#dc3545'}; cursor: pointer; padding: 2px 4px; border-radius: 3px; border: 1px solid ${safetyStatus.enabled ? '#28a745' : '#dc3545'}; background: ${safetyStatus.enabled ? 'rgba(40, 167, 69, 0.1)' : 'rgba(220, 53, 69, 0.1)'}; transition: all 0.2s ease;" title="Click to toggle safety status">🛟 Safety: ${safetyStatus.enabled ? '🛡️ Safe' : '🚨 Blocked'}</span>
                     </div>
                     <div style="margin-bottom: 4px;">
-                        <span style="color: #007bff;">${statusDisplay}</span>
+                        <span id="debug-toggle-btn" style="color: ${data.is_debug ? '#17a2b8' : '#6c757d'}; cursor: pointer; padding: 2px 4px; border-radius: 3px; border: 1px solid ${data.is_debug ? '#17a2b8' : '#6c757d'}; background: ${data.is_debug ? 'rgba(23, 162, 184, 0.1)' : 'rgba(108, 117, 125, 0.1)'}; transition: all 0.2s ease;" title="Click to toggle debug mode">🐛 Debug: ${data.is_debug ? '✔️ ON' : '❌ OFF'}</span>
                     </div>
                     <div style="margin-bottom: 4px;">
-                        <span style="color: #28a745;">${safetyDisplay}</span>
+                        <span style="color: #007bff;">Bot Status: ${statusDisplay}</span>
+                    </div>
+                    <div style="margin-bottom: 4px;">
+                        <span style="color: #e83e8c;">🌐 Server: ${serverLabel} ${serverConnected}</span>
+                    </div>
+                    <div style="margin-bottom: 4px;">
+                        <span style="color: #fd7e14;">👤 Login:${loginStatus}</span>
                     </div>
                     <div style="margin-bottom: 4px;">
                         <span style="color: #ffc107;">Task: ${taskName}</span>
@@ -1651,24 +1594,46 @@ Popup Opener: ${popups || 'None'}
                     <div style="margin-bottom: 4px;">
                         <span style="color: #6f42c1;">Page: ${pageDisplay}</span>
                     </div>
-                    <div style="margin-bottom: 4px;">
+                     
-                        <span style="color: #fd7e14;">${loginStatus}</span>
-                    </div>
-                    <div style="margin-bottom: 4px;">
-                        <span style="color: #e83e8c;">Server: ${serverLabel}</span>
-                    </div>
                     ${data.error_message ? `<div style="color: #dc3545; margin-top: 4px;">Error: ${data.error_message}</div>` : ''}
                 `;
 
                 // Update content (excluding position button)
-                const contentDiv = UI.statusOverlay.element.querySelector('.baf-content') ||
+                const contentDiv = UI.statusOverlay.element.querySelector('.baf-content') || document.createElement('div');
-                    document.createElement('div');
                 contentDiv.className = 'baf-content';
                 contentDiv.innerHTML = content;
 
                 if (!UI.statusOverlay.element.querySelector('.baf-content')) {
                     UI.statusOverlay.element.appendChild(contentDiv);
                 }
+
+                // Add event listener for safety toggle button
+                const toggleBtn = contentDiv.querySelector('#safety-toggle-btn');
+                if (toggleBtn) {
+                    toggleBtn.onclick = () => {
+                        const currentStatus = SafetyGuard.getStatus();
+                        if (currentStatus.enabled) {
+                            SafetyGuard.disable();
+                        } else {
+                            SafetyGuard.enable();
+                        }
+                        // Update the content to reflect the change
+                        UI.statusOverlay.updateContent();
+                    };
+                }
+
+                // Add event listener for debug toggle button
+                const debugToggleBtn = contentDiv.querySelector('#debug-toggle-btn');
+                if (debugToggleBtn) {
+                    debugToggleBtn.onclick = () => {
+                        const currentData = APP_STATE.getData();
+                        const newDebugState = !currentData.is_debug;
+                        APP_STATE.update({ is_debug: newDebugState });
+                        STORAGE.setDebug(newDebugState);
+                        // Update the content to reflect the change
+                        UI.statusOverlay.updateContent();
+                    };
+                }
             },
 
             // Show status overlay