ai-debug-local-mcp/core/assets/js/hooks/live_view_debug_panel.js

🎯 ENHANCED AI GUIDANCE v4.1.2: Dramatically improved tool descriptions help AI users choose the right tools instead of 'close enough' options. Ultra-fast keyboard automation (10x speed), universal recording, multi-ecosystem debugging support, and compreh

// LiveView Debug Panel Hook
// Provides client-side functionality for the debug panel

export default {
  mounted() {
    this.handleKeyboardShortcuts()
    this.initializeDebugOverlay()
    this.setupMessageInterception()
  },

  handleKeyboardShortcuts() {
    // Ctrl+Shift+D to toggle debug panel
    document.addEventListener('keydown', (e) => {
      if (e.ctrlKey && e.shiftKey && e.key === 'D') {
        e.preventDefault()
        this.pushEvent('toggle_debug_panel', {})
      }
    })
  },

  initializeDebugOverlay() {
    // Create overlay for highlighting debug annotations
    const overlay = document.createElement('div')
    overlay.id = 'liveview-debug-overlay'
    overlay.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
    `
    document.body.appendChild(overlay)

    // Highlight elements with debug annotations on hover
    document.addEventListener('mouseover', (e) => {
      const target = e.target
      const debugAttrs = this.getDebugAttributes(target)
      
      if (Object.keys(debugAttrs).length > 0) {
        this.highlightElement(target, debugAttrs)
      }
    })

    document.addEventListener('mouseout', (e) => {
      this.clearHighlight()
    })
  },

  setupMessageInterception() {
    // Intercept Phoenix socket messages for debugging
    const socket = window.liveSocket.socket
    if (!socket) return

    const originalOnMessage = socket.onMessage
    socket.onMessage = (event) => {
      // Log socket messages to debug panel
      if (this.el.dataset.captureMessages === 'true') {
        this.pushEvent('socket_message', {
          type: 'incoming',
          data: event.data,
          timestamp: Date.now()
        })
      }
      
      return originalOnMessage.call(socket, event)
    }
  },

  getDebugAttributes(element) {
    const attrs = {}
    for (const attr of element.attributes) {
      if (attr.name.startsWith('data-phx-')) {
        attrs[attr.name] = attr.value
      }
    }
    return attrs
  },

  highlightElement(element, debugAttrs) {
    const rect = element.getBoundingClientRect()
    const overlay = document.getElementById('liveview-debug-overlay')
    
    // Create highlight box
    const highlight = document.createElement('div')
    highlight.className = 'debug-highlight'
    highlight.style.cssText = `
      position: absolute;
      top: ${rect.top + window.scrollY}px;
      left: ${rect.left + window.scrollX}px;
      width: ${rect.width}px;
      height: ${rect.height}px;
      border: 2px solid #3B82F6;
      background: rgba(59, 130, 246, 0.1);
      pointer-events: none;
    `
    
    // Create info tooltip
    const tooltip = document.createElement('div')
    tooltip.className = 'debug-tooltip'
    tooltip.style.cssText = `
      position: absolute;
      top: ${rect.top + window.scrollY - 30}px;
      left: ${rect.left + window.scrollX}px;
      background: #1F2937;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-family: monospace;
      white-space: nowrap;
      z-index: 10000;
    `
    
    const component = debugAttrs['data-phx-component'] || debugAttrs['data-phx-view']
    tooltip.textContent = component || 'LiveView Element'
    
    overlay.innerHTML = ''
    overlay.appendChild(highlight)
    overlay.appendChild(tooltip)
  },

  clearHighlight() {
    const overlay = document.getElementById('liveview-debug-overlay')
    if (overlay) {
      overlay.innerHTML = ''
    }
  },

  destroyed() {
    // Clean up overlay
    const overlay = document.getElementById('liveview-debug-overlay')
    if (overlay) {
      overlay.remove()
    }
  }
}