figma-console-mcp 0.1.0

package/dist/cloudflare/core/config.js

@@ -0,0 +1,161 @@
+/**
+ * Configuration management for Figma Console MCP server
+ */
+import { readFileSync, existsSync } from 'fs';
+import { homedir } from 'os';
+import { join } from 'path';
+/**
+ * Auto-detect server mode based on environment
+ */
+function detectMode() {
+    // If running in Workers environment, return cloudflare
+    if (typeof globalThis !== 'undefined' && 'caches' in globalThis) {
+        return 'cloudflare';
+    }
+    // Explicit env var override
+    const modeEnv = process.env.FIGMA_MCP_MODE?.toLowerCase();
+    if (modeEnv === 'local' || modeEnv === 'cloudflare') {
+        return modeEnv;
+    }
+    // Default to local for Node.js environments
+    return 'local';
+}
+/**
+ * Default configuration values
+ */
+const DEFAULT_CONFIG = {
+    mode: detectMode(),
+    browser: {
+        headless: false,
+        args: [
+            '--disable-blink-features=AutomationControlled',
+            '--disable-dev-shm-usage',
+            '--no-sandbox', // Note: Only use in trusted environments
+        ],
+    },
+    console: {
+        bufferSize: 1000,
+        filterLevels: ['log', 'info', 'warn', 'error', 'debug'],
+        truncation: {
+            maxStringLength: 500,
+            maxArrayLength: 10,
+            maxObjectDepth: 3,
+            removeDuplicates: true,
+        },
+    },
+    screenshots: {
+        defaultFormat: 'png',
+        quality: 90,
+        storePath: join(process.env.TMPDIR || '/tmp', 'figma-console-mcp', 'screenshots'),
+    },
+    local: {
+        debugHost: process.env.FIGMA_DEBUG_HOST || 'localhost',
+        debugPort: parseInt(process.env.FIGMA_DEBUG_PORT || '9222', 10),
+    },
+};
+/**
+ * Possible config file locations (checked in order)
+ */
+const CONFIG_PATHS = [
+    // Environment variable override
+    process.env.FIGMA_CONSOLE_CONFIG,
+    // Project-local config
+    join(process.cwd(), '.figma-console-mcp.json'),
+    join(process.cwd(), 'figma-console-mcp.json'),
+    // User home config
+    join(homedir(), '.config', 'figma-console-mcp', 'config.json'),
+    join(homedir(), '.figma-console-mcp.json'),
+].filter((path) => path !== undefined);
+/**
+ * Load configuration from file or use defaults
+ */
+export function loadConfig() {
+    // Try to load from config file
+    for (const configPath of CONFIG_PATHS) {
+        if (existsSync(configPath)) {
+            try {
+                const fileContent = readFileSync(configPath, 'utf-8');
+                const userConfig = JSON.parse(fileContent);
+                // Deep merge with defaults
+                const config = mergeConfig(DEFAULT_CONFIG, userConfig);
+                return config;
+            }
+            catch (error) {
+                console.error(`Failed to load config from ${configPath}:`, error);
+                // Continue to next config path
+            }
+        }
+    }
+    // No config file found, use defaults
+    return DEFAULT_CONFIG;
+}
+/**
+ * Deep merge two configuration objects
+ */
+function mergeConfig(defaults, overrides) {
+    return {
+        mode: overrides.mode || defaults.mode,
+        browser: {
+            ...defaults.browser,
+            ...(overrides.browser || {}),
+        },
+        console: {
+            ...defaults.console,
+            ...(overrides.console || {}),
+            truncation: {
+                ...defaults.console.truncation,
+                ...(overrides.console?.truncation || {}),
+            },
+        },
+        screenshots: {
+            ...defaults.screenshots,
+            ...(overrides.screenshots || {}),
+        },
+        local: {
+            ...defaults.local,
+            ...(overrides.local || {}),
+        },
+    };
+}
+/**
+ * Validate configuration
+ */
+export function validateConfig(config) {
+    // Validate browser config
+    if (!Array.isArray(config.browser.args)) {
+        throw new Error('browser.args must be an array');
+    }
+    // Validate console config
+    if (config.console.bufferSize <= 0) {
+        throw new Error('console.bufferSize must be positive');
+    }
+    if (!Array.isArray(config.console.filterLevels)) {
+        throw new Error('console.filterLevels must be an array');
+    }
+    // Validate truncation config
+    const { truncation } = config.console;
+    if (truncation.maxStringLength <= 0) {
+        throw new Error('console.truncation.maxStringLength must be positive');
+    }
+    if (truncation.maxArrayLength <= 0) {
+        throw new Error('console.truncation.maxArrayLength must be positive');
+    }
+    if (truncation.maxObjectDepth <= 0) {
+        throw new Error('console.truncation.maxObjectDepth must be positive');
+    }
+    // Validate screenshot config
+    if (!['png', 'jpeg'].includes(config.screenshots.defaultFormat)) {
+        throw new Error('screenshots.defaultFormat must be "png" or "jpeg"');
+    }
+    if (config.screenshots.quality < 0 || config.screenshots.quality > 100) {
+        throw new Error('screenshots.quality must be between 0 and 100');
+    }
+}
+/**
+ * Get configuration with validation
+ */
+export function getConfig() {
+    const config = loadConfig();
+    validateConfig(config);
+    return config;
+}

