content.js

/**
 * RPC Extension Content Script
 * Handles automation execution in the page context
 */

// ========== EFFECTS STATE ==========

// Wait for effects to be ready
function waitForEffects(callback, maxWait = 2000) {
  const start = Date.now();
  function check() {
    if (window.rpcEffects) {
      callback();
    } else if (Date.now() - start < maxWait) {
      requestAnimationFrame(check);
    }
  }
  check();
}

// Track scan start time for minimum duration
let scanStartTime = 0;
const MIN_SCAN_DURATION = 3000; // 3 seconds minimum

// Start effects for automation
function startAutomationEffects(method) {
  waitForEffects(() => {
    // Always show glow during automation
    window.rpcEffects.startAgentGlow();

    // Show scan effect for DOM snapshot (reading structure)
    if (method === 'take_dom_snapshot') {
      scanStartTime = Date.now();
      window.rpcEffects.startScan();
    }
    // Show screenshot effect for GUI snapshot (capturing pixels)
    else if (method === 'take_gui_snapshot') {
      window.rpcEffects.startScreenshot();
    }
  });
}

// Stop effects after automation completes
function stopAutomationEffects(method) {
  waitForEffects(() => {
    // Stop scan effect for DOM snapshot (with minimum duration)
    if (method === 'take_dom_snapshot') {
      const elapsed = Date.now() - scanStartTime;
      const remaining = MIN_SCAN_DURATION - elapsed;

      if (remaining > 0) {
        // Wait for minimum duration before stopping
        setTimeout(() => {
          window.rpcEffects.stopScan();
        }, remaining);
      } else {
        window.rpcEffects.stopScan();
      }
    }
    // Screenshot effect auto-stops after its animation completes (2.1s)
    // No need to manually stop it here
    // Note: We don't stop the glow here - it persists until session disconnect
  });
}

// ========== EFFECT FORWARDING ==========

// Listen for stop_automation_effects message (sent when session disconnects)
browser.runtime.onMessage.addListener((message, sender) => {
  if (message.type !== 'stop_automation_effects') {
    return false;
  }

  waitForEffects(() => {
    window.rpcEffects.stopAgentGlow();
    window.rpcEffects.stopScan();
  });

  return false;
});


// Listen for result events from other extensions and forward to background script
// Background script publishes results to RPC service via Centrifugo
window.addEventListener('webfuse-rpc-result', (event) => {
  const detail = event.detail;

  // Forward to background script which will post via Centrifugo
  browser.runtime.sendMessage({
    type: 'post_rpc_result',
    id: detail.id,
    status: detail.status,
    result: detail.result,
    error: detail.error
  });
});

// ========== AUTOMATION HANDLING ==========

/**
 * Map old method names to new namespaced API structure
 * Old: automation.left_click(target, moveMouse)
 * New: automation.act.click(target, { button: 'left', mouseMove })
 */
const METHOD_MAP = {
  // Actuation methods -> automation.act.*
  'mouse_move': { namespace: 'act', method: 'mouseMove' },
  'scroll': { namespace: 'act', method: 'scroll' },
  'left_click': { namespace: 'act', method: 'click', button: 'left' },
  'middle_click': { namespace: 'act', method: 'click', button: 'middle' },
  'right_click': { namespace: 'act', method: 'click', button: 'right' },
  'type': { namespace: 'act', method: 'type' },
  'key_press': { namespace: 'act', method: 'keyPress' },
  // Perception methods -> automation.see.*
  'take_dom_snapshot': { namespace: 'see', method: 'domSnapshot' },
  'take_gui_snapshot': { namespace: 'see', method: 'guiSnapshot' },
  // Utility methods -> automation.*
  'wait': { namespace: null, method: 'wait' }
};

