@mp3wizard/figma-console-mcp 1.23.1 → 1.27.2

package/figma-desktop-bridge/code.js

@@ -1,22 +1,23 @@
 // Figma Desktop Bridge - MCP Plugin
-// Bridges Figma API to MCP clients via plugin UI window
-// Supports: Variables, Components, Styles, and more
-// Uses postMessage to communicate with UI, bypassing worker sandbox limitations
-// Puppeteer can access UI iframe's window context to retrieve data
+// Bridges the Figma Plugin API to MCP clients via the plugin's UI iframe.
+// Supports: Variables, Components, Styles, and more.
+// Uses postMessage to communicate with ui.html (bypassing worker sandbox limitations),
+// which then forwards messages to the MCP server over the WebSocket bridge.
 
 // Plugin version — sent in FILE_INFO for server-side version compatibility checks.
 // The server compares this against its own version to detect stale cached plugins.
-var PLUGIN_VERSION = '1.23.0'; // Kept in sync with package.json by scripts/release.sh — see issue #62.
+var PLUGIN_VERSION = '1.27.1'; // Kept in sync with package.json by scripts/release.sh — see issue #62.
 
 console.log('🌉 [Desktop Bridge] Plugin loaded (v' + PLUGIN_VERSION + ')');
 
 // Show minimal UI - compact status indicator
-figma.showUI(__html__, { width: 140, height: 50, visible: true, themeColors: true });
+figma.showUI(__html__, { width: 180, height: 50, visible: true, themeColors: true });
 
 // ============================================================================
 // CONSOLE CAPTURE — Intercept console.* in the QuickJS sandbox and forward
 // to ui.html via postMessage so the WebSocket bridge can relay them to the MCP