package/dist/cloudflare/core/console-monitor.js

@@ -0,0 +1,382 @@
+/**
+ * Console Monitor
+ * Captures and manages console logs from Figma plugins via Chrome DevTools Protocol
+ * Monitors both main page console AND Web Worker consoles (where Figma plugins run)
+ */
+import { createChildLogger } from './logger.js';
+const logger = createChildLogger({ component: 'console-monitor' });
+/**
+ * Console Monitor
+ * Listens to page console events and maintains a circular buffer of logs
+ * Also monitors Web Workers to capture Figma plugin console logs
+ */
+export class ConsoleMonitor {
+    constructor(config) {
+        this.logs = [];
+        this.isMonitoring = false;
+        this.page = null; // Supports both puppeteer-core and @cloudflare/puppeteer
+        this.workers = new Set();
+        this.config = config;
+    }
+    /**
+     * Start monitoring console logs on a page
+     * Accepts any puppeteer Page type (puppeteer-core or @cloudflare/puppeteer)
+     */
+    async startMonitoring(page) {
+        if (this.isMonitoring && this.page === page) {
+            logger.info('Already monitoring this page');
+            return;
+        }
+        this.page = page;
+        this.isMonitoring = true;
+        logger.info('Starting console monitoring (page + workers + frames)');
+        // DIAGNOSTIC: Log all frames on the page and add to console
+        const frames = page.frames();
+        logger.info({ frameCount: frames.length }, 'Frames detected on page');
+        // Add diagnostic marker to console logs
+        this.addLog({
+            timestamp: Date.now(),
+            level: 'info',
+            message: `[MCP DIAGNOSTIC] Monitoring started. Detected ${frames.length} frames and ${page.workers().length} workers.`,
+            args: [],
+            source: 'page',
+        });
+        for (const frame of frames) {
+            const frameUrl = frame.url();
+            const frameName = frame.name() || 'unnamed';
+            logger.info({
+                frameUrl,
+                isDetached: frame.isDetached(),
+                name: frameName
+            }, 'Frame details');
+            // Add frame detection to console logs
+            this.addLog({
+                timestamp: Date.now(),
+                level: 'info',
+                message: `[MCP DIAGNOSTIC] Frame detected: ${frameName} - ${frameUrl}`,
+                args: [],
+                source: 'page',
+            });
+        }
+        // Listen to ALL console events (includes main page, iframes, and workers)
+        page.on('console', async (msg) => {
+            try {
+                const location = msg.location();
+                const url = location?.url || 'unknown';
+                const text = msg.text();
+                const type = msg.type();
+                // DIAGNOSTIC: Log every console event with its source
+                logger.info({
+                    type,
+                    url,
+                    textPreview: text.substring(0, 100),
+                    location
+                }, 'Console event captured');
+                const entry = await this.processConsoleMessage(msg, 'page', url);
+                if (entry) {
+                    this.addLog(entry);
+                }
+            }
+            catch (error) {
+                logger.error({ error }, 'Failed to process console message');
+            }
+        });
+        // Listen to page errors
+        page.on('pageerror', (error) => {
+            this.addLog({
+                timestamp: Date.now(),
+                level: 'error',
+                message: error.message,
+                args: [],
+                stackTrace: {
+                    callFrames: error.stack
+                        ? error.stack.split('\n').map((line) => ({
+                            functionName: line.trim(),
+                            url: '',
+                            lineNumber: 0,
+                            columnNumber: 0,
+                        }))
+                        : [],
+                },
+                source: 'page',
+            });
+        });
+        // Monitor existing workers (for Figma plugin console logs)
+        const existingWorkers = page.workers();
+        logger.info({ workerCount: existingWorkers.length }, 'Found existing workers');
+        for (const worker of existingWorkers) {
+            this.attachWorkerListeners(worker);
+        }
+        // Listen for new workers being created (e.g., when plugin starts)
+        page.on('workercreated', (worker) => {
+            logger.info({ workerUrl: worker.url() }, 'New worker created');
+            this.attachWorkerListeners(worker);
+        });
+        // Listen for workers being destroyed
+        page.on('workerdestroyed', (worker) => {
+            logger.info({ workerUrl: worker.url() }, 'Worker destroyed');
+            this.workers.delete(worker);
+        });
+        // Listen for new frames being attached (e.g., when plugin UI loads)
+        page.on('frameattached', (frame) => {
+            const frameUrl = frame.url();
+            const frameName = frame.name() || 'unnamed';
+            logger.info({ frameUrl, frameName }, 'New frame attached');
+            // Add diagnostic marker for new frame
+            this.addLog({
+                timestamp: Date.now(),
+                level: 'info',
+                message: `[MCP DIAGNOSTIC] New frame attached: ${frameName} - ${frameUrl}`,
+                args: [],
+                source: 'page',
+            });
+        });
+        // Listen for frames being detached
+        page.on('framedetached', (frame) => {
+            logger.info({ frameUrl: frame.url() }, 'Frame detached');
+        });
+        logger.info({
+            pageMonitoring: true,
+            workerMonitoring: true,
+            frameMonitoring: true,
+            initialWorkerCount: existingWorkers.length,
+            initialFrameCount: frames.length
+        }, 'Console monitoring started');
+    }
+    /**
+     * Attach console listeners to a Web Worker
+     * This captures Figma plugin console logs
+     */
+    attachWorkerListeners(worker) {
+        this.workers.add(worker);
+        const workerUrl = worker.url();
+        logger.info({ workerUrl }, 'Attaching console listener to worker');
+        // DIAGNOSTIC: Log a marker when worker listener is attached
+        this.addLog({
+            timestamp: Date.now(),
+            level: 'info',
+            message: `[MCP] Worker detected and monitored: ${workerUrl}`,
+            args: [],
+            source: 'plugin',
+            workerUrl,
+        });
+        // Listen to worker console events
+        worker.on('console', async (msg) => {
+            try {
+                logger.info({ workerUrl, type: msg.type(), text: msg.text() }, 'Worker console event received');
+                const entry = await this.processConsoleMessage(msg, 'worker', workerUrl);
+                if (entry) {
+                    this.addLog(entry);
+                }
+            }
+            catch (error) {
+                logger.error({ error, workerUrl }, 'Failed to process worker console message');
+            }
+        });
+        // Worker doesn't have pageerror, but console.error will be captured above
+    }
+    /**
+     * Process console message from Puppeteer
+     * @param msg - Console message from page or worker
+     * @param context - Where the message came from ('page' or 'worker')
+     * @param workerUrl - URL of the worker (if context is 'worker')
+     */
+    async processConsoleMessage(msg, context, workerUrl) {
+        const level = msg.type();
+        // Filter by configured levels
+        if (this.config.filterLevels.length > 0 &&
+            !this.config.filterLevels.includes(level)) {
+            return null;
+        }
+        try {
+            // Extract message text
+            const message = msg.text();
+            // Extract arguments (with truncation)
+            const args = await Promise.all(msg.args().map(async (arg) => {
+                try {
+                    const jsonValue = await arg.jsonValue();
+                    return this.truncateValue(jsonValue);
+                }
+                catch {
+                    return String(arg);
+                }
+            }));
+            // Determine source based on context
+            let source;
+            if (context === 'worker') {
+                // Workers are where Figma plugins run
+                source = 'plugin';
+            }
+            else {
+                // Page console - determine if plugin or figma
+                const location = msg.location();
+                source = this.determineSource(location?.url);
+            }
+            const entry = {
+                timestamp: Date.now(),
+                level,
+                message: this.truncateString(message),
+                args,
+                source,
+            };
+            // Add worker URL metadata for debugging
+            if (workerUrl && context === 'worker') {
+                entry.workerUrl = workerUrl;
+            }
+            // Add stack trace for errors
+            if (level === 'error' && msg.stackTrace) {
+                entry.stackTrace = {
+                    callFrames: msg.stackTrace().callFrames || [],
+                };
+            }
+            return entry;
+        }
+        catch (error) {
+            logger.error({ error, context, workerUrl }, 'Failed to extract console message details');
+            return null;
+        }
+    }
+    /**
+     * Determine if log is from plugin or Figma based on URL
+     */
+    determineSource(url) {
+        if (!url)
+            return 'unknown';
+        // Check for plugin-related URLs
+        // Plugins might run in:
+        // - iframes with plugin-specific URLs
+        // - blob: URLs created by the plugin
+        // - chrome-extension: URLs (for dev mode)
+        // - any URL containing "plugin"
+        if (url.includes('plugin') ||
+            url.includes('iframe') ||
+            url.startsWith('blob:') ||
+            url.startsWith('chrome-extension:') ||
+            url.includes('figma.com/plugin') ||
+            url.includes('/plugin-')) {
+            return 'plugin';
+        }
+        // Main Figma application
+        if (url.includes('figma.com')) {
+            return 'figma';
+        }
+        return 'unknown';
+    }
+    /**
+     * Add log to circular buffer
+     */
+    addLog(entry) {
+        this.logs.push(entry);
+        // Maintain buffer size
+        if (this.logs.length > this.config.bufferSize) {
+            this.logs.shift();
+        }
+        logger.debug({ level: entry.level, source: entry.source }, 'Log captured');
+    }
+    /**
+     * Truncate string to max length
+     */
+    truncateString(str) {
+        const maxLength = this.config.truncation.maxStringLength;
+        if (str.length <= maxLength) {
+            return str;
+        }
+        return str.substring(0, maxLength) + '... (truncated)';
+    }
+    /**
+     * Truncate value (string, array, object) intelligently
+     * Based on AgentDesk pattern to prevent context overflow
+     */
+    truncateValue(value, depth = 0) {
+        const { maxStringLength, maxArrayLength, maxObjectDepth } = this.config.truncation;
+        // Max depth reached
+        if (depth >= maxObjectDepth) {
+            return '[Max depth reached]';
+        }
+        // Handle null/undefined
+        if (value === null || value === undefined) {
+            return value;
+        }
+        // Handle strings
+        if (typeof value === 'string') {
+            return this.truncateString(value);
+        }
+        // Handle arrays
+        if (Array.isArray(value)) {
+            const truncated = value.slice(0, maxArrayLength).map((item) => this.truncateValue(item, depth + 1));
+            if (value.length > maxArrayLength) {
+                truncated.push(`... (${value.length - maxArrayLength} more items)`);
+            }
+            return truncated;
+        }
+        // Handle objects
+        if (typeof value === 'object') {
+            const result = {};
+            let count = 0;
+            for (const [key, val] of Object.entries(value)) {
+                if (count >= 10) {
+                    // Limit object properties
+                    result['...'] = '(more properties)';
+                    break;
+                }
+                result[key] = this.truncateValue(val, depth + 1);
+                count++;
+            }
+            return result;
+        }
+        // Primitives (number, boolean, etc.)
+        return value;
+    }
+    /**
+     * Get logs with optional filtering
+     */
+    getLogs(options) {
+        let filtered = [...this.logs];
+        // Filter by timestamp
+        if (options?.since) {
+            filtered = filtered.filter((log) => log.timestamp >= options.since);
+        }
+        // Filter by level
+        if (options?.level && options.level !== 'all') {
+            filtered = filtered.filter((log) => log.level === options.level);
+        }
+        // Limit count (get most recent)
+        if (options?.count) {
+            filtered = filtered.slice(-options.count);
+        }
+        return filtered;
+    }
+    /**
+     * Clear log buffer
+     */
+    clear() {
+        const count = this.logs.length;
+        this.logs = [];
+        logger.info({ clearedCount: count }, 'Console buffer cleared');
+        return count;
+    }
+    /**
+     * Stop monitoring
+     */
+    stopMonitoring() {
+        if (!this.isMonitoring) {
+            return;
+        }
+        this.isMonitoring = false;
+        this.page = null;
+        logger.info('Console monitoring stopped');
+    }
+    /**
+     * Get monitoring status
+     */
+    getStatus() {
+        return {
+            isMonitoring: this.isMonitoring,
+            logCount: this.logs.length,
+            bufferSize: this.config.bufferSize,
+            workerCount: this.workers.size,
+            oldestTimestamp: this.logs[0]?.timestamp,
+            newestTimestamp: this.logs[this.logs.length - 1]?.timestamp,
+        };
+    }
+}