MCP-Browser/tools/enableVisualOverlay.js

const browser = require('../browser');

module.exports = async () => {
  await browser.start();
  
  const p = await browser.ensurePage();
  
  await p.addInitScript(`
    (function() {
      if (document.getElementById('mcp-cursor-overlay')) return;
      
      const style = document.createElement('style');
      style.textContent = \`
        #mcp-cursor-overlay {
          all: initial;
          pointer-events: none;
          z-index: 999998;
        }
        #mcp-custom-cursor {
          position: fixed;
          pointer-events: none;
          z-index: 999999;
          display: none;
          filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
          transition: transform 0.05s ease;
        }
        #mcp-scroll-indicator {
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: rgba(59, 130, 246, 0.9);
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          font-size: 12px;
          font-weight: 600;
          color: white;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          transition: opacity 0.3s ease;
        }
        #mcp-scroll-progress {
          position: fixed;
          top: 0;
          left: 0;
          height: 3px;
          background: linear-gradient(90deg, #3B82F6, #8B5CF6);
          z-index: 999999;
          transition: width 0.1s ease;
          box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
        }
        #mcp-action-toast {
          position: fixed;
          top: 20px;
          right: 20px;
          padding: 12px 20px;
          background: rgba(16, 185, 129, 0.95);
          color: white;
          border-radius: 8px;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          font-size: 14px;
          font-weight: 500;
          z-index: 999999;
          transform: translateX(120%);
          transition: transform 0.3s ease, opacity 0.3s ease;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          opacity: 1;
        }
        @media (max-width: 768px) {
          #mcp-scroll-indicator {
            width: 40px;
            height: 40px;
            font-size: 10px;
            bottom: 10px;
            right: 10px;
          }
          #mcp-action-toast {
            top: 10px;
            right: 10px;
            left: 10px;
            font-size: 13px;
            text-align: center;
          }
        }
        @media (max-width: 480px) {
          #mcp-scroll-indicator {
            width: 36px;
            height: 36px;
            font-size: 9px;
            bottom: 8px;
            right: 8px;
          }
        }
      \`;
      document.head.appendChild(style);
      
      const cursor = document.createElement('div');
      cursor.id = 'mcp-cursor-overlay';
      cursor.innerHTML = \`
        <svg id="mcp-custom-cursor" width="32" height="32" viewBox="0 0 32 32">
          <path d="M4 2L28 18L18 20L14 28L10 26L12 18L4 2Z" fill="#3B82F6" stroke="white" stroke-width="1.5"/>
        </svg>
        <div id="mcp-scroll-indicator">0%</div>
        <div id="mcp-scroll-progress"></div>
        <div id="mcp-action-toast">Action completed</div>
      \`;
      document.body.appendChild(cursor);
      
      let cursorTimeout;
      document.addEventListener('mousemove', (e) => {
        const cursorEl = document.getElementById('mcp-custom-cursor');
        cursorEl.style.display = 'block';
        cursorEl.style.left = (e.clientX - 4) + 'px';
        cursorEl.style.top = (e.clientY - 4) + 'px';
        
        clearTimeout(cursorTimeout);
        cursorTimeout = setTimeout(() => {
          cursorEl.style.display = 'none';
        }, 2000);
      });
      
      let scrollTimeout;
      document.addEventListener('scroll', () => {
        const scrollTop = window.scrollY;
        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
        const scrollPercent = docHeight > 0 ? Math.round((scrollTop / docHeight) * 100) : 0;
        
        const indicator = document.getElementById('mcp-scroll-indicator');
        const progress = document.getElementById('mcp-scroll-progress');
        
        indicator.textContent = scrollPercent + '%';
        progress.style.width = scrollPercent + '%';
        
        if (scrollPercent > 0 && scrollPercent < 100) {
          indicator.style.display = 'flex';
        }
        
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(() => {
          indicator.style.opacity = '0.5';
        }, 2000);
      });
    })();
  `);
  
  return { 
    success: true, 
    action: 'enable_visual_overlay',
    message: 'Cursor customizado e indicadores de rolagem ativados (responsivo)'
  };
};