// Listen for automation execution requests from background script
browser.runtime.onMessage.addListener((message, sender) => {
  if (message.type !== 'execute_automation') {
    return false;
  }

  const { method, params, id, skipResultPost } = message;

  // Execute async without returning a Promise
  (async () => {
    // Start visual effects
    startAutomationEffects(method);

    try {
      // Access the Automation API
      const automation = browser.webfuseSession.automation;

      if (!automation) {
        throw new Error('Automation API not available');
      }

      // Check if method is mapped and exists
      const mapping = METHOD_MAP[method];
      if (!mapping) {
        throw new Error(`Unknown automation method: ${method}`);
      }

      // Verify the method exists on the API
      if (mapping.namespace) {
        const ns = automation[mapping.namespace];
        if (!ns || typeof ns[mapping.method] !== 'function') {
          throw new Error(`Automation method not found: automation.${mapping.namespace}.${mapping.method}`);
        }
      } else {
        if (typeof automation[mapping.method] !== 'function') {
          throw new Error(`Automation method not found: automation.${mapping.method}`);
        }
      }

      // Convert params to arguments for the new API
      const args = convertParamsToNewApi(method, params);

      // Call the function directly on its namespace to preserve 'this' binding
      let result;
      if (mapping.namespace) {
        const ns = automation[mapping.namespace];
        result = await ns[mapping.method](...args);
      } else {
        result = await automation[mapping.method](...args);
      }

      // Stop scan effect (glow continues)
      stopAutomationEffects(method);

      // Serialize the result (async for ImageBitmap conversion)
      const serializedResult = await serializeResult(result);

      // Post result via background script (unless background is handling it)
      if (!skipResultPost) {
        browser.runtime.sendMessage({
          type: 'post_rpc_result',
          id: id,
          status: 'success',
          result: serializedResult
        });
      }

    } catch (error) {
      console.error(`[RPC Extension] ${method} failed:`, error);

      // Stop scan effect on error too
      stopAutomationEffects(method);

      // Post error via background script (always post errors, even if skipResultPost is true)
      browser.runtime.sendMessage({
        type: 'post_rpc_result',
        id: id,
        status: 'error',
        error: error.message
      });
    }
  })();

  // Don't return anything - fire and forget
  return false;
});

/**
 * Convert parameters to arguments for the new namespaced API
 *
 * New API signatures:
 * - act.click(target, { button, mouseMove })
 * - act.type(target, text, { overwrite, timePerChar, mouseMove })
 * - act.scroll(target, direction, amount)
 * - act.mouseMove(target, persistent)
 * - act.keyPress(target, key, options)
 * - see.domSnapshot(config)
 * - see.guiSnapshot()
 * - wait(ms)
 */
function convertParamsToNewApi(methodName, params) {
  if (!params) return [];

  const mapping = METHOD_MAP[methodName];

  switch (methodName) {
    case 'mouse_move':
      // act.mouseMove(target, persistent)
      return [params.target, params.persistent];

    case 'scroll':
      // act.scroll(target, direction, amount)
      return [params.target, params.direction, params.amount];

    case 'left_click':
    case 'middle_click':
    case 'right_click':
      // act.click(target, { button, mouseMove })
      return [params.target, {
        button: mapping.button,
        mouseMove: params.moveMouse
      }];

    case 'type':
      // act.type(target, text, { overwrite, timePerChar, mouseMove })
      return [
        params.target,
        params.text,
        {
          mouseMove: params.moveMouse,
          overwrite: params.overwrite,
          timePerChar: params.timePerChar
        }
      ];

    case 'key_press':
      // act.keyPress(target, key, options)
      return [params.target, params.key, params.options];

    case 'take_dom_snapshot':
      // see.domSnapshot(config) - returns raw HTML
      const snapshotConfig = params.options || {};

      // Map old option names to new ones if needed
      const config = {
        root: snapshotConfig.rootSelector || snapshotConfig.root,
        crossframe: snapshotConfig.crossframe,
        crossshadow: snapshotConfig.crossshadow,
        revealMaskedElements: snapshotConfig.revealMaskedElements
      };

      // Clean undefined values
      Object.keys(config).forEach(k => config[k] === undefined && delete config[k]);

      // Return empty array if no config, otherwise config object
      return Object.keys(config).length > 0 ? [config] : [];

    case 'take_gui_snapshot':
      // see.guiSnapshot() - no parameters
      return [];

    case 'wait':
      // wait(ms)
      return [params.ms];

    default:
      return [params];
  }
}

/**
 * Serialize result for transmission
 */
