figma-rust-mcp 2.9.5 → 3.0.0

package/README.md

@@ -147,7 +147,7 @@ Add to your `~/.gemini/config/mcp_config.json` or project `.agents/mcp_config.js
 
 ## 🛠️ MCP Tools Reference
 
-`figma-mcp` provides **12 first-class MCP tools**:
+`figma-mcp` provides **14 first-class MCP tools**:
 
 ### 1. `figma_status`
 Checks live bridge connection status, connected Figma tabs/files, in-memory index health, queue length, and latency statistics.
@@ -217,6 +217,19 @@ Audits the current Figma document and generates a complete design system rule sh
 Fetches built-in documentation, design rules, layout guidelines, and code examples for `figma_write`.
 - **`section`**: `"rules"` | `"layout"` | `"api"` | `"tokens"` | `"icons"`
 
+### 13. `figma_verify_ui`
+Validates and compares actual rendered HTML/React UI styles and layout against Figma design specifications.
+- Checks dimensions, padding, flex gap, colors, border-radius, and typography.
+- Returns an exact match percentage (`match_percentage`), discrepancy breakdown, and actionable CSS/Tailwind fixes.
+- **`nodeId`** / **`nodeName`**: Target Figma node spec.
+- **`computedStyles`**: Key-value pairs of computed CSS properties from browser/component inspection.
+- **`url`** / **`selector`**: Contextual target URL or CSS selector inspected.
+
+### 14. `figma_match_components`
+Scans your local codebase directories (`src/components`, `components/ui`) to discover existing React/Vue components and matches them directly against Figma design layers, preventing duplicate component creation and ensuring reuse of existing design systems.
+- **`projectDir`**: Base directory of your project (default: current directory `"."`).
+- **`nodeId`**: Optional Figma node ID to check specific match against local components.
+
 ---
 
 ## 💻 Development & Testing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-rust-mcp",
-  "version": "2.9.5",
+  "version": "3.0.0",
   "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-26T09:42:07.781Z
+// Generated: 2026-08-27T08:12:15.747Z
 
 // ── plugin-src/utils.js ──
 // ─── UTILS ────────────────────────────────────────────────────────────────────
@@ -328,6 +328,13 @@ function nodeToInfo(node) {
   return info;
 }
 
+// Yield execution back to Figma main thread loop so UI never freezes/blocks
+function yieldToUI(delayMs) {
+  return new Promise(function(resolve) {
+    setTimeout(resolve, delayMs !== undefined ? delayMs : 0);
+  });
+}
+
 
 // ── plugin-src/svg-path-helpers.js ──
 // ─── SVG PATH NORMALIZATION ───────────────────────────────────────────────────
@@ -1238,7 +1245,7 @@ const handlers = {};
 
 handlers.status = async () => ({
   connected:   true,
-  version:     "2.8.5",
+  version:     "3.0.0",
   fileName:    figma.root.name,
   currentPage: figma.currentPage.name,
   pageCount:   figma.root.children.length,
@@ -3035,60 +3042,98 @@ handlers.export_image = async function(params) {
   };
 };
 
-// index_scan — aggregate page nodes, styles, variables, and components in one call for pre-indexing (concurrently)
+// index_scan — aggregate page nodes, styles, variables, and components in one call for pre-indexing
 handlers.index_scan = async function() {
-  var pageNodesPromise = (async function() {
+  if (figma.ui) {
     try {
-      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);
+      figma.ui.postMessage({ type: "index-progress", stage: "nodes", percent: 5, label: "Scanning canvas layers…" });
+    } catch(e) {}
+  }
 
-        // 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) {}
-        }
+  var pageNodes = [];
+  try {
+    var page = figma.currentPage;
+    var topFrames = page.children || [];
+    var CHUNK_SIZE = 10;
+    var totalFrames = topFrames.length;
+
+    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 });
+      });
+      pageNodes = pageNodes.concat(chunkData);
+
+      var nodePct = totalFrames > 0 ? Math.min(40, Math.round(5 + (pageNodes.length / totalFrames) * 35)) : 35;
+      if (figma.ui) {
+        try {
+          figma.ui.postMessage({
+            type: "index-progress",
+            stage: "nodes",
+            percent: nodePct,
+            label: "Layers: " + pageNodes.length + (totalFrames ? "/" + totalFrames : "")
+          });
+        } catch(e) {}
+      }
+
+      // 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 [];
-  })();
 
-  var stylesPromise = (async function() {
+      // Yield after every chunk so canvas/UI remains completely smooth
+      if (typeof yieldToUI === "function") {
+        await yieldToUI(0);
+      }
+    }
+  } catch (e) {}
+
+  if (typeof yieldToUI === "function") await yieldToUI(0);
+
+  if (figma.ui) {
     try {
-      if (handlers.get_styles) return await handlers.get_styles({});
-    } catch (e) {}
-    return null;
-  })();
+      figma.ui.postMessage({ type: "index-progress", stage: "styles", percent: 45, label: "Indexing color & text styles…" });
+    } catch(e) {}
+  }
+
+  var styles = null;
+  try {
+    if (handlers.get_styles) styles = await handlers.get_styles({});
+  } catch (e) {}
 
-  var varsPromise = (async function() {
+  if (typeof yieldToUI === "function") await yieldToUI(0);
+
+  if (figma.ui) {
     try {
-      if (handlers.get_variables) return await handlers.get_variables({});
-    } catch (e) {}
-    return null;
-  })();
+      figma.ui.postMessage({ type: "index-progress", stage: "variables", percent: 65, label: "Indexing variables & tokens…" });
+    } catch(e) {}
+  }
+
+  var variables = null;
+  try {
+    if (handlers.get_variables) variables = await handlers.get_variables({});
+  } catch (e) {}
+
+  if (typeof yieldToUI === "function") await yieldToUI(0);
 
-  var compsPromise = (async function() {
+  if (figma.ui) {
     try {
-      if (handlers.get_local_components) return await handlers.get_local_components({});
-    } catch (e) {}
-    return null;
-  })();
+      figma.ui.postMessage({ type: "index-progress", stage: "components", percent: 85, label: "Indexing components & sets…" });
+    } catch(e) {}
+  }
 
-  var results = await Promise.all([pageNodesPromise, stylesPromise, varsPromise, compsPromise]);
-  var pageNodes = results[0];
-  var styles = results[1];
-  var variables = results[2];
-  var components = results[3];
+  var components = null;
+  try {
+    if (handlers.get_local_components) components = await handlers.get_local_components({});
+  } catch (e) {}
+
+  if (figma.ui) {
+    try {
+      figma.ui.postMessage({ type: "index-progress", stage: "done", percent: 100, label: "Index ready" });
+    } catch(e) {}
+  }
 
   var resolvedSid = figma.fileKey || (function() {
     try { return figma.root.getPluginData("mcp_session_id") || "_default"; } catch(e) { return "_default"; }
@@ -3782,46 +3827,66 @@ handlers.get_styles = async function() {
 
 // get_local_components — enhanced component listing with descriptions and properties
 handlers.get_local_components = async function() {
-  await figma.loadAllPagesAsync();
+  if (typeof figma.loadAllPagesAsync === "function") {
+    try { await figma.loadAllPagesAsync(); } catch (e) {}
+  }
   var comps = figma.root.findAllWithCriteria({ types: ["COMPONENT"] });
+  if (typeof yieldToUI === "function") await yieldToUI(0);
   var sets = figma.root.findAllWithCriteria({ types: ["COMPONENT_SET"] });
-
-  return {
-    components: comps.map(function(c) {
-      var info = {
-        id: c.id, name: c.name, key: c.key || null,
-        description: c.description || "",
-        setName: (c.parent && c.parent.type === "COMPONENT_SET") ? c.parent.name : null,
-        width: Math.round(c.width), height: Math.round(c.height),
-        page: c.parent ? (function findPage(n) {
-          while (n && n.type !== "PAGE") n = n.parent;
-          return n ? n.name : null;
-        })(c) : null,
-      };
-      // Component properties (variant props)
-      try {
-        if (c.componentPropertyDefinitions) {
-          var defs = c.componentPropertyDefinitions;
-          var props = {};
-          for (var key in defs) {
-            if (Object.prototype.hasOwnProperty.call(defs, key)) {
-              props[key] = { type: defs[key].type, defaultValue: defs[key].defaultValue };
-              if (defs[key].variantOptions) props[key].options = defs[key].variantOptions;
-            }
+  if (typeof yieldToUI === "function") await yieldToUI(0);
+
+  var componentList = [];
+  var COMP_BATCH_SIZE = 50;
+  for (var ci = 0; ci < comps.length; ci++) {
+    var c = comps[ci];
+    var info = {
+      id: c.id, name: c.name, key: c.key || null,
+      description: c.description || "",
+      setName: (c.parent && c.parent.type === "COMPONENT_SET") ? c.parent.name : null,
+      width: Math.round(c.width), height: Math.round(c.height),
+      page: c.parent ? (function findPage(n) {
+        while (n && n.type !== "PAGE") n = n.parent;
+        return n ? n.name : null;
+      })(c) : null,
+    };
+    // Component properties (variant props)
+    try {
+      if (c.componentPropertyDefinitions) {
+        var defs = c.componentPropertyDefinitions;
+        var props = {};
+        for (var key in defs) {
+          if (Object.prototype.hasOwnProperty.call(defs, key)) {
+            props[key] = { type: defs[key].type, defaultValue: defs[key].defaultValue };
+            if (defs[key].variantOptions) props[key].options = defs[key].variantOptions;
           }
-          info.properties = props;
         }
-      } catch(e) { /* skip properties */ }
-      return info;
-    }),
-    componentSets: sets.map(function(s) {
-      return {
-        id: s.id, name: s.name, key: s.key || null,
-        description: s.description || "",
-        variantCount: s.children ? s.children.length : 0,
-      };
-    }),
-    total: comps.length + sets.length,
+        info.properties = props;
+      }
+    } catch(e) { /* skip properties */ }
+    componentList.push(info);
+
+    if (ci > 0 && ci % COMP_BATCH_SIZE === 0 && typeof yieldToUI === "function") {
+      await yieldToUI(0);
+    }
+  }
+
+  var componentSets = [];
+  for (var si = 0; si < sets.length; si++) {
+    var s = sets[si];
+    componentSets.push({
+      id: s.id, name: s.name, key: s.key || null,
+      description: s.description || "",
+      variantCount: s.children ? s.children.length : 0,
+    });
+    if (si > 0 && si % COMP_BATCH_SIZE === 0 && typeof yieldToUI === "function") {
+      await yieldToUI(0);
+    }
+  }
+
+  return {
+    components: componentList,
+    componentSets: componentSets,
+    total: componentList.length + componentSets.length,
   };
 };
 
@@ -3904,12 +3969,17 @@ handlers.get_variables = async function() {
           values: values,
           description: v.description || "",
         });
+
+        if (vi > 0 && vi % 50 === 0 && typeof yieldToUI === "function") {
+          await yieldToUI(0);
+        }
       }
       collections.push({
         id: col.id, name: col.name,
         modes: col.modes.map(function(m) { return { id: m.modeId, name: m.name }; }),
         variables: variables,
       });
+      if (typeof yieldToUI === "function") await yieldToUI(0);
     }
   } catch(e) {
     return { error: "Variables API not available: " + e.message, collections: [] };
@@ -5310,9 +5380,19 @@ figma.clientStorage.getAsync("mcp_window_size").then(function(saved) {
 // In Figma, figma.root.id is always "0:0" across all files. To support running
 // multiple plugins concurrently across multiple tabs/files, generate and persist
 // a unique document session ID in document pluginData.
+function getSavedFileKey() {
+  if (figma.fileKey) return figma.fileKey;
+  try {
+    var saved = figma.root.getPluginData("figma_file_key");
+    if (saved && saved.length > 0) return saved;
+  } catch(e) {}
+  return null;
+}
+
 function getOrCreateSessionId() {
-  if (figma.fileKey) {
-    return figma.fileKey;
+  var fk = getSavedFileKey();
+  if (fk) {
+    return fk;
   }
   try {
     var stored = figma.root.getPluginData("mcp_session_id");
@@ -5332,13 +5412,15 @@ function getOrCreateSessionId() {
 
 var currentSessionId = getOrCreateSessionId();
 var currentFileName = figma.root ? figma.root.name : "Untitled";
+var currentFileKey = getSavedFileKey();
 
 // Broadcast active file / session metadata on startup
 try {
   figma.ui.postMessage({
     type: "session-info",
     sessionId: currentSessionId,
-    fileName: currentFileName
+    fileName: currentFileName,
+    fileKey: currentFileKey
   });
 } catch (e) {}
 
@@ -5350,8 +5432,15 @@ figma.on("selectionchange", function() {
     var fullNode = null;
     for (var i = 0; i < Math.min(sel.length, 5); i++) {
       var n = sel[i];
+      // If node is an internal instance sub-layer (starts with I...), find its main component instance or top frame
+      var mainId = n.id;
+      if (mainId.startsWith("I") && mainId.indexOf(";") !== -1) {
+        var parts = mainId.split(";");
+        mainId = parts[parts.length - 1]; // Use real canonical node id
+      }
       summary.push({
         id: n.id,
+        mainId: mainId,
         name: n.name,
         type: n.type,
         width: typeof n.width === "number" ? Math.round(n.width) : undefined,
@@ -5433,20 +5522,23 @@ function onDocChange(event) {
   } catch (e) {}
 }
 
-// In dynamic-page mode, Figma requires figma.loadAllPagesAsync() before registering documentchange
-if (typeof figma.loadAllPagesAsync === "function") {
-  figma.loadAllPagesAsync().then(function() {
+// In dynamic-page mode, Figma requires figma.loadAllPagesAsync() before registering documentchange.
+// Delay loading all pages slightly so plugin UI opens and paints immediately without UI freeze.
+setTimeout(function() {
+  if (typeof figma.loadAllPagesAsync === "function") {
+    figma.loadAllPagesAsync().then(function() {
+      try {
+        figma.on("documentchange", onDocChange);
+      } catch (e) {}
+    }).catch(function() {});
+  } else {
     try {
       figma.on("documentchange", onDocChange);
     } catch (e) {}
-  }).catch(function() {});
-} else {
-  try {
-    figma.on("documentchange", onDocChange);
-  } catch (e) {}
-}
+  }
+}, 800);
 
-// Background initial scan after 1.2s startup delay (ensures UI WebSocket is connected)
+// Background initial scan after 1.8s startup delay (ensures UI is fully rendered and WebSocket connected)
 setTimeout(async function() {
   try {
     if (handlers.index_scan) {
@@ -5461,7 +5553,7 @@ setTimeout(async function() {
       });
     }
   } catch (e) {}
-}, 1200);
+}, 1800);
 
 // ─── DISPATCHER ───────────────────────────────────────────────────────────────
 
@@ -5508,6 +5600,35 @@ figma.ui.onmessage = async (request) => {
     return;
   }
 
+  // Set and persist Figma File Key
+  if (request.type === "set-file-key") {
+    try {
+      var newFileKey = (request.fileKey || "").trim();
+      if (newFileKey) {
+        figma.root.setPluginData("figma_file_key", newFileKey);
+        currentFileKey = newFileKey;
+        figma.ui.postMessage({
+          type: "session-info",
+          sessionId: currentSessionId,
+          fileName: currentFileName,
+          fileKey: newFileKey
+        });
+        figma.notify("Figma File Key saved!", { timeout: 1500 });
+      }
+    } catch(e) {}
+    return;
+  }
+
+  // Toast notification from UI
+  if (request.type === "notify") {
+    try {
+      if (request.message) {
+        figma.notify(request.message, { timeout: request.timeout || 1500, error: request.error || false });
+      }
+    } catch(e) {}
+    return;
+  }
+
   // Zoom to selection when clicked on selection bar
   if (request.type === "zoom-to-selection") {
     try {

package/plugin/ui.html

@@ -98,8 +98,68 @@
       padding: 6px 8px;
       flex-shrink: 0;
       box-shadow: 0 1px 2px rgba(0,0,0,0.4);
+      position: relative;
     }
 
+    /* ── INDEXING PROGRESS BAR (Embedded in Header) ── */
+    .index-progress-wrap {
+      display: none;
+      flex-direction: column;
+      gap: 3px;
+      padding: 4px 8px 6px;
+      background: rgba(147, 129, 255, 0.08);
+      border: 1px solid rgba(147, 129, 255, 0.28);
+      border-radius: var(--radius-sm);
+      margin-top: 1px;
+      animation: fadeIn 0.2s ease-out;
+    }
+    .index-progress-wrap.active {
+      display: flex;
+    }
+    .index-progress-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 9px;
+      font-weight: 600;
+      color: var(--ghost-lavender);
+      font-family: var(--font-mono);
+    }
+    .index-progress-label {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 220px;
+    }
+    .index-progress-label svg {
+      animation: spin 1s linear infinite;
+      flex-shrink: 0;
+    }
+    .index-progress-pct {
+      color: var(--text-primary);
+      flex-shrink: 0;
+    }
+    .index-progress-track {
+      width: 100%;
+      height: 3px;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 9999px;
+      overflow: hidden;
+    }
+    .index-progress-fill {
+      height: 100%;
+      width: 0%;
+      background: linear-gradient(90deg, #7c3aed, #9381ff, #34d399);
+      border-radius: 9999px;
+      transition: width 0.2s ease-out;
+      box-shadow: 0 0 8px rgba(147, 129, 255, 0.6);
+    }
+
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
+
     .brand { display: flex; align-items: center; gap: 7px; min-width: 0; }
 
     .brand-logo {
@@ -517,19 +577,82 @@
       pointer-events: auto;
     }
 
-    /* RESIZE GRIP */
-    .resize-grip {
-      position: fixed; right: 0; bottom: 0;
-      width: 18px; height: 18px;
-      cursor: nwse-resize; opacity: 0.35;
+    /* ── CUSTOM IN-PLUGIN MODAL DIALOG (No window.prompt dependency) ── */
+    .modal-overlay {
+      position: fixed;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(8, 9, 13, 0.75);
+      backdrop-filter: blur(5px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px;
+      z-index: 999;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--transition);
+    }
+    .modal-overlay.show {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .modal-card {
+      background: var(--surface-card);
+      border: 1px solid var(--border-light);
+      border-radius: var(--radius-md);
+      box-shadow: 0 16px 36px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08) inset;
+      width: 100%;
+      max-width: 290px;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      transform: scale(0.95);
+      transition: transform var(--transition);
+    }
+    .modal-overlay.show .modal-card {
+      transform: scale(1);
+    }
+    .modal-title-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .modal-title {
+      font-size: 11px;
+      font-weight: 700;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+    .modal-desc {
+      font-size: 9.5px;
       color: var(--text-secondary);
-      transition: opacity var(--transition), color var(--transition);
-      z-index: 1000;
-      display: flex; align-items: flex-end; justify-content: flex-end;
-      padding: 3px;
-      touch-action: none;
+      line-height: 1.35;
+    }
+    .modal-input {
+      width: 100%;
+      background: var(--surface-base);
+      border: 1px solid var(--border-light);
+      border-radius: var(--radius-xs);
+      color: var(--text-primary);
+      font-family: var(--font-mono);
+      font-size: 9.5px;
+      padding: 6px 8px;
+      outline: none;
+      transition: border-color var(--transition);
+    }
+    .modal-input:focus {
+      border-color: var(--ghost-lavender);
+      box-shadow: 0 0 0 2px var(--ghost-glow);
+    }
+    .modal-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 6px;
+      margin-top: 2px;
     }
-    .resize-grip:hover { opacity: 1; color: var(--ghost-mint); }
   </style>
 </head>
 <body>
@@ -548,7 +671,7 @@
         <div class="brand-info">
           <div class="brand-title-row">
             <span class="brand-name">Figma MCP</span>
-            <span class="brand-ver">v2.8</span>
+            <span class="brand-ver">v3.0.0</span>
           </div>
           <span class="brand-file" id="doc-display" title="Active Document">Ready</span>
         </div>
@@ -571,6 +694,14 @@
           </svg>
         </button>
 
+        <!-- Copy File / Session Link -->
+        <button class="header-icon-btn" id="file-link-btn" onclick="copyFileLink(event)" title="🔗 Set / Copy Figma File Link">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+          </svg>
+        </button>
+
         <!-- Connection Status Pill -->
         <div class="status-pill" id="status-pill" onclick="handleStatusClick()" title="Connection Status (Click for details)">
           <div class="dot yellow" id="dot"></div>
@@ -579,6 +710,22 @@
       </div>
     </header>
 
+    <!-- ── INDEXING PROGRESS HUD ── -->
+    <div class="index-progress-wrap" id="index-progress-wrap">
+      <div class="index-progress-header">
+        <span class="index-progress-label" id="index-progress-label">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+          </svg>
+          <span id="index-progress-text">Indexing canvas layers…</span>
+        </span>
+        <span class="index-progress-pct" id="index-progress-pct">0%</span>
+      </div>
+      <div class="index-progress-track">
+        <div class="index-progress-fill" id="index-progress-fill"></div>
+      </div>
+    </div>
+
     <!-- ── SELECTION INSPECTOR HERO CARD ── -->
     <div class="selection-card" id="selection-card">
       <div class="selection-main" onclick="focusSelection()" title="Click to center view on selection">
@@ -602,6 +749,14 @@
           </svg>
         </button>
 
+        <!-- Copy Link to Selection Frame button -->
+        <button class="act-btn icon-only" id="link-btn" onclick="copySelectionLink(event)" title="🔗 Copy link to selection frame">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+          </svg>
+        </button>
+
         <!-- Focus / Center on Canvas button -->
         <button class="act-btn icon-only" onclick="focusSelection()" title="🎯 Center view on canvas">
           <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -613,7 +768,15 @@
           </svg>
         </button>
 
-        <!-- Copy Node ID badge -->
+        <!-- Copy Node ID button -->
+        <button class="act-btn icon-only" id="copy-id-btn" onclick="copySelectionId(event)" title="📋 Copy Figma Node ID">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+          </svg>
+        </button>
+
+        <!-- Node Type Badge button (also clickable to copy ID) -->
         <button class="act-btn badge-btn" id="selection-badge" onclick="copySelectionId(event)" title="📋 Click to copy Figma Node ID">
           FRAME
         </button>
@@ -667,6 +830,29 @@
 
   </div>
 
+  <!-- File Key Input Modal Dialog -->
+  <div class="modal-overlay" id="key-modal-overlay">
+    <div class="modal-card">
+      <div class="modal-title-row">
+        <div class="modal-title">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--ghost-lavender)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+          </svg>
+          Set Figma File Link
+        </div>
+      </div>
+      <div class="modal-desc">
+        Paste full Figma file URL or File Key to generate real browser links for your layers:
+      </div>
+      <input type="text" class="modal-input" id="file-key-input" placeholder="https://www.figma.com/design/..." spellcheck="false" autocomplete="off" />
+      <div class="modal-actions">
+        <button class="btn" onclick="closeKeyModal()">Cancel</button>
+        <button class="btn btn-primary" onclick="saveFileKeyFromModal()">Save & Copy</button>
+      </div>
+    </div>
+  </div>
+
   <!-- Floating Toast Component -->
   <div class="toast" id="toast">
     <span id="toast-icon">✓</span>
@@ -691,6 +877,7 @@
     var lastSuccessfulPollAt = Date.now();
     var sessionId = null;
     var fileName = null;
+    var fileKey = null;
 
     var writeCount = 0, readCount = 0, errCount = 0;
     var totalLogEvents = 0;
@@ -708,6 +895,10 @@
     var ramEl             = document.getElementById("ram-display");
     var reindexBtn        = document.getElementById("reindex-btn");
     var reindexBtnLabel   = document.getElementById("reindex-btn-label");
+    var indexProgressWrap = document.getElementById("index-progress-wrap");
+    var indexProgressText = document.getElementById("index-progress-text");
+    var indexProgressPct  = document.getElementById("index-progress-pct");
+    var indexProgressFill = document.getElementById("index-progress-fill");
 
     var selCardEl         = document.getElementById("selection-card");
     var selIconEl         = document.getElementById("selection-icon");
@@ -722,6 +913,7 @@
 
     var currentSelectionCount = 0;
     var currentSelectionId = null;
+    var currentSelectionMainId = null;
     var currentSelectionName = "";
 
     function showToast(msg, icon) {
@@ -791,15 +983,149 @@
       parent.postMessage({ pluginMessage: { type: "export-selection-image", scale: 2 } }, "*");
     }
 
+    function copyTextFallback(text) {
+      try {
+        var textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.style.position = "fixed";
+        textarea.style.left = "-9999px";
+        textarea.style.top = "-9999px";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        var successful = document.execCommand("copy");
+        document.body.removeChild(textarea);
+        return successful;
+      } catch (err) {
+        return false;
+      }
+    }
+
+    function openKeyModal(onSuccess) {
+      var modal = document.getElementById("key-modal-overlay");
+      var input = document.getElementById("file-key-input");
+      if (modal && input) {
+        input.value = fileKey ? ("https://www.figma.com/design/" + fileKey) : "";
+        modal.classList.add("show");
+        window.__onKeySaved = onSuccess;
+        setTimeout(function() { input.focus(); input.select(); }, 50);
+      }
+    }
+
+    function closeKeyModal() {
+      var modal = document.getElementById("key-modal-overlay");
+      if (modal) modal.classList.remove("show");
+      window.__onKeySaved = null;
+    }
+
+    function saveFileKeyFromModal() {
+      var input = document.getElementById("file-key-input");
+      var val = input ? input.value.trim() : "";
+      if (val) {
+        var match = val.match(/(?:file|design)\/([a-zA-Z0-9]+)/);
+        var parsedKey = match ? match[1] : val;
+        fileKey = parsedKey;
+        parent.postMessage({ pluginMessage: { type: "set-file-key", fileKey: parsedKey } }, "*");
+        showToast("File Key saved!", "🔗");
+      }
+      var cb = window.__onKeySaved;
+      closeKeyModal();
+      if (typeof cb === "function") {
+        cb(fileKey);
+      }
+    }
+
+    function copyFileLink(event) {
+      if (event) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      openKeyModal(function(savedKey) {
+        if (savedKey) {
+          showToast("File link updated", "🔗");
+        }
+      });
+    }
+
+    function copySelectionLink(event) {
+      if (event) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      if (!currentSelectionId) {
+        showToast("No selection active", "⚠️");
+        try { parent.postMessage({ pluginMessage: { type: "notify", message: "⚠️ No frame selected to copy link", error: true } }, "*"); } catch(e) {}
+        return;
+      }
+
+      if (!fileKey) {
+        openKeyModal(function(savedKey) {
+          executeCopyLink(savedKey);
+        });
+        return;
+      }
+
+      executeCopyLink(fileKey);
+    }
+
+    function executeCopyLink(effectiveKey) {
+      if (!currentSelectionId) return;
+      
+      var targetId = currentSelectionMainId || currentSelectionId;
+      var figmaNodeId = targetId.replace(/:/g, "-");
+      
+      // Figma web link uses a sanitized slug of the file name (or untitled)
+      var cleanSlug = (fileName || "file")
+        .replace(/[\[\]\(\)\{\}]/g, "")
+        .trim()
+        .replace(/\s+/g, "-");
+      var encodedSlug = encodeURIComponent(cleanSlug);
+      
+      var link = "";
+      if (effectiveKey) {
+        link = "https://www.figma.com/design/" + effectiveKey + "/" + encodedSlug + "?node-id=" + figmaNodeId;
+      } else {
+        link = "https://www.figma.com/design/draft/" + encodedSlug + "?node-id=" + figmaNodeId;
+      }
+      
+      var copied = copyTextFallback(link);
+      if (!copied && navigator && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(link).catch(function() {});
+      }
+      
+      showToast("Link: " + figmaNodeId, "🔗");
+      try {
+        parent.postMessage({
+          pluginMessage: {
+            type: "notify",
+            message: "🔗 Link copied to clipboard! (" + figmaNodeId + ")"
+          }
+        }, "*");
+      } catch(e) {}
+    }
+
     function copySelectionId(event) {
-      if (event) event.stopPropagation();
+      if (event) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
       if (!currentSelectionId) return;
-      if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
+      var copied = copyTextFallback(currentSelectionId);
+      if (!copied && navigator && navigator.clipboard && navigator.clipboard.writeText) {
         navigator.clipboard.writeText(currentSelectionId).then(function() {
           showToast("Node ID: " + currentSelectionId + " copied", "📋");
+          try {
+            parent.postMessage({ pluginMessage: { type: "notify", message: "📋 Node ID: " + currentSelectionId + " copied" } }, "*");
+          } catch(e) {}
         }).catch(function() {
           prompt("Copy Node ID:", currentSelectionId);
         });
+      } else if (copied) {
+        showToast("Node ID: " + currentSelectionId + " copied", "📋");
+        try {
+          parent.postMessage({ pluginMessage: { type: "notify", message: "📋 Node ID: " + currentSelectionId + " copied" } }, "*");
+        } catch(e) {}
       } else {
         prompt("Copy Node ID:", currentSelectionId);
       }
@@ -1259,6 +1585,7 @@
       var list = msg.selection || [];
       currentSelectionCount = count;
       currentSelectionId = (count === 1 && list[0]) ? list[0].id : null;
+      currentSelectionMainId = (count === 1 && list[0]) ? (list[0].mainId || list[0].id) : null;
       currentSelectionName = (count === 1 && list[0]) ? (list[0].name || "Layer") : "";
 
       if (count === 0) {
@@ -1302,6 +1629,7 @@
         var prevSid = sessionId;
         sessionId = msg.sessionId || null;
         fileName = msg.fileName || null;
+        fileKey = msg.fileKey || null;
         if (fileName && docDispEl) {
           docDispEl.textContent = fileName;
           docDispEl.title = fileName + " (" + (sessionId || "active session") + ")";
@@ -1373,6 +1701,15 @@
         return;
       }
 
+      if (msg.type === "index-progress") {
+        if (reindexBtn) reindexBtn.classList.add("indexing");
+        if (indexProgressWrap) indexProgressWrap.classList.add("active");
+        if (indexProgressText && msg.label) indexProgressText.textContent = msg.label;
+        if (indexProgressPct && msg.percent !== undefined) indexProgressPct.textContent = msg.percent + "%";
+        if (indexProgressFill && msg.percent !== undefined) indexProgressFill.style.width = Math.min(100, Math.max(0, msg.percent)) + "%";
+        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) {}
@@ -1389,6 +1726,13 @@
 
       if (msg.type === "index-update") {
         if (reindexBtn) reindexBtn.classList.remove("indexing");
+        if (indexProgressPct) indexProgressPct.textContent = "100%";
+        if (indexProgressFill) indexProgressFill.style.width = "100%";
+        if (indexProgressText) indexProgressText.textContent = "Index ready";
+        setTimeout(function() {
+          if (indexProgressWrap) indexProgressWrap.classList.remove("active");
+        }, 1200);
+
         var elapsed = msg.startMs ? (Date.now() - msg.startMs) : 0;
         showToast("Indexed in " + elapsed + "ms", "✓");
         if (ws && ws.readyState === WebSocket.OPEN) {