@atezer/figma-mcp-bridge 1.4.0 → 1.4.1

package/dist/cloudflare/index.js

@@ -1,1061 +0,0 @@
-#!/usr/bin/env node
-/**
- * F-MCP ATezer (Figma MCP Bridge) Server
- * Entry point for the MCP server that enables AI assistants to access
- * Figma plugin console logs and screenshots.
- *
- * This implementation uses Cloudflare's McpAgent pattern for deployment
- * on Cloudflare Workers with Browser Rendering API support.
- */
-import { McpAgent } from "agents/mcp";
-import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-import { z } from "zod";
-import { BrowserManager } from "./browser-manager.js";
-import { ConsoleMonitor } from "./core/console-monitor.js";
-import { getConfig } from "./core/config.js";
-import { createChildLogger } from "./core/logger.js";
-import { testBrowserRendering } from "./test-browser.js";
-import { FigmaAPI, extractFileKey } from "./core/figma-api.js";
-import { registerFigmaAPITools } from "./core/figma-tools.js";
-const logger = createChildLogger({ component: "mcp-server" });
-/**
- * F-MCP ATezer Agent
- * Extends McpAgent to provide Figma-specific debugging tools
- */
-export class FigmaMCP extends McpAgent {
-    constructor() {
-        super(...arguments);
-        this.server = new McpServer({
-            name: "F-MCP ATezer",
-            version: "0.1.0",
-        });
-        this.browserManager = null;
-        this.consoleMonitor = null;
-        this.figmaAPI = null;
-        this.config = getConfig();
-        this.sessionId = null;
-    }
-    /**
-     * Refresh an expired OAuth token using the refresh token
-     */
-    async refreshOAuthToken(sessionId, refreshToken) {
-        const env = this.env;
-        if (!env.FIGMA_OAUTH_CLIENT_ID || !env.FIGMA_OAUTH_CLIENT_SECRET) {
-            throw new Error("OAuth not configured on server");
-        }
-        logger.info({ sessionId }, "Attempting to refresh OAuth token");
-        const credentials = btoa(`${env.FIGMA_OAUTH_CLIENT_ID}:${env.FIGMA_OAUTH_CLIENT_SECRET}`);
-        const tokenParams = new URLSearchParams({
-            grant_type: "refresh_token",
-            refresh_token: refreshToken
-        });
-        const tokenResponse = await fetch("https://api.figma.com/v1/oauth/token", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/x-www-form-urlencoded",
-                "Authorization": `Basic ${credentials}`
-            },
-            body: tokenParams.toString()
-        });
-        if (!tokenResponse.ok) {
-            const errorData = await tokenResponse.json().catch(() => ({}));
-            logger.error({ errorData, status: tokenResponse.status }, "Token refresh failed");
-            throw new Error(`Token refresh failed: ${JSON.stringify(errorData)}`);
-        }
-        const tokenData = await tokenResponse.json();
-        // Store refreshed token in KV
-        const tokenKey = `oauth_token:${sessionId}`;
-        const storedToken = {
-            accessToken: tokenData.access_token,
-            refreshToken: tokenData.refresh_token || refreshToken, // Use new refresh token or keep existing
-            expiresAt: Date.now() + (tokenData.expires_in * 1000)
-        };
-        await env.OAUTH_TOKENS.put(tokenKey, JSON.stringify(storedToken), {
-            expirationTtl: tokenData.expires_in
-        });
-        logger.info({ sessionId }, "OAuth token refreshed successfully");
-        return storedToken;
-    }
-    /**
-     * Generate a cryptographically secure random state token for CSRF protection
-     */
-    static generateStateToken() {
-        const array = new Uint8Array(32);
-        crypto.getRandomValues(array);
-        return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
-    }
-    /**
-     * Load or create persistent session ID from Durable Object storage
-     * Uses a fixed session ID for the MCP server to ensure OAuth tokens persist across reconnections
-     */
-    async ensureSessionId() {
-        if (this.sessionId) {
-            return; // Already loaded
-        }
-        // IMPORTANT: Use a fixed session ID for all MCP connections
-        // This ensures OAuth tokens persist across MCP server reconnections
-        // Each user of this MCP server will share the same OAuth token
-        const FIXED_SESSION_ID = "figma-mcp-bridge-default-session";
-        // Try to load from Durable Object storage
-        // @ts-ignore - this.ctx is available in Durable Object context
-        const storage = this.ctx?.storage;
-        if (storage) {
-            try {
-                const storedSessionId = await storage.get('sessionId');
-                if (storedSessionId) {
-                    this.sessionId = storedSessionId;
-                    logger.info({ sessionId: this.sessionId }, "Loaded persistent session ID from storage");
-                    return;
-                }
-                else {
-                    // Store the fixed session ID
-                    this.sessionId = FIXED_SESSION_ID;
-                    await storage.put('sessionId', this.sessionId);
-                    logger.info({ sessionId: this.sessionId }, "Initialized fixed session ID");
-                    return;
-                }
-            }
-            catch (e) {
-                logger.warn({ error: e }, "Failed to access Durable Object storage for session ID");
-            }
-        }
-        // Fallback: use fixed session ID directly
-        this.sessionId = FIXED_SESSION_ID;
-        logger.info({ sessionId: this.sessionId }, "Using fixed session ID (storage unavailable)");
-    }
-    /**
-     * Get session ID for this Durable Object instance
-     * Returns the session ID loaded by ensureSessionId()
-     */
-    getSessionId() {
-        if (!this.sessionId) {
-            // This shouldn't happen if ensureSessionId() was called, but provide fallback
-            this.sessionId = FigmaMCP.generateStateToken();
-            logger.warn({ sessionId: this.sessionId }, "Session ID not initialized, generated ephemeral ID");
-        }
-        return this.sessionId;
-    }
-    /**
-     * Get or create Figma API client with OAuth token from session
-     */
-    async getFigmaAPI() {
-        // Ensure session ID is loaded from storage
-        await this.ensureSessionId();
-        // @ts-ignore - this.env is available in Agent/Durable Object context
-        const env = this.env;
-        // Try OAuth first (per-user authentication)
-        try {
-            const sessionId = this.getSessionId();
-            logger.info({ sessionId }, "Attempting to retrieve OAuth token from KV");
-            // Retrieve token from KV (accessible across all Durable Object instances)
-            const tokenKey = `oauth_token:${sessionId}`;
-            const tokenJson = await env.OAUTH_TOKENS.get(tokenKey);
-            if (!tokenJson) {
-                logger.warn({ sessionId, tokenKey }, "No OAuth token found in KV");
-                throw new Error("No token found");
-            }
-            let tokenData = JSON.parse(tokenJson);
-            logger.info({
-                sessionId,
-                hasToken: !!tokenData?.accessToken,
-                expiresAt: tokenData?.expiresAt,
-                isExpired: tokenData?.expiresAt ? Date.now() > tokenData.expiresAt : null
-            }, "Token retrieval result from KV");
-            if (tokenData?.accessToken) {
-                // Check if token is expired or will expire soon (within 5 minutes)
-                const isExpired = tokenData.expiresAt && Date.now() > tokenData.expiresAt;
-                const willExpireSoon = tokenData.expiresAt && Date.now() > (tokenData.expiresAt - 5 * 60 * 1000);
-                if (isExpired || willExpireSoon) {
-                    if (tokenData.refreshToken) {
-                        try {
-                            // Attempt to refresh the token
-                            tokenData = await this.refreshOAuthToken(sessionId, tokenData.refreshToken);
-                            logger.info({ sessionId }, "Successfully refreshed expired/expiring token");
-                        }
-                        catch (refreshError) {
-                            logger.error({ sessionId, refreshError }, "Failed to refresh token");
-                            throw new Error("Token expired and refresh failed. Please re-authenticate.");
-                        }
-                    }
-                    else {
-                        logger.warn({ sessionId }, "Token expired but no refresh token available");
-                        throw new Error("Token expired. Please re-authenticate.");
-                    }
-                }
-                logger.info({ sessionId }, "Using OAuth token from KV for Figma API");
-                return new FigmaAPI({ accessToken: tokenData.accessToken });
-            }
-            logger.warn({ sessionId }, "OAuth token exists in KV but missing accessToken");
-            throw new Error("Invalid token data");
-        }
-        catch (error) {
-            const errorMessage = error instanceof Error ? error.message : String(error);
-            const sessionId = this.getSessionId();
-            // Check if this is a "no token found" error (user hasn't authenticated yet)
-            if (errorMessage.includes("No token found")) {
-                logger.info({ sessionId }, "No OAuth token found - user needs to authenticate");
-                // No authentication available - direct user to OAuth flow
-                const baseUrl = this.env.MCP_OAUTH_BASE_URL || "https://your-deployment.workers.dev";
-                const authUrl = `${baseUrl.replace(/\/$/, "")}/oauth/authorize?session_id=${sessionId}`;
-                // Only use PAT fallback if explicitly configured AND no OAuth token exists
-                if (env?.FIGMA_ACCESS_TOKEN) {
-                    logger.warn("FIGMA_ACCESS_TOKEN fallback is deprecated. User should authenticate via OAuth for proper per-user authentication.");
-                    return new FigmaAPI({ accessToken: env.FIGMA_ACCESS_TOKEN });
-                }
-                throw new Error(JSON.stringify({
-                    error: "authentication_required",
-                    message: "Please authenticate with Figma to use API features",
-                    auth_url: authUrl,
-                    instructions: "Your browser will open automatically to complete authentication. If it doesn't, copy the auth_url and open it manually."
-                }));
-            }
-            // For other OAuth errors (expired token, refresh failed, etc.), do NOT fall back to PAT
-            logger.error({ error, sessionId }, "OAuth token retrieval failed - re-authentication required");
-            const baseUrl = this.env.MCP_OAUTH_BASE_URL || "https://your-deployment.workers.dev";
-            const authUrl = `${baseUrl.replace(/\/$/, "")}/oauth/authorize?session_id=${sessionId}`;
-            throw new Error(JSON.stringify({
-                error: "oauth_error",
-                message: errorMessage,
-                auth_url: authUrl,
-                instructions: "Please re-authenticate with Figma. Your browser will open automatically."
-            }));
-        }
-    }
-    /**
-     * Initialize browser and console monitoring
-     */
-    async ensureInitialized() {
-        try {
-            // Ensure session ID is loaded from storage first
-            await this.ensureSessionId();
-            if (!this.browserManager) {
-                logger.info("Initializing BrowserManager");
-                // Access env from Durable Object context
-                // @ts-ignore - this.env is available in Agent/Durable Object context
-                const env = this.env;
-                if (!env) {
-                    throw new Error("Environment not available - this.env is undefined");
-                }
-                if (!env.BROWSER) {
-                    throw new Error("BROWSER binding not found in environment. Check wrangler.jsonc configuration.");
-                }
-                logger.info("Creating BrowserManager with BROWSER binding");
-                this.browserManager = new BrowserManager(env, this.config.browser);
-            }
-            if (!this.consoleMonitor) {
-                logger.info("Initializing ConsoleMonitor");
-                this.consoleMonitor = new ConsoleMonitor(this.config.console);
-                // Start browser and begin monitoring
-                logger.info("Getting browser page");
-                const page = await this.browserManager.getPage();
-                logger.info("Starting console monitoring");
-                await this.consoleMonitor.startMonitoring(page);
-                logger.info("Browser and console monitor initialized successfully");
-            }
-        }
-        catch (error) {
-            logger.error({ error }, "Failed to initialize browser/monitor");
-            throw new Error(`Initialization failed: ${error instanceof Error ? error.message : String(error)}`);
-        }
-    }
-    async init() {
-        // Tool 1: Get Console Logs
-        this.server.tool("figma_get_console_logs", "Retrieve console logs from Figma. Captures all plugin console output including [Main], [Swapper], etc. prefixes. Call figma_navigate first to initialize browser monitoring.", {
-            count: z.number().optional().default(100).describe("Number of recent logs to retrieve"),
-            level: z
-                .enum(["log", "info", "warn", "error", "debug", "all"])
-                .optional()
-                .default("all")
-                .describe("Filter by log level"),
-            since: z
-                .number()
-                .optional()
-                .describe("Only logs after this timestamp (Unix ms)"),
-        }, async ({ count, level, since }) => {
-            try {
-                await this.ensureInitialized();
-                if (!this.consoleMonitor) {
-                    throw new Error("Console monitor not initialized");
-                }
-                const logs = this.consoleMonitor.getLogs({
-                    count,
-                    level,
-                    since,
-                });
-                // Add AI instruction when no logs are found
-                const responseData = {
-                    logs,
-                    totalCount: logs.length,
-                    oldestTimestamp: logs[0]?.timestamp,
-                    newestTimestamp: logs[logs.length - 1]?.timestamp,
-                    status: this.consoleMonitor.getStatus(),
-                };
-                // If no logs found, add helpful AI instruction
-                if (logs.length === 0) {
-                    responseData.ai_instruction = "No console logs found. This usually means the Figma plugin hasn't run since monitoring started. Please inform the user: 'No console logs found yet. Try running your Figma plugin now, then I'll check for logs again.' The MCP only captures logs AFTER monitoring starts - it cannot retrieve historical logs from before the browser connected.";
-                }
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: JSON.stringify(responseData, null, 2),
-                        },
-                    ],
-                };
-            }
-            catch (error) {
-                logger.error({ error }, "Failed to get console logs");
-                const errorMessage = error instanceof Error ? error.message : String(error);
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: JSON.stringify({
-                                error: errorMessage,
-                                message: "Failed to retrieve console logs. Make sure to call figma_navigate first to initialize the browser.",
-                                hint: "Try: figma_navigate({ url: 'https://www.figma.com/design/your-file' })",
-                            }, null, 2),
-                        },
-                    ],
-                    isError: true,
-                };
-            }
-        });
-        // Tool 2: Take Screenshot (using Figma REST API)
-        // Note: For screenshots of specific components, use figma_get_component_image instead
-        this.server.tool("figma_take_screenshot", "Export an image of the currently viewed Figma page or specific node using Figma's REST API. Returns an image URL (valid for 30 days). For specific components, use figma_get_component_image instead.", {
-            nodeId: z
-                .string()
-                .optional()
-                .describe("Optional node ID to screenshot. If not provided, uses the currently viewed page/frame from the browser URL."),
-            scale: z
-                .number()
-                .min(0.01)
-                .max(4)
-                .optional()
-                .default(2)
-                .describe("Image scale factor (0.01-4, default: 2 for high quality)"),
-            format: z
-                .enum(["png", "jpg", "svg", "pdf"])
-                .optional()
-                .default("png")
-                .describe("Image format (default: png)"),
-        }, async ({ nodeId, scale, format }) => {
-            try {
-                const api = await this.getFigmaAPI();
-                // Get current URL to extract file key and node ID if not provided
-                const currentUrl = this.browserManager?.getCurrentUrl() || null;
-                if (!currentUrl) {
-                    throw new Error("No Figma file open. Either provide a nodeId parameter or call figma_navigate first to open a Figma file.");
-                }
-                const fileKey = extractFileKey(currentUrl);
-                if (!fileKey) {
-                    throw new Error(`Invalid Figma URL: ${currentUrl}`);
-                }
-                // Extract node ID from URL if not provided
-                let targetNodeId = nodeId;
-                if (!targetNodeId) {
-                    const urlObj = new URL(currentUrl);
-                    const nodeIdParam = urlObj.searchParams.get('node-id');
-                    if (nodeIdParam) {
-                        // Convert 123-456 to 123:456
-                        targetNodeId = nodeIdParam.replace(/-/g, ':');
-                    }
-                    else {
-                        throw new Error("No node ID found. Either provide nodeId parameter or ensure the Figma URL contains a node-id parameter (e.g., ?node-id=123-456)");
-                    }
-                }
-                logger.info({ fileKey, nodeId: targetNodeId, scale, format }, "Rendering image via Figma API");
-                // Use Figma REST API to get image
-                const result = await api.getImages(fileKey, targetNodeId, {
-                    scale,
-                    format: format === 'jpg' ? 'jpg' : format, // normalize jpeg -> jpg
-                    contents_only: true,
-                });
-                const imageUrl = result.images[targetNodeId];
-                if (!imageUrl) {
-                    throw new Error(`Failed to render image for node ${targetNodeId}. The node may not exist or may not be renderable.`);
-                }
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: JSON.stringify({
-                                fileKey,
-                                nodeId: targetNodeId,
-                                imageUrl,
-                                scale,
-                                format,
-                                expiresIn: "30 days",
-                                note: "Image URL provided above. Use this URL to view or download the screenshot. URLs expire after 30 days.",
-                            }, null, 2),
-                        },
-                    ],
-                };
-            }
-            catch (error) {
-                logger.error({ error }, "Failed to capture screenshot");
-                const errorMessage = error instanceof Error ? error.message : String(error);
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: JSON.stringify({
-                                error: errorMessage,
-                                message: "Failed to capture screenshot via Figma API",
-                                hint: "Make sure you've called figma_navigate to open a file, or provide a valid nodeId parameter",
-                            }, null, 2),
-                        },
-                    ],
-                    isError: true,
-                };
-            }
-        });
-        // Tool 3: Watch Console (Real-time streaming)
-        this.server.tool("figma_watch_console", {
-            duration: z
-                .number()
-                .optional()
-                .default(30)
-                .describe("How long to watch in seconds"),
-            level: z
-                .enum(["log", "info", "warn", "error", "debug", "all"])
-                .optional()
-                .default("all")
-                .describe("Filter by log level"),
-        }, async ({ duration, level }) => {
-            await this.ensureInitialized();
-            if (!this.consoleMonitor) {
-                throw new Error("Console monitor not initialized. Call figma_navigate first.");
-            }
-            const consoleMonitor = this.consoleMonitor;
-            if (!consoleMonitor.getStatus().isMonitoring) {
-                throw new Error("Console monitoring not active. Call figma_navigate first.");
-            }
-            const startTime = Date.now();
-            const endTime = startTime + duration * 1000;
-            const startLogCount = consoleMonitor.getStatus().logCount;
-            // Wait for the specified duration while collecting logs
-            await new Promise(resolve => setTimeout(resolve, duration * 1000));
-            // Get logs captured during watch period
-            const watchedLogs = consoleMonitor.getLogs({
-                level: level === 'all' ? undefined : level,
-                since: startTime,
-            });
-            const endLogCount = consoleMonitor.getStatus().logCount;
-            const newLogsCount = endLogCount - startLogCount;
-            return {
-                content: [
-                    {
-                        type: "text",
-                        text: JSON.stringify({
-                            status: "completed",
-                            duration: `${duration} seconds`,
-                            startTime: new Date(startTime).toISOString(),
-                            endTime: new Date(endTime).toISOString(),
-                            filter: level,
-                            statistics: {
-                                totalLogsInBuffer: endLogCount,
-                                logsAddedDuringWatch: newLogsCount,
-                                logsMatchingFilter: watchedLogs.length,
-                            },
-                            logs: watchedLogs,
-                        }, null, 2),
-                    },
-                ],
-            };
-        });
-        // Tool 4: Reload Plugin
-        this.server.tool("figma_reload_plugin", {
-            clearConsole: z
-                .boolean()
-                .optional()
-                .default(true)
-                .describe("Clear console logs before reload"),
-        }, async ({ clearConsole: clearConsoleBefore }) => {
-            try {
-                await this.ensureInitialized();
-                if (!this.browserManager) {
-                    throw new Error("Browser manager not initialized");
-                }
-                // Clear console buffer if requested
-                let clearedCount = 0;
-                if (clearConsoleBefore && this.consoleMonitor) {
-                    clearedCount = this.consoleMonitor.clear();
-                }
-                // Reload the page
-                await this.browserManager.reload();
-                const currentUrl = this.browserManager.getCurrentUrl();
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: JSON.stringify({
-                                status: "reloaded",
-                                timestamp: Date.now(),
-                                url: currentUrl,
-                                consoleCleared: clearConsoleBefore,
-                                clearedCount: clearConsoleBefore ? clearedCount : 0,
-                            }, null, 2),
-                        },
-                    ],
-                };
-            }
-            catch (error) {
-                logger.error({ error }, "Failed to reload plugin");
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: JSON.stringify({
-                                error: String(error),
-                                message: "Failed to reload plugin",
-                            }, null, 2),
-                        },
-                    ],
-                    isError: true,
-                };
-            }
-        });
-        // Tool 5: Clear Console
-        this.server.tool("figma_clear_console", {}, async () => {
-            try {
-                await this.ensureInitialized();
-                if (!this.consoleMonitor) {
-                    throw new Error("Console monitor not initialized");
-                }
-                const clearedCount = this.consoleMonitor.clear();
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: JSON.stringify({
-                                status: "cleared",
-                                clearedCount,
-                                timestamp: Date.now(),
-                                ai_instruction: "⚠️ CRITICAL: Console cleared successfully, but this operation disrupts the monitoring connection. You MUST reconnect the MCP server using `/mcp reconnect figma-mcp-bridge` before calling figma_get_console_logs again. Best practice: Avoid clearing console - filter/parse logs instead to maintain monitoring connection.",
-                            }, null, 2),
-                        },
-                    ],
-                };
-            }
-            catch (error) {
-                logger.error({ error }, "Failed to clear console");
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: JSON.stringify({
-                                error: String(error),
-                                message: "Failed to clear console buffer",
-                            }, null, 2),
-                        },
-                    ],
-                    isError: true,
-                };
-            }
-        });
-        // Tool 6: Navigate to Figma
-        this.server.tool("figma_navigate", {
-            url: z
-                .string()
-                .url()
-                .describe("Figma URL to navigate to (e.g., https://www.figma.com/design/abc123)"),
-        }, async ({ url }) => {
-            try {
-                await this.ensureInitialized();
-                if (!this.browserManager) {
-                    throw new Error("Browser manager not initialized");
-                }
-                // Navigate to the URL
-                await this.browserManager.navigateToFigma(url);
-                // Give page time to load and start capturing logs
-                await new Promise((resolve) => setTimeout(resolve, 2000));
-                const currentUrl = this.browserManager.getCurrentUrl();
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: JSON.stringify({
-                                status: "navigated",
-                                url: currentUrl,
-                                timestamp: Date.now(),
-                                message: "Browser navigated to Figma. Console monitoring is active.",
-                            }, null, 2),
-                        },
-                    ],
-                };
-            }
-            catch (error) {
-                logger.error({ error }, "Failed to navigate to Figma");
-                const errorMessage = error instanceof Error ? error.message : String(error);
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: JSON.stringify({
-                                error: errorMessage,
-                                message: "Failed to navigate to Figma URL",
-                                details: errorMessage.includes("BROWSER")
-                                    ? "Browser Rendering API binding is missing. This is a configuration issue."
-                                    : "Unable to launch browser or navigate to URL.",
-                                troubleshooting: [
-                                    "Verify the Figma URL is valid and accessible",
-                                    "Check that the Browser Rendering API is properly configured in wrangler.jsonc",
-                                    "Try again in a few moments if this is a temporary issue"
-                                ]
-                            }, null, 2),
-                        },
-                    ],
-                    isError: true,
-                };
-            }
-        });
-        // Tool 7: Get Status
-        this.server.tool("figma_get_status", {}, async () => {
-            try {
-                const browserRunning = this.browserManager?.isRunning() ?? false;
-                const monitorStatus = this.consoleMonitor?.getStatus() ?? null;
-                const currentUrl = this.browserManager?.getCurrentUrl() ?? null;
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: JSON.stringify({
-                                browser: {
-                                    running: browserRunning,
-                                    currentUrl,
-                                },
-                                consoleMonitor: monitorStatus,
-                                initialized: this.browserManager !== null && this.consoleMonitor !== null,
-                                timestamp: Date.now(),
-                            }, null, 2),
-                        },
-                    ],
-                };
-            }
-            catch (error) {
-                logger.error({ error }, "Failed to get status");
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: JSON.stringify({
-                                error: String(error),
-                                message: "Failed to retrieve status",
-                            }, null, 2),
-                        },
-                    ],
-                    isError: true,
-                };
-            }
-        });
-        // Register Figma API tools (Tools 8-14)
-        registerFigmaAPITools(this.server, async () => await this.getFigmaAPI(), () => this.browserManager?.getCurrentUrl() || null, () => this.consoleMonitor || null, () => this.browserManager || null, () => this.ensureInitialized());
-    }
-}
-/**
- * Cloudflare Workers fetch handler
- * Routes requests to appropriate MCP endpoints
- */
-export default {
-    async fetch(request, env, ctx) {
-        const url = new URL(request.url);
-        // SSE endpoint for remote MCP clients
-        if (url.pathname === "/sse" || url.pathname === "/sse/message") {
-            return FigmaMCP.serveSSE("/sse").fetch(request, env, ctx);
-        }
-        // HTTP endpoint for direct MCP communication
-        if (url.pathname === "/mcp") {
-            return FigmaMCP.serve("/mcp").fetch(request, env, ctx);
-        }
-        // OAuth authorization initiation
-        if (url.pathname === "/oauth/authorize") {
-            const sessionId = url.searchParams.get("session_id");
-            if (!sessionId) {
-                return new Response("Missing session_id parameter", { status: 400 });
-            }
-            // Check if OAuth credentials are configured
-            if (!env.FIGMA_OAUTH_CLIENT_ID) {
-                return new Response(JSON.stringify({
-                    error: "OAuth not configured",
-                    message: "Server administrator needs to configure FIGMA_OAUTH_CLIENT_ID",
-                    docs: "https://github.com/atezer/FMCP#oauth-setup"
-                }), {
-                    status: 500,
-                    headers: { "Content-Type": "application/json" }
-                });
-            }
-            // Generate cryptographically secure state token for CSRF protection
-            const stateToken = FigmaMCP.generateStateToken();
-            // Store state token with sessionId in KV (10 minute expiration)
-            await env.OAUTH_STATE.put(stateToken, sessionId, {
-                expirationTtl: 600 // 10 minutes
-            });
-            const redirectUri = `${url.origin}/oauth/callback`;
-            const figmaAuthUrl = new URL("https://www.figma.com/oauth");
-            figmaAuthUrl.searchParams.set("client_id", env.FIGMA_OAUTH_CLIENT_ID);
-            figmaAuthUrl.searchParams.set("redirect_uri", redirectUri);
-            figmaAuthUrl.searchParams.set("scope", "file_content:read,library_content:read,file_variables:read");
-            figmaAuthUrl.searchParams.set("state", stateToken);
-            figmaAuthUrl.searchParams.set("response_type", "code");
-            return Response.redirect(figmaAuthUrl.toString(), 302);
-        }
-        // OAuth callback handler
-        if (url.pathname === "/oauth/callback") {
-            const code = url.searchParams.get("code");
-            const stateToken = url.searchParams.get("state");
-            const error = url.searchParams.get("error");
-            // Handle OAuth errors
-            if (error) {
-                return new Response(`<html><body>
-						<h1>❌ Authentication Failed</h1>
-						<p>Error: ${error}</p>
-						<p>Description: ${url.searchParams.get("error_description") || "Unknown error"}</p>
-						<p>You can close this window and try again.</p>
-					</body></html>`, {
-                    status: 400,
-                    headers: { "Content-Type": "text/html" }
-                });
-            }
-            if (!code || !stateToken) {
-                return new Response("Missing code or state parameter", { status: 400 });
-            }
-            // Validate state token (CSRF protection)
-            const sessionId = await env.OAUTH_STATE.get(stateToken);
-            if (!sessionId) {
-                return new Response(`<html><body>
-						<h1>❌ Invalid or Expired Request</h1>
-						<p>The authentication request has expired or is invalid.</p>
-						<p>Please try authenticating again.</p>
-					</body></html>`, {
-                    status: 400,
-                    headers: { "Content-Type": "text/html" }
-                });
-            }
-            // Delete state token after validation (one-time use)
-            await env.OAUTH_STATE.delete(stateToken);
-            try {
-                // Exchange authorization code for access token
-                // Use Basic auth in Authorization header (Figma's recommended method)
-                const credentials = btoa(`${env.FIGMA_OAUTH_CLIENT_ID}:${env.FIGMA_OAUTH_CLIENT_SECRET}`);
-                const tokenParams = new URLSearchParams({
-                    redirect_uri: `${url.origin}/oauth/callback`,
-                    code,
-                    grant_type: "authorization_code"
-                });
-                const tokenResponse = await fetch("https://api.figma.com/v1/oauth/token", {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/x-www-form-urlencoded",
-                        "Authorization": `Basic ${credentials}`
-                    },
-                    body: tokenParams.toString()
-                });
-                if (!tokenResponse.ok) {
-                    const errorText = await tokenResponse.text();
-                    let errorData;
-                    try {
-                        errorData = JSON.parse(errorText);
-                    }
-                    catch {
-                        errorData = { error: "Unknown error", raw: errorText, status: tokenResponse.status };
-                    }
-                    logger.error({ errorData, status: tokenResponse.status }, "Token exchange failed");
-                    throw new Error(`Token exchange failed: ${JSON.stringify(errorData)}`);
-                }
-                const tokenData = await tokenResponse.json();
-                const accessToken = tokenData.access_token;
-                const refreshToken = tokenData.refresh_token;
-                const expiresIn = tokenData.expires_in;
-                logger.info({
-                    sessionId,
-                    hasAccessToken: !!accessToken,
-                    accessTokenPreview: accessToken ? accessToken.substring(0, 10) + "..." : null,
-                    hasRefreshToken: !!refreshToken,
-                    expiresIn
-                }, "Token exchange successful");
-                // IMPORTANT: Use KV storage for tokens since Durable Object storage is instance-specific
-                // Store token in Workers KV so it's accessible across all Durable Object instances
-                const tokenKey = `oauth_token:${sessionId}`;
-                const storedToken = {
-                    accessToken,
-                    refreshToken,
-                    expiresAt: Date.now() + (expiresIn * 1000)
-                };
-                // Store in KV with 90-day expiration (matching token lifetime)
-                await env.OAUTH_TOKENS.put(tokenKey, JSON.stringify(storedToken), {
-                    expirationTtl: expiresIn
-                });
-                logger.info({ sessionId, tokenKey }, "Token stored successfully in KV");
-                return new Response(`<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Authentication Successful</title>
-	<link rel="icon" type="image/jpeg" href="https://p198.p4.n0.cdn.zight.com/items/Qwu1Dywx/b61b7b8f-05dc-4063-8a40-53fa4f8e3e97.jpg">
-	<style>
-		* {
-			margin: 0;
-			padding: 0;
-			box-sizing: border-box;
-		}
-		body {
-			font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-			background: #ffffff;
-			color: #000000;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			min-height: 100vh;
-			padding: 24px;
-		}
-		.container {
-			max-width: 480px;
-			text-align: center;
-		}
-		.icon {
-			width: 64px;
-			height: 64px;
-			margin: 0 auto 24px;
-			background: #18a0fb;
-			border-radius: 50%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			font-size: 32px;
-			color: white;
-		}
-		h1 {
-			font-size: 32px;
-			font-weight: 700;
-			margin-bottom: 16px;
-			letter-spacing: -0.02em;
-		}
-		p {
-			font-size: 16px;
-			color: #666666;
-			line-height: 1.6;
-			margin-bottom: 32px;
-		}
-		.button {
-			display: inline-block;
-			padding: 12px 24px;
-			background: #000000;
-			color: #ffffff;
-			text-decoration: none;
-			border-radius: 8px;
-			font-weight: 500;
-			font-size: 16px;
-			border: none;
-			cursor: pointer;
-			transition: background 0.2s;
-		}
-		.button:hover {
-			background: #333333;
-		}
-		.footer {
-			margin-top: 48px;
-			font-size: 14px;
-			color: #999999;
-		}
-	</style>
-</head>
-<body>
-	<div class="container">
-		<div class="icon">✓</div>
-		<h1>Authentication successful</h1>
-		<p>You've successfully connected F-MCP ATezer to your Figma account. You can now close this window and return to Claude.</p>
-		<button class="button" onclick="window.close()">Close this window</button>
-		<div class="footer">This window will automatically close in 5 seconds</div>
-	</div>
-	<script>
-		setTimeout(() => window.close(), 5000);
-	</script>
-</body>
-</html>`, {
-                    headers: {
-                        "Content-Type": "text/html; charset=utf-8"
-                    }
-                });
-            }
-            catch (error) {
-                logger.error({ error, sessionId }, "OAuth callback failed");
-                return new Response(`<html><body>
-						<h1>❌ Authentication Error</h1>
-						<p>Failed to complete authentication: ${error instanceof Error ? error.message : String(error)}</p>
-						<p>Please try again or contact support.</p>
-					</body></html>`, {
-                    status: 500,
-                    headers: { "Content-Type": "text/html" }
-                });
-            }
-        }
-        // Health check endpoint
-        if (url.pathname === "/health") {
-            return new Response(JSON.stringify({
-                status: "healthy",
-                service: "F-MCP ATezer",
-                version: "0.1.0",
-                endpoints: ["/sse", "/mcp", "/test-browser", "/oauth/authorize", "/oauth/callback"],
-                oauth_configured: !!env.FIGMA_OAUTH_CLIENT_ID
-            }), {
-                headers: { "Content-Type": "application/json" },
-            });
-        }
-        // Browser Rendering API test endpoint
-        if (url.pathname === "/test-browser") {
-            const results = await testBrowserRendering(env);
-            return new Response(JSON.stringify(results, null, 2), {
-                headers: { "Content-Type": "application/json" },
-            });
-        }
-        // Serve favicon
-        if (url.pathname === "/favicon.ico") {
-            // Redirect to custom Figma Console icon
-            return Response.redirect("https://p198.p4.n0.cdn.zight.com/items/Qwu1Dywx/b61b7b8f-05dc-4063-8a40-53fa4f8e3e97.jpg", 302);
-        }
-        // Root path - serve landing page with proper meta tags
-        if (url.pathname === "/") {
-            return new Response(`<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>F-MCP ATezer</title>
-	<link rel="icon" type="image/jpeg" href="https://p198.p4.n0.cdn.zight.com/items/Qwu1Dywx/b61b7b8f-05dc-4063-8a40-53fa4f8e3e97.jpg">
-	<meta name="description" content="Model Context Protocol server for Figma debugging and design system extraction">
-	<style>
-		* {
-			margin: 0;
-			padding: 0;
-			box-sizing: border-box;
-		}
-		body {
-			font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-			background: #ffffff;
-			color: #000000;
-			line-height: 1.5;
-		}
-		.header {
-			padding: 24px 48px;
-			border-bottom: 1px solid #e5e5e5;
-		}
-		.logo {
-			display: flex;
-			align-items: center;
-			gap: 12px;
-			font-size: 18px;
-			font-weight: 600;
-		}
-		.logo img {
-			width: 32px;
-			height: 32px;
-		}
-		.container {
-			max-width: 1200px;
-			margin: 0 auto;
-			padding: 80px 48px;
-		}
-		h1 {
-			font-size: 64px;
-			font-weight: 700;
-			margin-bottom: 24px;
-			letter-spacing: -0.02em;
-			line-height: 1.1;
-		}
-		.subtitle {
-			font-size: 20px;
-			color: #666666;
-			margin-bottom: 48px;
-			max-width: 600px;
-		}
-		.cta {
-			display: inline-flex;
-			align-items: center;
-			gap: 8px;
-			padding: 12px 24px;
-			background: #000000;
-			color: #ffffff;
-			text-decoration: none;
-			border-radius: 8px;
-			font-weight: 500;
-			font-size: 16px;
-			transition: background 0.2s;
-		}
-		.cta:hover {
-			background: #333333;
-		}
-		.features {
-			display: grid;
-			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-			gap: 32px;
-			margin-top: 80px;
-		}
-		.feature {
-			padding: 24px;
-			border: 1px solid #e5e5e5;
-			border-radius: 8px;
-		}
-		.feature h3 {
-			font-size: 20px;
-			font-weight: 600;
-			margin-bottom: 12px;
-		}
-		.feature p {
-			color: #666666;
-			font-size: 15px;
-		}
-		.footer {
-			padding: 48px;
-			text-align: center;
-			color: #999999;
-			font-size: 14px;
-			border-top: 1px solid #e5e5e5;
-			margin-top: 120px;
-		}
-	</style>
-</head>
-<body>
-	<div class="header">
-		<div class="logo">
-			<img src="https://p198.p4.n0.cdn.zight.com/items/Qwu1Dywx/b61b7b8f-05dc-4063-8a40-53fa4f8e3e97.jpg" alt="F-MCP ATezer">
-			F-MCP ATezer
-		</div>
-	</div>
-	<div class="container">
-		<h1>Debug Figma plugins<br>with AI assistance</h1>
-		<p class="subtitle">Model Context Protocol server that gives AI assistants real-time access to Figma console logs, design system data, and visual debugging tools.</p>
-		<a href="https://github.com/atezer/FMCP" class="cta">
-			<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-				<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
-			</svg>
-			View Documentation
-		</a>
-		<div class="features">
-			<div class="feature">
-				<h3>Real-time Console Access</h3>
-				<p>Capture plugin console logs, errors, and stack traces as they happen</p>
-			</div>
-			<div class="feature">
-				<h3>Design System Extraction</h3>
-				<p>Pull variables, components, and styles directly from Figma files</p>
-			</div>
-			<div class="feature">
-				<h3>Visual Debugging</h3>
-				<p>Take screenshots and export component images for visual reference</p>
-			</div>
-		</div>
-	</div>
-	<div class="footer">
-		© 2025 F-MCP ATezer · MIT License
-	</div>
-</body>
-</html>`, {
-                headers: { "Content-Type": "text/html; charset=utf-8" }
-            });
-        }
-        return new Response("Not found", { status: 404 });
-    },
-};