async function serializeResult(result) {
  if (result === null || result === undefined) {
    return result;
  }

  // Handle ImageBitmap - convert to base64 PNG
  if (typeof ImageBitmap !== 'undefined' && result instanceof ImageBitmap) {
    try {
      // MCP has ~1MB limit, target 800KB base64 to be safe
      const MAX_SIZE_KB = 800;
      const MAX_ATTEMPTS = 20;

      // Start with reasonable initial size (800px max dimension)
      let maxDim = 800;
      let width = result.width;
      let height = result.height;

      // Initial resize
      if (width > maxDim || height > maxDim) {
        const scale = maxDim / Math.max(width, height);
        width = Math.floor(width * scale);
        height = Math.floor(height * scale);
      }

      // Create canvas
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(result, 0, 0, width, height);

      // Aggressively compress until under size limit
      let quality = 0.5; // Start lower
      let dataUrl = canvas.toDataURL('image/jpeg', quality);
      let sizeKB = dataUrl.length / 1024;
      let attempts = 0;

      // Main compression loop
      while (sizeKB > MAX_SIZE_KB && attempts < MAX_ATTEMPTS) {
        attempts++;

        // Try reducing quality first (faster)
        if (quality > 0.15) {
          quality = Math.max(0.15, quality - 0.05);
          dataUrl = canvas.toDataURL('image/jpeg', quality);
          sizeKB = dataUrl.length / 1024;
          if (sizeKB <= MAX_SIZE_KB) break;
        }

        // If quality is already very low, reduce dimensions instead
        if (quality <= 0.2) {
          const scale = 0.85;
          width = Math.floor(width * scale);
          height = Math.floor(height * scale);

          // Don't go too small
          if (width < 200 || height < 200) break;

          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(result, 0, 0, width, height);
          dataUrl = canvas.toDataURL('image/jpeg', quality);
          sizeKB = dataUrl.length / 1024;
        }
      }

      if (sizeKB > MAX_SIZE_KB) {
        console.warn(`[RPC Extension] Image compression: ${Math.round(sizeKB)}KB exceeds ${MAX_SIZE_KB}KB limit`);
      }

      return {
        type: 'image',
        data: dataUrl,
        width: width,
        height: height,
        mimeType: 'image/jpeg'
      };
    } catch (error) {
      console.error('[RPC Extension] Failed to convert ImageBitmap:', error);
      return {
        type: 'ImageBitmap',
        width: result.width,
        height: result.height,
        error: error.message
      };
    }
  }

  if (result instanceof Element) {
    return {
      type: 'Element',
      tagName: result.tagName,
      id: result.id,
      className: result.className
    };
  }

  if (Array.isArray(result)) {
    return await Promise.all(result.map(item => serializeResult(item)));
  }

  if (typeof result === 'object') {
    const serialized = {};
    for (const [key, value] of Object.entries(result)) {
      try {
        serialized[key] = await serializeResult(value);
      } catch (error) {
        serialized[key] = `[Error: ${error.message}]`;
      }
    }
    return serialized;
  }

  if (typeof result === 'function') {
    return '[Function]';
  }

  return result;
}

// ========== GLOBAL RPC API FOR CUSTOM EXTENSIONS ==========
//
// Custom extensions can use window.webfuse.rpc to register functions that are
// callable via RPC. This is the primary API for creating custom RPC-enabled extensions.
//
// Example usage:
//
//   window.webfuse.rpc.register('rotate_page', async (params) => {
//     const { degrees = 360, duration = 3000 } = params;
//     // ... animation code ...
//     return { success: true, degrees, duration };
//   });

// Track registered handlers for custom functions
const registeredHandlers = new Map();

// Use webfuse.rpc namespace, preserving any existing webfuse global
window.webfuse = window.webfuse || {};
window.webfuse.rpc = window.webfuse.rpc || {};
Object.assign(window.webfuse.rpc, {
  /**
   * Register a custom RPC function
   * @param {string} name - Function name (e.g., 'rotate_page')
   * @param {Function} handler - Async function(params) => result
   */
  register: (name, handler) => {
    registeredHandlers.set(name, handler);
    console.log(`[RPC Extension] Registered custom function: ${name}`);
  },

  /**
   * Unregister a custom RPC function
   * @param {string} name - Function name to unregister
   */
  unregister: (name) => {
    registeredHandlers.delete(name);
    console.log(`[RPC Extension] Unregistered custom function: ${name}`);
  },

  /**
   * Post a successful result back to RPC service (via background script)
   * For advanced use - register() handles this automatically
   * @param {string} id - The RPC request ID
   * @param {any} result - The result data
   */
  postResult: (id, result) => {
    browser.runtime.sendMessage({
      type: 'post_rpc_result',
      id: id,
      status: 'success',
      result: result
    });
  },

  /**
   * Post an error back to RPC service (via background script)
   * For advanced use - register() handles this automatically
   * @param {string} id - The RPC request ID
   * @param {string} error - The error message
   */
  postError: (id, error) => {
    browser.runtime.sendMessage({
      type: 'post_rpc_result',
      id: id,
      status: 'error',
      error: error
    });
  }
});

// Listen for RPC execution requests from background script for custom functions
browser.runtime.onMessage.addListener((message, sender) => {
  if (message.type !== 'execute_effect') {
    return false;
  }

  const { method, params, id } = message;

  // Check if we have a registered handler for this method
  const handler = registeredHandlers.get(method);
  if (!handler) {
    // No handler registered - dispatch DOM event for legacy compatibility
    window.dispatchEvent(new CustomEvent('webfuse-rpc-execute', {
      detail: { method, params, id }
    }));
    return false;
  }

  // Execute the registered handler
  (async () => {
    try {
      const result = await handler(params || {});
      window.webfuse.rpc.postResult(id, result);
    } catch (error) {
      console.error(`[RPC Extension] ${method} failed:`, error);
      window.webfuse.rpc.postError(id, error.message || String(error));
    }
  })();

  return false;
});