@mp3wizard/figma-console-mcp 1.20.2 → 1.22.1

package/dist/cloudflare/core/figma-api.js

@@ -97,16 +97,7 @@ export class FigmaAPI {
         // OAuth tokens start with 'figu_' and require Authorization: Bearer header
         // Personal Access Tokens use X-Figma-Token header
         const isOAuthToken = this.accessToken.startsWith('figu_');
-        // Debug logging to verify token is being used
-        const tokenPreview = this.accessToken ? `${this.accessToken.substring(0, 10)}...` : 'NO TOKEN';
-        logger.info({
-            url,
-            tokenPreview,
-            hasToken: !!this.accessToken,
-            tokenLength: this.accessToken?.length,
-            isOAuthToken,
-            authMethod: isOAuthToken ? 'Bearer' : 'X-Figma-Token'
-        }, 'Making Figma API request with token');
+        logger.debug({ url, authMethod: isOAuthToken ? 'Bearer' : 'X-Figma-Token' }, 'Making Figma API request');
         const headers = {
             'Content-Type': 'application/json',
             ...(options.headers || {}),

package/dist/cloudflare/core/figma-desktop-connector.js

@@ -1262,6 +1262,8 @@ export class FigmaDesktopConnector {
             throw error;
         }
     }
+    // Component accessibility audit — not supported via legacy CDP transport
+    async auditComponentAccessibility() { throw new Error('Component accessibility audit requires WebSocket transport'); }
     // FigJam operations — not supported via legacy CDP transport
     async createSticky() { throw new Error('FigJam operations require WebSocket transport'); }
     async createStickies() { throw new Error('FigJam operations require WebSocket transport'); }

package/dist/cloudflare/core/websocket-connector.js

@@ -266,6 +266,17 @@ export class WebSocketConnector {
         return this.wsServer.sendCommand('LINT_DESIGN', params, 120000);
     }
     // ============================================================================
+    // Component accessibility audit
+    // ============================================================================
+    async auditComponentAccessibility(nodeId, targetSize) {
+        const params = {};
+        if (nodeId)
+            params.nodeId = nodeId;
+        if (targetSize !== undefined)
+            params.targetSize = targetSize;
+        return this.wsServer.sendCommand('AUDIT_COMPONENT_ACCESSIBILITY', params, 120000);
+    }
+    // ============================================================================
     // FigJam operations
     // ============================================================================
     async createSticky(params) {

package/dist/cloudflare/core/websocket-server.js

@@ -71,6 +71,8 @@ export class FigmaWebSocketServer extends EventEmitter {
         this.documentChangeBufferSize = 200;
         /** Cached plugin UI HTML content — loaded once and served to bootloader requests */
         this._pluginUIContent = null;
+        /** Heartbeat interval for detecting dead connections via ping/pong */
+        this._heartbeatInterval = null;
         this.options = options;
         this._startedAt = Date.now();
     }
@@ -103,12 +105,15 @@ export class FigmaWebSocketServer extends EventEmitter {
         }
         // Health/version endpoint
         if (url === '/health' || url === '/') {
+            const now = Date.now();
+            const connectedClients = Array.from(this.clients.values()).filter(c => c.ws.readyState === WebSocket.OPEN && (now - c.lastPongAt) < 90000).length;
             res.writeHead(200, { 'Content-Type': 'application/json' });
             res.end(JSON.stringify({
                 status: 'ok',
                 version: SERVER_VERSION,
                 clients: this.clients.size,
-                uptime: Math.floor((Date.now() - this._startedAt) / 1000),
+                connectedClients,
+                uptime: Math.floor((now - this._startedAt) / 1000),
             }));
             return;
         }
@@ -185,6 +190,7 @@ export class FigmaWebSocketServer extends EventEmitter {
                 // Start listening on the HTTP server (which also handles WS upgrades)
                 this.httpServer.listen(this.options.port, this.options.host || 'localhost', () => {
                     this._isStarted = true;
+                    this.startHeartbeat();
                     logger.info({ port: this.options.port, host: this.options.host || 'localhost' }, 'WebSocket bridge server started (with HTTP plugin UI endpoint)');
                     resolve();
                 });
@@ -242,6 +248,18 @@ export class FigmaWebSocketServer extends EventEmitter {
                     ws.on('error', (error) => {
                         logger.error({ error }, 'WebSocket client error');
                     });
+                    // Track pong responses for heartbeat-based liveness detection.
+                    // Browser WebSocket clients auto-respond to pings per RFC 6455 —
+                    // no plugin-side code changes needed.
+                    ws.isAlive = true;
+                    ws.on('pong', () => {
+                        ws.isAlive = true;
+                        // Update lastPongAt on the named client if identified
+                        const found = this.findClientByWs(ws);
+                        if (found) {
+                            found.client.lastPongAt = Date.now();
+                        }
+                    });
                 });
             }
             catch (error) {
@@ -420,6 +438,7 @@ export class FigmaWebSocketServer extends EventEmitter {
             documentChanges: existing?.documentChanges || [],
             consoleLogs: existing?.consoleLogs || [],
             lastActivity: Date.now(),
+            lastPongAt: Date.now(),
             gracePeriodTimer: null,
         });
         // Most recently connected file becomes active (user just opened the plugin there).
@@ -528,11 +547,35 @@ export class FigmaWebSocketServer extends EventEmitter {
         });
     }
     /**
-     * Check if any named client is connected (transport availability check)
+     * Start the heartbeat interval that pings all connected clients every 30s.
+     * Detects silently dropped connections (e.g., macOS sleep, network change)
+     * that the OS TCP keepalive would take 30-120s to catch.
+     * Browser WebSocket clients auto-respond to pings per RFC 6455.
+     */
+    startHeartbeat() {
+        this._heartbeatInterval = setInterval(() => {
+            if (!this.wss)
+                return;
+            for (const ws of this.wss.clients) {
+                if (ws.isAlive === false) {
+                    logger.info('Terminating unresponsive WebSocket client (missed heartbeat pong)');
+                    ws.terminate();
+                    continue;
+                }
+                ws.isAlive = false;
+                ws.ping();
+            }
+        }, 30000);
+    }
+    /**
+     * Check if any named client is connected (transport availability check).
+     * Checks both socket readyState and heartbeat pong freshness to avoid
+     * reporting phantom-connected state on silently dropped connections.
      */
     isClientConnected() {
+        const now = Date.now();
         for (const [, client] of this.clients) {
-            if (client.ws.readyState === WebSocket.OPEN) {
+            if (client.ws.readyState === WebSocket.OPEN && (now - client.lastPongAt) < 90000) {
                 return true;
             }
         }
@@ -687,6 +730,16 @@ export class FigmaWebSocketServer extends EventEmitter {
         }
         return files;
     }
+    /**
+     * Get the last pong timestamp for the active client.
+     * Returns null if no active client or no pong received yet.
+     */
+    getActiveClientLastPongAt() {
+        if (!this._activeFileKey)
+            return null;
+        const client = this.clients.get(this._activeFileKey);
+        return client?.lastPongAt ?? null;
+    }
     /**
      * Set the active file by fileKey. Returns true if the file is connected.
      */
@@ -745,6 +798,11 @@ export class FigmaWebSocketServer extends EventEmitter {
      * Stop the server and clean up all connections
      */
     async stop() {
+        // Clear heartbeat interval
+        if (this._heartbeatInterval) {
+            clearInterval(this._heartbeatInterval);
+            this._heartbeatInterval = null;
+        }
         // Clear all per-client grace period timers
         for (const [, client] of this.clients) {
             if (client.gracePeriodTimer) {

package/dist/cloudflare/core/write-tools.js

@@ -2055,13 +2055,17 @@ return {
         }
     });
     // Tool: Lint Design for accessibility and quality issues
-    server.tool("figma_lint_design", "Run accessibility (WCAG) and design quality checks on the current page or a specific node tree. " +
-        "Checks color contrast ratios, text sizing, touch targets, hardcoded values, detached components, " +
-        "naming conventions, and layout quality. Returns categorized findings with severity levels. " +
+    server.tool("figma_lint_design", "Run comprehensive accessibility (WCAG 2.2) and design quality checks on the current page or a specific node tree. " +
+        "WCAG checks (13 rules): color contrast (AA), non-text contrast (1.4.11), color-only differentiation (1.4.1), " +
+        "focus indicators (2.4.7), text sizing, touch targets, line height, letter spacing, paragraph spacing (1.4.12), " +
+        "image alt text (1.1.1), heading hierarchy (1.3.1), reflow/responsive (1.4.10), and reading order (1.3.2). " +
+        "Design system checks: hardcoded colors, missing text styles, default names, detached components. " +
+        "Layout checks: missing auto-layout, empty containers. " +
+        "Returns categorized findings with severity levels (critical/warning/info). " +
         "Use natural language like 'check my design for accessibility issues' or 'lint this page'. " +
         "Requires Desktop Bridge plugin.", {
         nodeId: z.string().optional().describe("Node ID to lint (defaults to current page)"),
-        rules: z.array(z.string()).optional().describe("Rule filter: ['all'] (default), ['wcag'], ['design-system'], ['layout'], or specific rule IDs like ['wcag-contrast', 'detached-component']"),
+        rules: z.array(z.string()).optional().describe("Rule filter: ['all'] (default), ['wcag'] (13 WCAG rules), ['design-system'], ['layout'], or specific rule IDs like ['wcag-contrast', 'wcag-focus-indicator', 'wcag-image-alt']"),
         maxDepth: z.number().optional().describe("Maximum tree depth to traverse (default: 10)"),
         maxFindings: z.number().optional().describe("Maximum findings before stopping (default: 100)"),
     }, async ({ nodeId, rules, maxDepth, maxFindings }) => {
@@ -2096,4 +2100,45 @@ return {
             };
         }
     });
+    // Tool: Audit Component Accessibility
+    server.tool("figma_audit_component_accessibility", "Deep accessibility audit for a specific component or component set. Produces a scorecard covering: " +
+        "state coverage (default/hover/focus/disabled/error/active/loading), focus indicator quality and contrast, " +
+        "non-color differentiation (WCAG 1.4.1), target size consistency (WCAG 2.5.8), annotation completeness, " +
+        "and color-blind simulation (protanopia/deuteranopia/tritanopia). Returns per-category scores (0-100) " +
+        "and prioritized recommendations. Use after designing a component to validate accessibility before handoff. " +
+        "Requires Desktop Bridge plugin.", {
+        nodeId: z.string().optional().describe("Node ID of a COMPONENT_SET, COMPONENT, or INSTANCE to audit. Falls back to current selection if omitted."),
+        targetSize: z.number().optional().describe("Minimum touch target size in px (default: 24 per WCAG 2.5.8). Use 44 for iOS or 48 for Android guidelines."),
+    }, async ({ nodeId, targetSize }) => {
+        try {
+            const connector = await getDesktopConnector();
+            const result = await connector.auditComponentAccessibility(nodeId, targetSize);
+            if (!result.success) {
+                throw new Error(result.error || "Audit failed");
+            }
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify(result.data || result, null, 2),
+                    },
+                ],
+            };
+        }
+        catch (error) {
+            logger.error({ error }, "Failed to audit component accessibility");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error instanceof Error ? error.message : String(error),
+                            hint: "Make sure the Desktop Bridge plugin is running. Provide a COMPONENT_SET nodeId or select one in Figma.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
 }

package/dist/cloudflare/index.js

@@ -23,6 +23,7 @@ import { registerCommentTools } from "./core/comment-tools.js";
 import { registerAnnotationTools } from "./core/annotation-tools.js";
 import { registerDeepComponentTools } from "./core/deep-component-tools.js";
 import { registerDesignSystemTools } from "./core/design-system-tools.js";
+import { registerAccessibilityTools } from "./core/accessibility-tools.js";
 import { generatePairingCode } from "./core/cloud-websocket-relay.js";
 import { CloudWebSocketConnector } from "./core/cloud-websocket-connector.js";
 import { registerWriteTools } from "./core/write-tools.js";
@@ -68,7 +69,7 @@ export class FigmaConsoleMCPv3 extends McpAgent {
         super(...arguments);
         this.server = new McpServer({
             name: "Figma Console MCP",
-            version: "1.20.1",
+            version: "1.22.0",
         });
         this.browserManager = null;
         this.consoleMonitor = null;
@@ -795,6 +796,14 @@ export class FigmaConsoleMCPv3 extends McpAgent {
         // Register Design System Kit tool
         registerDesignSystemTools(this.server, async () => await this.getFigmaAPI(), () => this.browserManager?.getCurrentUrl() || null, undefined, // variablesCache
         { isRemoteMode: true });
+        // Register code-side accessibility scanning (axe-core + JSDOM)
+        // Note: May not work in Cloudflare Workers due to JSDOM dependency
+        try {
+            registerAccessibilityTools(this.server);
+        }
+        catch (e) {
+            // Silently skip if axe-core/jsdom not available in Workers environment
+        }
         // Note: MCP Apps (Token Browser, Dashboard) are registered in local.ts only
         // They require Node.js file system APIs that don't work in Cloudflare Workers
     }
@@ -1046,7 +1055,7 @@ export default {
             });
             const statelessServer = new McpServer({
                 name: "Figma Console MCP",
-                version: "1.20.1",
+                version: "1.22.0",
             });
             // ================================================================
             // Cloud Write Relay — Pairing Tool (stateless /mcp path)
@@ -1510,9 +1519,7 @@ export default {
                 const expiresIn = tokenData.expires_in;
                 logger.info({
                     sessionId,
-                    hasAccessToken: !!accessToken,
-                    accessTokenPreview: accessToken ? accessToken.substring(0, 10) + "..." : null,
-                    hasRefreshToken: !!refreshToken,
+                    hasTokens: !!accessToken && !!refreshToken,
                     expiresIn
                 }, "Token exchange successful");
                 // IMPORTANT: Use KV storage for tokens since Durable Object storage is instance-specific
@@ -1683,7 +1690,7 @@ export default {
             return new Response(JSON.stringify({
                 status: "healthy",
                 service: "Figma Console MCP",
-                version: "1.20.1",
+                version: "1.22.0",
                 endpoints: {
                     mcp: ["/sse", "/mcp"],
                     oauth_mcp_spec: ["/.well-known/oauth-authorization-server", "/authorize", "/token", "/oauth/register"],
@@ -1729,13 +1736,13 @@ export default {
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Figma Console MCP - The Most Comprehensive MCP Server for Figma</title>
 	<link rel="icon" type="image/svg+xml" href="https://docs.figma-console-mcp.southleft.com/favicon.svg">
-	<meta name="description" content="Turn your Figma design system into a living API. 92+ tools give AI assistants deep access to design tokens, component specs, variables, and programmatic design creation.">
+	<meta name="description" content="Turn your Figma design system into a living API. 94+ tools give AI assistants deep access to design tokens, component specs, variables, and programmatic design creation.">
 
 	<!-- Open Graph -->
 	<meta property="og:type" content="website">
 	<meta property="og:url" content="https://figma-console-mcp.southleft.com">
 	<meta property="og:title" content="Figma Console MCP - Turn Your Design System Into a Living API">
-	<meta property="og:description" content="The most comprehensive MCP server for Figma. 92+ tools give AI assistants deep access to design tokens, components, variables, and programmatic design creation.">
+	<meta property="og:description" content="The most comprehensive MCP server for Figma. 94+ tools give AI assistants deep access to design tokens, components, variables, and programmatic design creation.">
 	<meta property="og:image" content="https://docs.figma-console-mcp.southleft.com/images/og-image.jpg">
 	<meta property="og:image:width" content="1200">
 	<meta property="og:image:height" content="630">
@@ -1743,7 +1750,7 @@ export default {
 	<!-- Twitter -->
 	<meta name="twitter:card" content="summary_large_image">
 	<meta name="twitter:title" content="Figma Console MCP - Turn Your Design System Into a Living API">
-	<meta name="twitter:description" content="The most comprehensive MCP server for Figma. 92+ tools give AI assistants deep access to design tokens, components, variables, and programmatic design creation.">
+	<meta name="twitter:description" content="The most comprehensive MCP server for Figma. 94+ tools give AI assistants deep access to design tokens, components, variables, and programmatic design creation.">
 	<meta name="twitter:image" content="https://docs.figma-console-mcp.southleft.com/images/og-image.jpg">
 
 	<meta name="theme-color" content="#0D9488">
@@ -2630,7 +2637,7 @@ export default {
 			<div class="grid-cell showcase-cell rule-left">
 				<div class="showcase-label">What AI Can Access</div>
 				<div class="showcase-stat">
-					<span class="number">92+</span>
+					<span class="number">94+</span>
 					<span class="label">MCP tools for Figma</span>
 				</div>
 				<div class="capability-list">

package/dist/core/accessibility-tools.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Code-side accessibility scanning via axe-core + JSDOM.
+ *
+ * Delegates all rule logic to axe-core (Deque) — the MCP never owns
+ * a rule database. JSDOM provides a lightweight DOM for structural checks
+ * (~50 rules: ARIA, semantics, alt text, form labels, headings, landmarks).
+ *
+ * Visual rules (color contrast, focus-visible) are NOT available via JSDOM —
+ * those are handled by the design-side figma_lint_design tool.
+ */
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+/**
+ * Extract a CodeSpec.accessibility object from HTML + axe-core results.
+ * This bridges Phase 3 (code scanning) → Phase 4 (parity comparison).
+ *
+ * Parses the HTML to extract semantic element, ARIA attributes, and states.
+ * Uses axe-core results to infer what the code supports.
+ */
+export declare function axeResultsToCodeSpec(html: string, axeResults: any): Record<string, any>;
+export declare function registerAccessibilityTools(server: McpServer): void;
+//# sourceMappingURL=accessibility-tools.d.ts.map

package/dist/core/accessibility-tools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility-tools.d.ts","sourceRoot":"","sources":["../../src/core/accessibility-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AA6FpE;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAoGvF;AA+DD,wBAAgB,0BAA0B,CACzC,MAAM,EAAE,SAAS,GACf,IAAI,CAyEN"}