-// server. This enables console monitoring without CDP.
+// server. This is the only console-capture path in local mode (no browser
+// process is involved).
 // ============================================================================
 (function() {
   var levels = ['log', 'info', 'warn', 'error', 'debug'];
@@ -220,59 +221,6 @@ function hexToFigmaRGB(hex) {
 // Listen for requests from UI (e.g., component data requests, write operations)
 figma.ui.onmessage = async (msg) => {
 
-  // ============================================================================
-  // BOOT_LOAD_UI - Bootloader fetched fresh UI HTML from the MCP server.
-  // Replace the bootloader with the full, always-up-to-date plugin UI.
-  // This uses figma.showUI() with the HTML string directly — no redirects,
-  // no cross-origin, no CSP issues.
-  // ============================================================================
-  if (msg.type === 'BOOT_LOAD_UI' && msg.html) {
-    console.log('🌉 [Desktop Bridge] Bootloader delivered fresh UI (' + msg.html.length + ' bytes), loading...');
-    figma.showUI(msg.html, { width: 140, height: 50, visible: true, themeColors: true });
-
-    // Re-send variables data to the fresh UI — the original send went to the
-    // bootloader which discarded it. The fresh UI needs it to show "ready" status.
-    (async function() {
-      try {
-        var variables = await figma.variables.getLocalVariablesAsync();
-        var collections = await figma.variables.getLocalVariableCollectionsAsync();
-        figma.ui.postMessage({
-          type: 'VARIABLES_DATA',
-          data: {
-            success: true,
-            timestamp: Date.now(),
-            fileKey: figma.fileKey || null,
-            variables: variables.map(function(v) { return {
-              id: v.id, name: v.name, key: v.key, resolvedType: v.resolvedType,
-              valuesByMode: v.valuesByMode, variableCollectionId: v.variableCollectionId,
-              scopes: v.scopes, codeSyntax: v.codeSyntax || {}, description: v.description, hiddenFromPublishing: v.hiddenFromPublishing
-            }; }),
-            variableCollections: collections.map(function(c) { return {
-              id: c.id, name: c.name, key: c.key, modes: c.modes,
-              defaultModeId: c.defaultModeId, variableIds: c.variableIds
-            }; })
-          }
-        });
-        console.log('🌉 [Desktop Bridge] Re-sent variables to fresh UI (' + variables.length + ' vars)');
-      } catch (e) {
-        console.log('🌉 [Desktop Bridge] Could not re-send variables:', e.message || e);
-      }
-    })();
-    return;
-  }
-
-  // ============================================================================
-  // BOOT_FALLBACK - Bootloader found an old server that doesn't support the
-  // bootloader protocol. Fall back to reloading the cached __html__ which
-  // contains the full UI (for users who haven't switched to the bootloader yet,
-  // __html__ IS the full UI; for bootloader users, this is a no-op reload).
-  // ============================================================================
-  if (msg.type === 'BOOT_FALLBACK') {
-    console.log('🌉 [Desktop Bridge] Old server detected on port ' + msg.port + ', using cached UI');
-    figma.showUI(__html__, { width: 140, height: 50, visible: true, themeColors: true });
-    return;
-  }
-
   // ============================================================================
   // EXECUTE_CODE - Arbitrary code execution (Power Tool)
   // ============================================================================
@@ -376,7 +324,7 @@ figma.ui.onmessage = async (msg) => {
       var errorMsg = error && error.message ? error.message : String(error);
       var errorStack = error && error.stack ? error.stack : '';
 
-      // Log error details as strings so they show up properly in Puppeteer
+      // Log error details as strings so they survive intact through the WebSocket bridge into figma_get_console_logs
       console.error('🌉 [Desktop Bridge] Code execution error: [' + errorName + '] ' + errorMsg);
       if (errorStack) {
         console.error('🌉 [Desktop Bridge] Stack:', errorStack);
@@ -3101,7 +3049,7 @@ figma.ui.onmessage = async (msg) => {
       });
       // Short delay to let the response message be sent before reload
       setTimeout(function() {
-        figma.showUI(__html__, { width: 140, height: 50, visible: true, themeColors: true });
+        figma.showUI(__html__, { width: 180, height: 50, visible: true, themeColors: true });
       }, 100);
     } catch (error) {
       var errorMsg = error && error.message ? error.message : String(error);
@@ -6299,6 +6247,12 @@ figma.loadAllPagesAsync().then(function() {
     var hasNodeChanges = false;
     var changedNodeIds = [];
 
+    // v1.25.0: also collect metadata-only changes (descriptions, annotations).
+    // These are properties that the REST API DOESN'T expose in version snapshots,
+    // so figma_diff_versions can't see them through REST alone. Forwarding them
+    // via the Plugin API + WebSocket is the only way to make them diff-visible.
+    var metadataChanges = [];
+
     for (var i = 0; i < event.documentChanges.length; i++) {
       var change = event.documentChanges[i];
       if (change.type === 'STYLE_CREATE' || change.type === 'STYLE_DELETE' || change.type === 'STYLE_PROPERTY_CHANGE') {
@@ -6309,6 +6263,48 @@ figma.loadAllPagesAsync().then(function() {
           changedNodeIds.push(change.id);
         }
       }
+
+      // Metadata change detection. PROPERTY_CHANGE includes a `properties` array
+      // listing which fields changed; we only snapshot the new value for the
+      // two fields Figma's REST never returns: `description` and `annotations`.
+      if (change.type === 'PROPERTY_CHANGE' && change.node && Array.isArray(change.properties)) {
+        for (var p = 0; p < change.properties.length; p++) {
+          var prop = change.properties[p];
+          if (prop === 'description' || prop === 'descriptionMarkdown' || prop === 'annotations') {
+            try {
+              var newValue = change.node[prop];
+              // Serialize annotations to plain JSON-safe form
+              if (prop === 'annotations' && Array.isArray(newValue)) {
+                newValue = newValue.map(function(a) {
+                  return {
+                    label: a.label || null,
+                    labelMarkdown: a.labelMarkdown || null,
+                    categoryId: a.categoryId || null,
+                    properties: a.properties || []
+                  };
+                });
+              }
+              metadataChanges.push({
+                node_id: change.node.id,
+                node_name: change.node.name || null,
+                node_type: change.node.type || null,
+                field: prop === 'descriptionMarkdown' ? 'description' : prop,
+                new_value: newValue,
+                timestamp: Date.now()
+              });
+            } catch (e) {
+              // Some property reads can throw on detached / deleted nodes
+            }
+          }
+        }
+      }
+    }
+
+    if (metadataChanges.length > 0) {
+      figma.ui.postMessage({
+        type: 'METADATA_CHANGE',
+        data: { changes: metadataChanges }
+      });
     }
 
     if (hasStyleChanges || hasNodeChanges) {
@@ -6376,4 +6372,4 @@ console.log('🌉 [Desktop Bridge] Ready to handle component requests');
 console.log('🌉 [Desktop Bridge] Plugin will stay open until manually closed');
 
 // Plugin stays open - no auto-close
-// UI iframe remains accessible for Puppeteer to read data from window object
+// UI iframe remains accessible so the in-iframe WebSocket bridge client can keep relaying state to the MCP server

package/figma-desktop-bridge/ui.html

@@ -217,7 +217,7 @@
 
   <script>
     // ============================================================================
-    // GLOBAL STATE - Data storage for Puppeteer/MCP access
+    // GLOBAL STATE — backing store for the in-iframe WebSocket bridge client
     // ============================================================================
     window.__figmaVariablesData = null;
     window.__figmaVariablesReady = false;
@@ -227,13 +227,67 @@
 
     let requestIdCounter = 0;
 
-    // UI update helper
-    function updateStatus(state, isActive, isError) {
-      const dot = document.getElementById('status-dot');
-      const stateText = document.getElementById('status-state');
+    // Status pill state — captured here so we can re-render whenever the
+    // mode (local port count, cloud paired) changes without losing the
+    // ready/connecting/error state set by the data layer.
+    let _currentStatusState = 'connecting';
+    let _currentStatusActive = false;
+    let _currentStatusError = false;
+
+    // Compute the mode label shown in place of the static "MCP" prefix.
+    // Returns "Local", "Cloud", "Local + Cloud", or "" (unknown — falls back
+    // to the original "MCP" label so the pill always says something).
+    // Lets users see at a glance which transport is carrying their session,
+    // so a confused user doesn't have to guess whether they're talking to
+    // the local server, the cloud relay, or both. Port numbers are omitted
+    // here to keep the pill compact — figma_diagnose exposes the port when
+    // it's actually needed.
+    //
+    // NOTE: `activeConnections` is declared inside the connection-pool IIFE
+    // below (around line ~617), so it is NOT in scope from this top-level
+    // function. The IIFE exposes `window.__wsGetActiveConnections()` for
+    // exactly this reason — calling that getter is what makes the pill
+    // update once the pool reports a live connection.
+    function renderModeText() {
+      try {
+        var getConns = window.__wsGetActiveConnections;
+        var conns = typeof getConns === 'function' ? (getConns() || []) : [];
+        var localUp = conns.some(function(c) {
+          return c && c.ws && c.ws.readyState === 1 && c.port !== 'cloud';
+        });
+        var cloudUp = conns.some(function(c) {
+          return c && c.ws && c.ws.readyState === 1 && c.port === 'cloud';
+        });
+        if (localUp && cloudUp) return 'Local + Cloud';
+        if (localUp) return 'Local';
+        if (cloudUp) return 'Cloud';
+        return '';
+      } catch (e) {
+        return '';
+      }
+    }
+
+    function refreshStatus() {
+      var dot = document.getElementById('status-dot');
+      var stateText = document.getElementById('status-state');
+      var labelEl = document.querySelector('.status-text .label');
+      if (!dot || !stateText) return;
+      dot.className = 'status-indicator ' + (_currentStatusError ? 'error' : (_currentStatusActive ? 'active' : 'loading'));
+      var mode = renderModeText();
+      // Replace the static "MCP" label with the live mode label (Local / Cloud
+      // / Local + Cloud). Fall back to "MCP" when nothing is connected yet so
+      // the pill still has a visible label during initial scan.
+      if (labelEl) labelEl.textContent = mode || 'MCP';
+      stateText.textContent = _currentStatusState;
+    }
 
-      dot.className = 'status-indicator ' + (isError ? 'error' : (isActive ? 'active' : 'loading'));
-      stateText.textContent = state;
+    // UI update helper — preserves the latest state and re-renders, picking
+    // up any mode-text changes (local/cloud connect/disconnect).
+    function updateStatus(state, isActive, isError) {
+      _currentStatusState = state;
+      _currentStatusActive = isActive;
+      _currentStatusError = isError;
+      refreshStatus();
     }
 
     // ============================================================================
@@ -605,7 +659,8 @@
     };
 
     // ============================================================================
-    // WEBSOCKET BRIDGE CLIENT - Fallback transport when CDP is unavailable
+    // WEBSOCKET BRIDGE CLIENT — primary transport from the plugin sandbox to
+    // the MCP server. Scans port range 9223–9232 for multiple instances.
     // ============================================================================
     (function() {
       // Port range for multi-instance support (matches server's port-discovery.ts)
@@ -800,7 +855,9 @@
       }
 
       /**
-       * Update backward-compat variables (ws, wsPort, wsConnected).
+       * Update backward-compat variables (ws, wsPort, wsConnected) and
+       * re-render the status pill so the Local/Cloud mode suffix reflects
+       * the new connection set.
        */
       function updateCompatState() {
         var live = activeConnections.filter(function(c) { return c.ws.readyState === 1; });
@@ -812,6 +869,9 @@
           ws = null;
           wsPort = null;
         }
+        // refreshStatus is defined in the outer scope (top-level script block).
+        // Guarded for the unlikely case it's invoked before that script runs.
+        if (typeof refreshStatus === 'function') refreshStatus();
       }
 
       /**
@@ -1043,6 +1103,14 @@
         }
       };
 
+      // v1.25.0: forward METADATA_CHANGE events (description/annotation edits)
+      // so figma_diff_versions can surface them despite Figma REST not exposing them.
+      window.__wsForwardMetadataChange = function(data) {
+        if (wsConnected) {
+          broadcastToAll({ type: 'METADATA_CHANGE', data: data });
+        }
+      };
+
       // Forward CONSOLE_CAPTURE events to all servers for console monitoring
       window.__wsForwardConsoleCapture = function(data) {
         if (wsConnected) {
@@ -1101,9 +1169,10 @@
       section.classList.toggle('visible');
       toggle.classList.toggle('expanded');
 
-      // Resize plugin window to fit content
+      // Resize plugin window to fit content. Default width is 180px to give
+      // the status pill enough room for the "Local + Cloud" mode label.
       var height = isExpanding ? 130 : 50;
-      parent.postMessage({ pluginMessage: { type: 'RESIZE_UI', width: 140, height: height } }, '*');
+      parent.postMessage({ pluginMessage: { type: 'RESIZE_UI', width: 180, height: height } }, '*');
     }
 
     function resetCloudUI() {
@@ -1472,6 +1541,11 @@
           if (window.__wsForwardDocumentChange) window.__wsForwardDocumentChange(msg.data);
           break;
 
+        // v1.25.0: metadata change events (description/annotation edits via Plugin API)
+        case 'METADATA_CHANGE':
+          if (window.__wsForwardMetadataChange) window.__wsForwardMetadataChange(msg.data);
+          break;
+
         // Console capture events (for console monitoring via WebSocket)
         case 'CONSOLE_CAPTURE':
           if (window.__wsForwardConsoleCapture) window.__wsForwardConsoleCapture(msg);

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@mp3wizard/figma-console-mcp",
-	"version": "1.23.1",
-	"description": "MCP server for accessing Figma plugin console logs and screenshots via Cloudflare Workers or local mode",
+	"version": "1.27.2",
+	"description": "The most comprehensive MCP server for Figma — design tokens, variables, components, write tools, version history diff, accessibility audits, FigJam, Slides, and more. Local (WebSocket Desktop Bridge plugin) and Cloudflare Workers (paired + remote) modes.",
 	"type": "module",
 	"main": "dist/local.js",
 	"types": "dist/local.d.ts",
@@ -37,15 +37,18 @@
 		"mcp",
 		"figma",
 		"plugin",
-		"console",
-		"debugging",
+		"design-tokens",
+		"design-systems",
+		"variables",
+		"figjam",
+		"slides",
+		"accessibility",
 		"ai",
 		"anthropic",
 		"claude",
-		"cloudflare",
-		"workers"
+		"cloudflare"
 	],
-	"author": "Your Name",
+	"author": "Southleft",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
@@ -60,12 +63,10 @@
 		"@modelcontextprotocol/sdk": "^1.26.0",
 		"agents": "^0.7.1",
 		"axe-core": "^4.11.2",
-		"chrome-remote-interface": "^0.33.2",
 		"jsdom": "^29.0.1",
 		"pino": "^9.5.0",
 		"pino-pretty": "^13.0.0",
-		"puppeteer-core": "^23.11.1",
-		"uuid": ">=11.1.1",
+		"uuid": "^11.0.3",
 		"ws": "^8.19.0",
 		"zod": "^3.25.76"
 	},
@@ -81,28 +82,9 @@
 		"ts-jest": "^29.2.5",
 		"tsx": "^4.19.2",
 		"typescript": "5.9.3",
-		"vite": ">=6.4.2",
+		"vite": "^6.0.0",
 		"vite-plugin-singlefile": "^2.0.0",
 		"wrangler": "^4.42.0",
 		"zod-to-json-schema": "^3.25.1"
-	},
-	"overrides": {
-		"path-to-regexp": ">=8.4.1",
-		"miniflare": {
-			"undici": ">=7.24.0"
-		},
-		"handlebars": ">=4.7.9",
-		"brace-expansion": ">=1.1.13",
-		"lodash": ">=4.18.0",
-		"picomatch": ">=4.0.4",
-		"hono": ">=4.12.18",
-		"@hono/node-server": ">=1.19.13",
-		"basic-ftp": ">=5.3.0",
-		"postcss": ">=8.5.10",
-		"fast-uri": ">=3.1.2",
-		"ip-address": ">=10.1.1",
-		"vite": {
-			"picomatch": ">=4.0.4"
-		}
 	}
 }