figma-rust-mcp 2.8.3 → 2.8.4

package/bin/figma-mcp.js

@@ -19,7 +19,7 @@ const __dirname = path.dirname(__filename);
 
 // Read package.json version
 const pkgPath = path.resolve(__dirname, '../package.json');
-let pkgVersion = '2.8.2';
+let pkgVersion = '2.8.4';
 let repoOwner = 'BuiHung1612';
 let repoName = 'figma-mcp';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-rust-mcp",
-  "version": "2.8.3",
+  "version": "2.8.4",
   "description": "Claude Code to Figma — Bidirectional MCP bridge. AI draws UI on Figma canvas, reads designs back. Works with Claude, Cursor, VS Code, Windsurf, Antigravity. No API key needed.",
   "mcpName": "io.github.BuiHung1612/figma-mcp",
   "type": "module",

package/plugin/code.js

@@ -1,7 +1,7 @@
 // figma-mcp — Figma Plugin main thread v1.2.1
 // Handles both WRITE (draw UI) and READ (extract design) operations.
 // AUTO-GENERATED by scripts/build-plugin.js — edit plugin-src/*.js instead
-// Generated: 2026-08-26T02:23:28.308Z
+// Generated: 2026-08-26T04:26:26.667Z
 
 // ── plugin-src/utils.js ──
 // ─── UTILS ────────────────────────────────────────────────────────────────────
@@ -1238,7 +1238,7 @@ const handlers = {};
 
 handlers.status = async () => ({
   connected:   true,
-  version:     "2.8.2",
+  version:     "2.8.3",
   fileName:    figma.root.name,
   currentPage: figma.currentPage.name,
   pageCount:   figma.root.children.length,
@@ -3010,10 +3010,26 @@ handlers.export_image = async function(params) {
 handlers.index_scan = async function() {
   var pageNodesPromise = (async function() {
     try {
-      if (handlers.get_page_nodes) {
-        var res = await handlers.get_page_nodes({ depth: 6, detail: "compact", maxNodes: 15000 });
-        return (res && res.nodes) ? res.nodes : (Array.isArray(res) ? res : []);
+      var page = figma.currentPage;
+      var topFrames = page.children || [];
+      var collected = [];
+      var CHUNK_SIZE = 10;
+
+      for (var i = 0; i < topFrames.length; i += CHUNK_SIZE) {
+        var chunk = topFrames.slice(i, i + CHUNK_SIZE);
+        var chunkData = chunk.map(function(n) {
+          return Object.assign(nodeToInfo(n), { childCount: "children" in n ? n.children.length : 0 });
+        });
+        collected = collected.concat(chunkData);
+
+        // Stream chunk progressively if there are multiple chunks
+        if (topFrames.length > CHUNK_SIZE && figma.ui) {
+          try {
+            figma.ui.postMessage({ type: "index-chunk", nodes: chunkData });
+          } catch(e3) {}
+        }
       }
+      return collected;
     } catch (e) {}
     return [];
   })();
@@ -5157,14 +5173,43 @@ figma.on("selectionchange", function() {
   } catch (e) {}
 });
 
-// Broadcast document changes to invalidate index cache (debounced 1.5s)
+// Broadcast granular document changes to invalidate or incrementally update index cache
 var docChangeTimer = null;
-function onDocChange() {
+var pendingChangedNodeIds = new Set();
+
+function onDocChange(event) {
   try {
+    if (event && event.documentChanges) {
+      for (var i = 0; i < event.documentChanges.length; i++) {
+        var ch = event.documentChanges[i];
+        if (ch && ch.id) pendingChangedNodeIds.add(ch.id);
+      }
+    }
     if (docChangeTimer) clearTimeout(docChangeTimer);
-    docChangeTimer = setTimeout(function() {
+    docChangeTimer = setTimeout(async function() {
+      var ids = Array.from(pendingChangedNodeIds);
+      pendingChangedNodeIds.clear();
+
+      if (ids.length > 0 && ids.length <= 15) {
+        // Incremental micro-diff update for fast real-time editing
+        var diffNodes = [];
+        for (var j = 0; j < ids.length; j++) {
+          try {
+            var n = await findNodeByIdAsync(ids[j]);
+            if (n && typeof nodeToInfo === "function") {
+              diffNodes.push(nodeToInfo(n));
+            }
+          } catch(e2) {}
+        }
+        if (diffNodes.length > 0) {
+          figma.ui.postMessage({ type: "node-diff", nodes: diffNodes });
+          return;
+        }
+      }
+
+      // Fallback for large batch changes: mark dirty or trigger background sync
       figma.ui.postMessage({ type: "document-change" });
-    }, 1500);
+    }, 800);
   } catch (e) {}
 }
 
@@ -5230,7 +5275,33 @@ figma.ui.onmessage = async (request) => {
     var newH = Math.max(200, Math.min(1200, Math.round(request.height)));
     try {
       figma.ui.resize(newW, newH);
-      figma.clientStorage.setAsync("mcp_window_size", { width: newW, height: newH }).catch(function() {});
+    } catch(e) {}
+    return;
+  }
+
+  if (request.type === "save-window-size") {
+    var sw = Math.max(260, Math.min(1000, Math.round(request.width)));
+    var sh = Math.max(200, Math.min(1200, Math.round(request.height)));
+    try {
+      figma.clientStorage.setAsync("mcp_window_size", { width: sw, height: sh }).catch(function() {});
+    } catch(e) {}
+    return;
+  }
+
+  // Handle manual reindex request from UI
+  if (request.type === "manual-reindex") {
+    try {
+      if (handlers.index_scan) {
+        var startMs = Date.now();
+        var scanResult = await handlers.index_scan();
+        figma.ui.postMessage({
+          type: "index-update",
+          data: scanResult,
+          fileName: figma.root ? figma.root.name : "unknown",
+          sessionId: figma.root ? figma.root.id : "_default",
+          startMs: startMs
+        });
+      }
     } catch(e) {}
     return;
   }
@@ -5246,12 +5317,15 @@ figma.ui.onmessage = async (request) => {
     return;
   }
 
+  const startTime = Date.now();
   try {
     var data = await handler(params || {});
-    figma.ui.postMessage({ id: id, operation: operation, success: true, dataJson: stringifyForBridge(data) });
+    var durationMs = Date.now() - startTime;
+    figma.ui.postMessage({ id: id, operation: operation, success: true, dataJson: stringifyForBridge(data), durationMs: durationMs });
   } catch (err) {
+    var durationMs = Date.now() - startTime;
     var errMsg = "[dispatch:" + operation + "] " + (err && err.message ? err.message : String(err));
-    figma.ui.postMessage({ id: id, operation: operation, success: false, error: errMsg });
+    figma.ui.postMessage({ id: id, operation: operation, success: false, error: errMsg, durationMs: durationMs });
   }
 };
 

package/plugin/ui.html

@@ -140,8 +140,14 @@
     /* STATS ROW */
     .stats-row {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr auto;
-      gap: 6px;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 5px;
+      flex-shrink: 0;
+    }
+    .stats-subrow {
+      display: grid;
+      grid-template-columns: 1fr 1fr auto;
+      gap: 5px;
       flex-shrink: 0;
     }
 
@@ -149,38 +155,45 @@
       background: var(--surface-1);
       border: 1px solid var(--border-1);
       border-radius: var(--radius-sm);
-      padding: 7px 8px;
-      display: flex; flex-direction: column; gap: 3px;
+      padding: 6px 7px;
+      display: flex; flex-direction: column; gap: 2px;
       transition: border-color var(--transition);
     }
     .stat-card:hover { border-color: var(--border-2); }
 
     .stat-label {
-      font-size: 8.5px; font-weight: 700;
-      letter-spacing: 0.8px; text-transform: uppercase;
+      font-size: 8px; font-weight: 700;
+      letter-spacing: 0.7px; text-transform: uppercase;
       color: var(--text-3);
     }
     .stat-value {
-      font-size: 17px; font-weight: 800;
+      font-size: 15px; font-weight: 800;
       font-family: 'SF Mono', 'Fira Code', monospace;
-      line-height: 1;
+      line-height: 1.1;
+      display: flex; align-items: baseline; gap: 2px;
+    }
+    .stat-unit {
+      font-size: 8.5px; font-weight: 600; color: var(--text-3);
     }
     .stat-card.writes .stat-value { color: var(--violet); }
     .stat-card.reads  .stat-value { color: var(--accent-2); }
     .stat-card.errors .stat-value { color: var(--rose); }
+    .stat-card.speed  .stat-value { color: var(--green); }
+    .stat-card.memory .stat-value { color: var(--amber); }
 
     .port-card {
       background: var(--surface-1);
       border: 1px solid var(--border-1);
       border-radius: var(--radius-sm);
-      padding: 7px 10px;
-      display: flex; flex-direction: column; gap: 3px;
+      padding: 6px 9px;
+      display: flex; flex-direction: column; gap: 2px;
       cursor: pointer;
+      justify-content: center;
       transition: border-color var(--transition), background var(--transition);
     }
     .port-card:hover { border-color: rgba(6,182,212,0.35); background: rgba(6,182,212,0.04); }
-    .port-label { font-size: 8.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-3); }
-    .port-value { font-size: 12px; font-weight: 700; font-family: 'SF Mono', 'Fira Code', monospace; color: var(--accent-2); line-height: 1; }
+    .port-label { font-size: 8px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--text-3); }
+    .port-value { font-size: 12px; font-weight: 700; font-family: 'SF Mono', 'Fira Code', monospace; color: var(--accent-2); line-height: 1.1; }
 
     /* TERMINAL */
     .terminal-wrap {
@@ -290,15 +303,17 @@
 
     /* RESIZE GRIP */
     .resize-grip {
-      position: fixed; right: 3px; bottom: 3px;
-      width: 14px; height: 14px;
-      cursor: nwse-resize; opacity: 0.2;
+      position: fixed; right: 0; bottom: 0;
+      width: 24px; height: 24px;
+      cursor: nwse-resize; opacity: 0.35;
       color: var(--text-2);
       transition: opacity var(--transition), color var(--transition);
       z-index: 1000;
       display: flex; align-items: flex-end; justify-content: flex-end;
+      padding: 4px;
+      touch-action: none;
     }
-    .resize-grip:hover { opacity: 0.7; color: var(--accent-2); }
+    .resize-grip:hover { opacity: 1; color: var(--accent-2); }
   </style>
 </head>
 <body>
@@ -334,13 +349,13 @@
         <span class="stat-label">Reads</span>
         <span class="stat-value" id="read-count">0</span>
       </div>
-      <div class="stat-card errors" title="Errors">
-        <span class="stat-label">Errors</span>
-        <span class="stat-value" id="err-count">0</span>
+      <div class="stat-card speed" title="Last Request Execution Time / Speed">
+        <span class="stat-label">Speed</span>
+        <span class="stat-value"><span id="speed-display">0</span><span class="stat-unit">ms</span></span>
       </div>
-      <div class="port-card" onclick="changePort()" title="Click to change port">
-        <span class="port-label">Port</span>
-        <span class="port-value" id="port-display">38451</span>
+      <div class="stat-card memory" title="Server Memory Usage (RAM RSS)">
+        <span class="stat-label">RAM</span>
+        <span class="stat-value"><span id="ram-display">3.2</span><span class="stat-unit">MB</span></span>
       </div>
     </div>
 
@@ -367,6 +382,13 @@
         </svg>
       </button>
 
+      <button class="btn" id="reindex-btn" onclick="triggerManualReindex()" title="Re-index Figma document to Rust memory" style="background:var(--surface-2);border:1px solid var(--border-2);color:var(--text-2);font-size:10px;padding:0 10px;gap:5px;">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/>
+        </svg>
+        <span id="reindex-btn-label">⚡ Index</span>
+      </button>
+
       <button class="btn btn-primary" id="launch-btn" onclick="launchServer()" title="Start Figma MCP server">
         <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
           <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
@@ -416,6 +438,34 @@
     var launchBtn     = document.getElementById("launch-btn");
     var launchBtnLabel = document.getElementById("launch-btn-label");
     var statusPill    = document.getElementById("status-pill");
+    var speedEl       = document.getElementById("speed-display");
+    var ramEl         = document.getElementById("ram-display");
+    var reindexBtn    = document.getElementById("reindex-btn");
+    var reindexBtnLabel = document.getElementById("reindex-btn-label");
+
+    async function fetchServerStats() {
+      if (!everConnected) return;
+      try {
+        var res = await fetch(BRIDGE + "/health", { signal: AbortSignal.timeout(1000) });
+        if (res.ok) {
+          var data = await res.json();
+          if (data && data.stats && data.stats.memoryMb !== undefined && ramEl) {
+            ramEl.textContent = data.stats.memoryMb.toFixed(1);
+          }
+        }
+      } catch(e) {}
+    }
+    setInterval(fetchServerStats, 4000);
+
+    function triggerManualReindex() {
+      if (!everConnected) {
+        log("Cannot index: Server is offline", "err");
+        return;
+      }
+      if (reindexBtnLabel) reindexBtnLabel.textContent = "Indexing…";
+      log("⚡ Manual re-index triggered…", "info");
+      parent.postMessage({ pluginMessage: { type: "manual-reindex" } }, "*");
+    }
 
     var READ_OPS = [
       "get_selection","get_design","get_page_nodes","screenshot",
@@ -918,6 +968,20 @@
         return;
       }
 
+      if (msg.type === "node-diff") {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          try { ws.send(JSON.stringify({ type: "node-diff", nodes: msg.nodes })); } catch(e) {}
+        }
+        return;
+      }
+
+      if (msg.type === "index-chunk") {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          try { ws.send(JSON.stringify({ type: "index-chunk", nodes: msg.nodes })); } catch(e) {}
+        }
+        return;
+      }
+
       if (msg.type === "document-change") {
         if (ws && ws.readyState === WebSocket.OPEN) {
           try { ws.send(JSON.stringify({ type: "document-change" })); } catch(e) {}
@@ -926,6 +990,7 @@
       }
 
       if (msg.type === "index-update") {
+        if (reindexBtnLabel) reindexBtnLabel.textContent = "⚡ Indexed";
         if (ws && ws.readyState === WebSocket.OPEN) {
           try {
             ws.send(JSON.stringify({
@@ -935,13 +1000,21 @@
               sessionId: msg.sessionId,
               startMs: msg.startMs
             }));
-            log("⚡ Pre-indexed file data", "info");
+            var nodeCount = (msg.data && msg.data.pageNodes) ? msg.data.pageNodes.length : 0;
+            log("⚡ Indexed " + (msg.fileName || "file") + " (" + (Date.now() - msg.startMs) + "ms)", "ok");
           } catch(e) {}
         }
+        setTimeout(function() {
+          if (reindexBtnLabel) reindexBtnLabel.textContent = "⚡ Index";
+        }, 3000);
         return;
       }
 
       var isRead = READ_OPS.indexOf(msg.operation) >= 0;
+      var durationStr = msg.durationMs !== undefined ? " (" + msg.durationMs + "ms)" : "";
+      if (msg.durationMs !== undefined && speedEl) {
+        speedEl.textContent = msg.durationMs;
+      }
       if (msg.success) {
         if (isRead) {
           readCount++;
@@ -950,11 +1023,11 @@
           writeCount++;
           document.getElementById("write-count").textContent = writeCount;
         }
-        log("✓ " + (msg.id ? msg.id.slice(-6) : "ok"), "ok");
+        log("✓ " + (msg.id ? msg.id.slice(-6) : "ok") + durationStr, "ok");
       } else {
         errCount++;
         document.getElementById("err-count").textContent = errCount;
-        log("✗ " + (msg.id ? msg.id.slice(-6) : "err") + ": " + (msg.error || "fail"), "err");
+        log("✗ " + (msg.id ? msg.id.slice(-6) : "err") + durationStr + ": " + (msg.error || "fail"), "err");
       }
       var payloadJson = msg.dataJson !== undefined
         ? msg.dataJson
@@ -964,11 +1037,15 @@
 
     initConnection();
 
-    // Smooth Drag Resize
+    // Smooth Drag Resize (60FPS via requestAnimationFrame)
     (function initResize() {
       var grip = document.getElementById("resize-grip");
       if (!grip) return;
 
+      var rafId = null;
+      var lastW = 0, lastH = 0;
+      var saveTimer = null;
+
       grip.addEventListener("pointerdown", function(e) {
         e.preventDefault();
         grip.setPointerCapture(e.pointerId);
@@ -980,13 +1057,29 @@
         function onPointerMove(ev) {
           var nw = Math.max(280, Math.min(1000, Math.round(startW + (ev.clientX - startX))));
           var nh = Math.max(220, Math.min(1200, Math.round(startH + (ev.clientY - startY))));
-          parent.postMessage({ pluginMessage: { type: "resize", width: nw, height: nh } }, "*");
+          lastW = nw;
+          lastH = nh;
+
+          if (!rafId) {
+            rafId = requestAnimationFrame(function() {
+              parent.postMessage({ pluginMessage: { type: "resize", width: lastW, height: lastH } }, "*");
+              rafId = null;
+            });
+          }
         }
 
         function onPointerUp(ev) {
           try { grip.releasePointerCapture(ev.pointerId); } catch(err) {}
           window.removeEventListener("pointermove", onPointerMove);
           window.removeEventListener("pointerup", onPointerUp);
+          if (rafId) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+          }
+          if (lastW > 0 && lastH > 0) {
+            parent.postMessage({ pluginMessage: { type: "resize", width: lastW, height: lastH } }, "*");
+            parent.postMessage({ pluginMessage: { type: "save-window-size", width: lastW, height: lastH } }, "*");
+          }
         }
 
         window.addEventListener("pointermove", onPointerMove);