@atezer/figma-mcp-bridge 1.2.2 → 1.3.0

package/f-mcp-plugin/ui.html

@@ -172,62 +172,6 @@
       opacity: 0.9;
     }
 
-    .cloud-panel {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      padding: 8px 10px;
-      background: var(--figma-color-bg-secondary, #383838);
-      border: 1px solid var(--figma-color-border, #4a4a4a);
-      border-radius: 8px;
-      font-size: 10px;
-    }
-    .cloud-panel label.cloud-toggle {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      cursor: pointer;
-      font-weight: 500;
-    }
-    .cloud-fields {
-      display: none;
-      flex-direction: column;
-      gap: 6px;
-    }
-    .cloud-fields.is-visible {
-      display: flex;
-    }
-    .cloud-fields .field label {
-      display: block;
-      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.7));
-      margin-bottom: 2px;
-    }
-    .cloud-fields input[type="text"],
-    .cloud-fields input[type="password"] {
-      width: 100%;
-      max-width: 220px;
-      padding: 4px 6px;
-      background: var(--figma-color-bg-tertiary, #1e1e1e);
-      border: 1px solid var(--figma-color-border, #4a4a4a);
-      border-radius: 4px;
-      color: inherit;
-      font-size: 11px;
-    }
-    .cloud-connect {
-      align-self: flex-start;
-      border: 1px solid var(--figma-color-border, #4a4a4a);
-      background: transparent;
-      color: inherit;
-      border-radius: 6px;
-      font-size: 10px;
-      padding: 4px 10px;
-      cursor: pointer;
-    }
-    .cloud-hint {
-      font-size: 9px;
-      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.55));
-    }
-
     /* Light theme support */
     @media (prefers-color-scheme: light) {
       body {
@@ -275,25 +219,6 @@
       </div>
       <button type="button" id="auto-port-reset" class="auto-port-reset" title="Tek porta kilitlenmeyi kaldırır; 5454–5470 yeniden taranır (Claude config portu ile eşleşmeli)." aria-label="5454 ile 5470 arası otomatik port taraması">Otomatik tara</button>
     </div>
-    <div class="cloud-panel" id="cloud-panel">
-      <label class="cloud-toggle"><input type="checkbox" id="cloud-mode-toggle" aria-label="Cloud Mode" /> Cloud Mode (uzak MCP, yerel Node yok)</label>
-      <div class="cloud-fields" id="cloud-fields">
-        <div class="field">
-          <label for="cloud-base">Worker URL (https://…)</label>
-          <input type="text" id="cloud-base" placeholder="https://figma-mcp-bridge.workers.dev" autocomplete="off" />
-        </div>
-        <div class="field">
-          <label for="cloud-code">Pairing code</label>
-          <input type="text" id="cloud-code" maxlength="8" placeholder="6 karakter" autocomplete="off" />
-        </div>
-        <div class="field">
-          <label for="cloud-secret">Secret</label>
-          <input type="password" id="cloud-secret" placeholder="AI / fmcp_generate_pairing_code çıktısı" autocomplete="off" />
-        </div>
-        <button type="button" id="cloud-connect" class="cloud-connect">Bağlan</button>
-        <div class="cloud-hint" id="cloud-hint">Kodlar yaklaşık 5 dk geçerlidir. Önce uzak MCP’de fmcp_generate_pairing_code çalıştırın, sonra buraya yapıştırın.</div>
-      </div>
-    </div>
   </div>
 
   <script>
@@ -670,7 +595,6 @@
           window.__figmaFileKey = msg.fileKey || null;
           window.__figmaFileName = msg.fileName || null;
           console.log('[F-MCP ATezer Bridge] File identity: ' + (msg.fileName || '?') + ' (' + (msg.fileKey || '?') + ')');
-          pushBridgeFileIdentity();
           break;
 
         case 'VARIABLES_DATA':
@@ -906,71 +830,6 @@
     var candidatePorts = [];
     var candidatePortIndex = 0;
 
-    /**
-     * WebSocket onopen often runs before FILE_IDENTITY arrives from the plugin main thread.
-     * Re-send "ready" when fileKey/fileName are known so the bridge can route multi-client RPCs.
-     */
-    function pushBridgeFileIdentity() {
-      if (!mcpBridgeWs || mcpBridgeWs.readyState !== 1) return;
-      try {
-        mcpBridgeWs.send(JSON.stringify({
-          type: 'ready',
-          fileKey: window.__figmaFileKey || null,
-          fileName: window.__figmaFileName || null
-        }));
-      } catch (_) {}
-    }
-
-    var CLOUD_MODE_KEY = 'f-mcp-cloud-mode';
-    var CLOUD_BASE_STORAGE = 'f-mcp-cloud-base';
-
-    function isCloudMode() {
-      var el = document.getElementById('cloud-mode-toggle');
-      return !!(el && el.checked);
-    }
-
-    function syncCloudFieldsVisibility() {
-      var f = document.getElementById('cloud-fields');
-      if (f) f.classList.toggle('is-visible', isCloudMode());
-    }
-
-    function buildCloudWsUrl() {
-      var baseEl = document.getElementById('cloud-base');
-      var codeEl = document.getElementById('cloud-code');
-      var secEl = document.getElementById('cloud-secret');
-      var base = (baseEl && baseEl.value || '').trim().replace(/\/$/, '');
-      var code = (codeEl && codeEl.value || '').trim().toUpperCase();
-      var secret = (secEl && secEl.value || '').trim();
-      if (!base || !code || !secret) return null;
-      var wsBase = base.indexOf('https://') === 0 ? 'wss://' + base.slice(8) : (base.indexOf('http://') === 0 ? 'ws://' + base.slice(7) : base);
-      if (wsBase.indexOf('wss://') !== 0 && wsBase.indexOf('ws://') !== 0) wsBase = 'wss://' + wsBase;
-      return wsBase + '/fmcp-cloud/plugin?code=' + encodeURIComponent(code) + '&secret=' + encodeURIComponent(secret);
-    }
-
-    function initCloudModeUi() {
-      var toggle = document.getElementById('cloud-mode-toggle');
-      var baseEl = document.getElementById('cloud-base');
-      try {
-        if (baseEl && localStorage.getItem(CLOUD_BASE_STORAGE)) baseEl.value = localStorage.getItem(CLOUD_BASE_STORAGE);
-        if (toggle && localStorage.getItem(CLOUD_MODE_KEY) === '1') toggle.checked = true;
-      } catch (e) {}
-      syncCloudFieldsVisibility();
-      if (toggle) {
-        toggle.addEventListener('change', function() {
-          try { localStorage.setItem(CLOUD_MODE_KEY, toggle.checked ? '1' : '0'); } catch (e2) {}
-          syncCloudFieldsVisibility();
-          forceDisconnectAndReconnect();
-        });
-      }
-      if (baseEl) {
-        baseEl.addEventListener('change', function() {
-          try { localStorage.setItem(CLOUD_BASE_STORAGE, (baseEl.value || '').trim()); } catch (e3) {}
-        });
-      }
-      var cbtn = document.getElementById('cloud-connect');
-      if (cbtn) cbtn.addEventListener('click', function() { forceDisconnectAndReconnect(); });
-    }
-
     /** Port alanı elle değiştirilince manualPortLocked=true olur; bu kilit 5454–5470 taramasını durdurur. */
     function unlockAutoPortScan() {
       manualPortLocked = false;
@@ -1058,8 +917,6 @@
     }
 
     function forceDisconnectAndReconnect() {
-      stopCloudPairCountdown();
-      resetCloudHintDefault();
       if (mcpBridgeReconnectTimer) { clearTimeout(mcpBridgeReconnectTimer); mcpBridgeReconnectTimer = null; }
       mcpReconnectDelay = MCP_RECONNECT_MIN;
       candidatePorts = listCandidatePorts();
@@ -1121,46 +978,6 @@
     var mcpHandshakeTimer = null;
     var mcpHandshakeDone = false;
     var mcpKeepAliveTimer = null;
-    var cloudPairCountdownTimer = null;
-    var CLOUD_PAIR_TTL_SEC = 300;
-    var CLOUD_HINT_DEFAULT = 'Kodlar yaklaşık 5 dk geçerlidir. Önce uzak MCP’de fmcp_generate_pairing_code çalıştırın, sonra buraya yapıştırın.';
-
-    function stopCloudPairCountdown() {
-      if (cloudPairCountdownTimer) {
-        clearInterval(cloudPairCountdownTimer);
-        cloudPairCountdownTimer = null;
-      }
-    }
-
-    function startCloudPairCountdown() {
-      stopCloudPairCountdown();
-      var hint = document.getElementById('cloud-hint');
-      var left = CLOUD_PAIR_TTL_SEC;
-      function fmt(t) {
-        var m = Math.floor(t / 60);
-        var s = t % 60;
-        return m + ':' + (s < 10 ? '0' : '') + s;
-      }
-      function tick() {
-        if (hint) {
-          hint.textContent = left > 0
-            ? ('Pairing penceresi (yakl.): ' + fmt(left) + ' — sunucu TTL 5 dk')
-            : 'Süre doldu; uzak MCP’de fmcp_generate_pairing_code ile yeni kod alın.';
-        }
-        if (left <= 0) {
-          stopCloudPairCountdown();
-          return;
-        }
-        left--;
-      }
-      tick();
-      cloudPairCountdownTimer = setInterval(tick, 1000);
-    }
-
-    function resetCloudHintDefault() {
-      var hint = document.getElementById('cloud-hint');
-      if (hint) hint.textContent = CLOUD_HINT_DEFAULT;
-    }
 
     function scheduleReconnect() {
       if (mcpBridgeReconnectTimer) clearTimeout(mcpBridgeReconnectTimer);
@@ -1187,269 +1004,7 @@
       if (mcpKeepAliveTimer) { clearInterval(mcpKeepAliveTimer); mcpKeepAliveTimer = null; }
     }
 
-    function handleMcpBridgeMessage(event) {
-      try {
-        var msg = JSON.parse(event.data);
-        if (msg.type === 'welcome') {
-          mcpHandshakeDone = true;
-          if (mcpHandshakeTimer) { clearTimeout(mcpHandshakeTimer); mcpHandshakeTimer = null; }
-          if (isCloudMode()) {
-            stopCloudPairCountdown();
-            var ch = document.getElementById('cloud-hint');
-            if (ch) ch.textContent = 'Bağlı. Uzak MCP oturumunda fmcp_cloud_bind çağrılmalı.';
-            console.log('[F-MCP ATezer Bridge] Cloud handshake OK — ' + (msg.bridgeVersion || '?'));
-            updateStatus('cloud ready', true, false);
-            return;
-          }
-          var port = candidatePorts[Math.min(candidatePortIndex, candidatePorts.length - 1)];
-          mcpConnectedPort = msg.port || port;
-          try { localStorage.setItem(MCP_BRIDGE_PORT_KEY, String(mcpConnectedPort)); } catch (e) {}
-          var portEl = document.getElementById('mcp-port');
-          if (portEl && mcpConnectedPort >= MCP_PORT_MIN && mcpConnectedPort <= MCP_PORT_MAX) {
-            portEl.value = String(mcpConnectedPort);
-          }
-          if (!manualPortLocked) {
-            candidatePorts = [mcpConnectedPort];
-            candidatePortIndex = 0;
-          }
-          console.log('[F-MCP ATezer Bridge] Handshake OK — bridge v' + (msg.bridgeVersion || '?') + ' on port ' + mcpConnectedPort);
-          updateStatus('ready (:' + mcpConnectedPort + ')', true, false);
-          return;
-        }
-        if (msg.type === 'ping') {
-          if (mcpBridgeWs && mcpBridgeWs.readyState === 1) {
-            mcpBridgeWs.send(JSON.stringify({ type: 'pong' }));
-          }
-          return;
-        }
-        if (!msg.id || !msg.method) return;
-        var id = msg.id;
-        var method = msg.method;
-        var params = msg.params || {};
-        var run = function() {
-          if (method === 'getVariablesFromPluginUI') {
-            return window.refreshVariables().then(function(r) {
-              if (r && r.success === false) return { success: false, error: r.error || 'Variables refresh failed' };
-              if (!window.__figmaVariablesData) return { success: false, error: 'Variables not loaded' };
-              return { success: true, variables: window.__figmaVariablesData.variables, variableCollections: window.__figmaVariablesData.variableCollections };
-            });
-          }
-          if (method === 'getComponentFromPluginUI') {
-            return window.requestComponentData(params.nodeId).then(function(data) {
-              return { success: true, component: data };
-            });
-          }
-          if (method === 'getComponentByNodeId') {
-            return window.requestComponentData(params.nodeId).then(function(data) {
-              return { success: true, component: data };
-            });
-          }
-          if (method === 'getVariables') {
-            if (!window.__figmaVariablesReady || !window.__figmaVariablesData)
-              return { success: false, error: 'Variables not loaded yet' };
-            return { success: true, timestamp: Date.now(), fileMetadata: {}, variables: window.__figmaVariablesData.variables, variableCollections: window.__figmaVariablesData.variableCollections };
-          }
-          if (method === 'executeCodeViaUI') {
-            return window.executeCode(params.code, params.timeout);
-          }
-          if (method === 'updateVariable') {
-            return window.updateVariable(params.variableId, params.modeId, params.value);
-          }
-          if (method === 'createVariable') {
-            return window.createVariable(params.name, params.collectionId, params.resolvedType, params.options);
-          }
-          if (method === 'createVariableCollection') {
-            return window.createVariableCollection(params.name, params.options);
-          }
-          if (method === 'deleteVariable') {
-            return window.deleteVariable(params.variableId);
-          }
-          if (method === 'deleteVariableCollection') {
-            return window.deleteVariableCollection(params.collectionId);
-          }
-          if (method === 'renameVariable') {
-            return window.renameVariable(params.variableId, params.newName);
-          }
-          if (method === 'addMode') {
-            return window.addMode(params.collectionId, params.modeName);
-          }
-          if (method === 'renameMode') {
-            return window.renameMode(params.collectionId, params.modeId, params.newName);
-          }
-          if (method === 'refreshVariables') {
-            return window.refreshVariables();
-          }
-          if (method === 'getLocalComponents') {
-            return window.getLocalComponents(params.currentPageOnly, params.limit);
-          }
-          if (method === 'searchLibraryAssets') {
-            return window.searchLibraryAssets(params.query, params.assetTypes, params.limit, params.currentPageOnly);
-          }
-          if (method === 'getCodeConnectHints') {
-            return window.getCodeConnectHints(params.nodeIds, params.scanCurrentPage, params.maxNodes);
-          }
-          if (method === 'instantiateComponent') {
-            return window.instantiateComponent(params.componentKey, params.options);
-          }
-          if (method === 'setNodeDescription') {
-            return window.setNodeDescription(params.nodeId, params.description, params.descriptionMarkdown);
-          }
-          if (method === 'addComponentProperty') {
-            return window.addComponentProperty(params.nodeId, params.propertyName, params.type, params.defaultValue, params.options);
-          }
-          if (method === 'editComponentProperty') {
-            return window.editComponentProperty(params.nodeId, params.propertyName, params.newValue);
-          }
-          if (method === 'deleteComponentProperty') {
-            return window.deleteComponentProperty(params.nodeId, params.propertyName);
-          }
-          if (method === 'resizeNode') {
-            return window.resizeNode(params.nodeId, params.width, params.height, params.withConstraints);
-          }
-          if (method === 'moveNode') {
-            return window.moveNode(params.nodeId, params.x, params.y);
-          }
-          if (method === 'setNodeFills') {
-            return window.setNodeFills(params.nodeId, params.fills);
-          }
-          if (method === 'setNodeStrokes') {
-            return window.setNodeStrokes(params.nodeId, params.strokes, params.strokeWeight);
-          }
-          if (method === 'setNodeOpacity') {
-            return window.setNodeOpacity(params.nodeId, params.opacity);
-          }
-          if (method === 'setNodeCornerRadius') {
-            return window.setNodeCornerRadius(params.nodeId, params.radius);
-          }
-          if (method === 'cloneNode') {
-            return window.cloneNode(params.nodeId);
-          }
-          if (method === 'deleteNode') {
-            return window.deleteNode(params.nodeId);
-          }
-          if (method === 'renameNode') {
-            return window.renameNode(params.nodeId, params.newName);
-          }
-          if (method === 'setTextContent') {
-            return window.setTextContent(params.nodeId, params.text, params.options);
-          }
-          if (method === 'createChildNode') {
-            return window.createChildNode(params.parentId, params.nodeType, params.properties);
-          }
-          if (method === 'captureScreenshot') {
-            return window.captureScreenshot(params.nodeId, params.options);
-          }
-          if (method === 'setInstanceProperties') {
-            return window.setInstanceProperties(params.nodeId, params.properties);
-          }
-          if (method === 'getDocumentStructure') {
-            return window.getDocumentStructure(params.depth, params.verbosity, params.includeLayout, params.includeVisual, params.includeTypography, params.includeCodeReady, params.outputHint);
-          }
-          if (method === 'getNodeContext') {
-            return window.getNodeContext(params.nodeId, params.depth, params.verbosity, params.includeLayout, params.includeVisual, params.includeTypography, params.includeCodeReady, params.outputHint);
-          }
-          if (method === 'getLocalStyles') {
-            return window.getLocalStyles(params.verbosity);
-          }
-          if (method === 'getConsoleLogs') {
-            return window.getConsoleLogs(params.limit);
-          }
-          if (method === 'clearConsole') {
-            return window.clearConsole();
-          }
-          if (method === 'batchCreateVariables') {
-            return window.batchCreateVariables(params.items);
-          }
-          if (method === 'batchUpdateVariables') {
-            return window.batchUpdateVariables(params.items);
-          }
-          if (method === 'setupDesignTokens') {
-            return window.setupDesignTokens(params);
-          }
-          if (method === 'arrangeComponentSet') {
-            return window.arrangeComponentSet(params.nodeIds);
-          }
-          return { success: false, error: 'Unknown method: ' + method };
-        };
-        var wsRef = mcpBridgeWs;
-        Promise.resolve(run()).then(function(result) {
-          if (wsRef && wsRef.readyState === 1) {
-            try { wsRef.send(JSON.stringify({ id: id, result: result })); } catch (_) {}
-          }
-        }).catch(function(err) {
-          if (wsRef && wsRef.readyState === 1) {
-            try { wsRef.send(JSON.stringify({ id: id, error: err.message || String(err) })); } catch (_) {}
-          }
-        });
-      } catch (e) {
-        if (mcpBridgeWs && mcpBridgeWs.readyState === 1 && msg && msg.id) {
-          try { mcpBridgeWs.send(JSON.stringify({ id: msg.id, error: e.message || String(e) })); } catch (_) {}
-        }
-      }
-    }
-
-    function connectCloudMcpBridge() {
-      if (mcpConnecting) return;
-      if (mcpBridgeWs && (mcpBridgeWs.readyState === 0 || mcpBridgeWs.readyState === 1)) return;
-      var url = buildCloudWsUrl();
-      if (!url) {
-        updateStatus('cloud: eksik alan', false, true);
-        return;
-      }
-      startCloudPairCountdown();
-      mcpConnecting = true;
-      mcpHandshakeDone = false;
-      autoPortProbeActive = false;
-      try {
-        mcpBridgeWs = new WebSocket(url);
-        var currentWs = mcpBridgeWs;
-        mcpBridgeWs.onopen = function() {
-          mcpConnecting = false;
-          mcpReconnectDelay = MCP_RECONNECT_MIN;
-          console.log('[F-MCP ATezer Bridge] Cloud WebSocket: ' + url);
-          updateStatus('cloud…', false, false);
-          currentWs.send(JSON.stringify({
-            type: 'ready',
-            fileKey: window.__figmaFileKey || null,
-            fileName: window.__figmaFileName || null
-          }));
-          startKeepAlive(currentWs);
-          if (mcpHandshakeTimer) clearTimeout(mcpHandshakeTimer);
-          mcpHandshakeTimer = setTimeout(function() {
-            if (!mcpHandshakeDone && mcpBridgeWs === currentWs) {
-              updateStatus('cloud handshake?', false, true);
-            }
-          }, 8000);
-        };
-        mcpBridgeWs.onmessage = handleMcpBridgeMessage;
-        mcpBridgeWs.onclose = function() {
-          stopKeepAlive();
-          stopCloudPairCountdown();
-          resetCloudHintDefault();
-          if (mcpBridgeWs !== currentWs) return;
-          mcpBridgeWs = null;
-          mcpConnecting = false;
-          if (mcpHandshakeTimer) { clearTimeout(mcpHandshakeTimer); mcpHandshakeTimer = null; }
-          updateStatus('cloud kapalı', false, true);
-          scheduleReconnect();
-        };
-        mcpBridgeWs.onerror = function() {
-          mcpConnecting = false;
-        };
-      } catch (e) {
-        stopCloudPairCountdown();
-        resetCloudHintDefault();
-        mcpConnecting = false;
-        updateStatus('cloud hata', false, true);
-        scheduleReconnect();
-      }
-    }
-
     function connectMcpBridge() {
-      if (isCloudMode()) {
-        connectCloudMcpBridge();
-        return;
-      }
       if (mcpConnecting) return;
       if (mcpBridgeWs && (mcpBridgeWs.readyState === 0 || mcpBridgeWs.readyState === 1)) return;
       mcpConnecting = true;
@@ -1484,7 +1039,198 @@
             }
           }, 5000);
         };
-        mcpBridgeWs.onmessage = handleMcpBridgeMessage;
+        mcpBridgeWs.onmessage = function(event) {
+          try {
+            var msg = JSON.parse(event.data);
+            if (msg.type === 'welcome') {
+              mcpHandshakeDone = true;
+              if (mcpHandshakeTimer) { clearTimeout(mcpHandshakeTimer); mcpHandshakeTimer = null; }
+              mcpConnectedPort = msg.port || port;
+              try { localStorage.setItem(MCP_BRIDGE_PORT_KEY, String(mcpConnectedPort)); } catch (e) {}
+              var portEl = document.getElementById('mcp-port');
+              if (portEl && mcpConnectedPort >= MCP_PORT_MIN && mcpConnectedPort <= MCP_PORT_MAX) {
+                portEl.value = String(mcpConnectedPort);
+              }
+              if (!manualPortLocked) {
+                candidatePorts = [mcpConnectedPort];
+                candidatePortIndex = 0;
+              }
+              console.log('[F-MCP ATezer Bridge] Handshake OK — bridge v' + (msg.bridgeVersion || '?') + ' on port ' + mcpConnectedPort);
+              updateStatus('ready (:' + mcpConnectedPort + ')', true, false);
+              return;
+            }
+            if (msg.type === 'ping') {
+              if (mcpBridgeWs && mcpBridgeWs.readyState === 1) {
+                mcpBridgeWs.send(JSON.stringify({ type: 'pong' }));
+              }
+              return;
+            }
+            if (!msg.id || !msg.method) return;
+            var id = msg.id;
+            var method = msg.method;
+            var params = msg.params || {};
+            var run = function() {
+              if (method === 'getVariablesFromPluginUI') {
+                // Always refresh first (async API) so variables work in dynamic-page context
+                return window.refreshVariables().then(function(r) {
+                  if (r && r.success === false) return { success: false, error: r.error || 'Variables refresh failed' };
+                  if (!window.__figmaVariablesData) return { success: false, error: 'Variables not loaded' };
+                  return { success: true, variables: window.__figmaVariablesData.variables, variableCollections: window.__figmaVariablesData.variableCollections };
+                });
+              }
+              if (method === 'getComponentFromPluginUI') {
+                return window.requestComponentData(params.nodeId).then(function(data) {
+                  return { success: true, component: data };
+                });
+              }
+              if (method === 'getComponentByNodeId') {
+                return window.requestComponentData(params.nodeId).then(function(data) {
+                  return { success: true, component: data };
+                });
+              }
+              if (method === 'getVariables') {
+                if (!window.__figmaVariablesReady || !window.__figmaVariablesData)
+                  return { success: false, error: 'Variables not loaded yet' };
+                return { success: true, timestamp: Date.now(), fileMetadata: {}, variables: window.__figmaVariablesData.variables, variableCollections: window.__figmaVariablesData.variableCollections };
+              }
+              if (method === 'executeCodeViaUI') {
+                return window.executeCode(params.code, params.timeout);
+              }
+              if (method === 'updateVariable') {
+                return window.updateVariable(params.variableId, params.modeId, params.value);
+              }
+              if (method === 'createVariable') {
+                return window.createVariable(params.name, params.collectionId, params.resolvedType, params.options);
+              }
+              if (method === 'createVariableCollection') {
+                return window.createVariableCollection(params.name, params.options);
+              }
+              if (method === 'deleteVariable') {
+                return window.deleteVariable(params.variableId);
+              }
+              if (method === 'deleteVariableCollection') {
+                return window.deleteVariableCollection(params.collectionId);
+              }
+              if (method === 'renameVariable') {
+                return window.renameVariable(params.variableId, params.newName);
+              }
+              if (method === 'addMode') {
+                return window.addMode(params.collectionId, params.modeName);
+              }
+              if (method === 'renameMode') {
+                return window.renameMode(params.collectionId, params.modeId, params.newName);
+              }
+              if (method === 'refreshVariables') {
+                return window.refreshVariables();
+              }
+              if (method === 'getLocalComponents') {
+                return window.getLocalComponents(params.currentPageOnly, params.limit);
+              }
+              if (method === 'searchLibraryAssets') {
+                return window.searchLibraryAssets(params.query, params.assetTypes, params.limit, params.currentPageOnly);
+              }
+              if (method === 'getCodeConnectHints') {
+                return window.getCodeConnectHints(params.nodeIds, params.scanCurrentPage, params.maxNodes);
+              }
+              if (method === 'instantiateComponent') {
+                return window.instantiateComponent(params.componentKey, params.options);
+              }
+              if (method === 'setNodeDescription') {
+                return window.setNodeDescription(params.nodeId, params.description, params.descriptionMarkdown);
+              }
+              if (method === 'addComponentProperty') {
+                return window.addComponentProperty(params.nodeId, params.propertyName, params.type, params.defaultValue, params.options);
+              }
+              if (method === 'editComponentProperty') {
+                return window.editComponentProperty(params.nodeId, params.propertyName, params.newValue);
+              }
+              if (method === 'deleteComponentProperty') {
+                return window.deleteComponentProperty(params.nodeId, params.propertyName);
+              }
+              if (method === 'resizeNode') {
+                return window.resizeNode(params.nodeId, params.width, params.height, params.withConstraints);
+              }
+              if (method === 'moveNode') {
+                return window.moveNode(params.nodeId, params.x, params.y);
+              }
+              if (method === 'setNodeFills') {
+                return window.setNodeFills(params.nodeId, params.fills);
+              }
+              if (method === 'setNodeStrokes') {
+                return window.setNodeStrokes(params.nodeId, params.strokes, params.strokeWeight);
+              }
+              if (method === 'setNodeOpacity') {
+                return window.setNodeOpacity(params.nodeId, params.opacity);
+              }
+              if (method === 'setNodeCornerRadius') {
+                return window.setNodeCornerRadius(params.nodeId, params.radius);
+              }
+              if (method === 'cloneNode') {
+                return window.cloneNode(params.nodeId);
+              }
+              if (method === 'deleteNode') {
+                return window.deleteNode(params.nodeId);
+              }
+              if (method === 'renameNode') {
+                return window.renameNode(params.nodeId, params.newName);
+              }
+              if (method === 'setTextContent') {
+                return window.setTextContent(params.nodeId, params.text, params.options);
+              }
+              if (method === 'createChildNode') {
+                return window.createChildNode(params.parentId, params.nodeType, params.properties);
+              }
+              if (method === 'captureScreenshot') {
+                return window.captureScreenshot(params.nodeId, params.options);
+              }
+              if (method === 'setInstanceProperties') {
+                return window.setInstanceProperties(params.nodeId, params.properties);
+              }
+              if (method === 'getDocumentStructure') {
+                return window.getDocumentStructure(params.depth, params.verbosity, params.includeLayout, params.includeVisual, params.includeTypography, params.includeCodeReady, params.outputHint);
+              }
+              if (method === 'getNodeContext') {
+                return window.getNodeContext(params.nodeId, params.depth, params.verbosity, params.includeLayout, params.includeVisual, params.includeTypography, params.includeCodeReady, params.outputHint);
+              }
+              if (method === 'getLocalStyles') {
+                return window.getLocalStyles(params.verbosity);
+              }
+              if (method === 'getConsoleLogs') {
+                return window.getConsoleLogs(params.limit);
+              }
+              if (method === 'clearConsole') {
+                return window.clearConsole();
+              }
+              if (method === 'batchCreateVariables') {
+                return window.batchCreateVariables(params.items);
+              }
+              if (method === 'batchUpdateVariables') {
+                return window.batchUpdateVariables(params.items);
+              }
+              if (method === 'setupDesignTokens') {
+                return window.setupDesignTokens(params);
+              }
+              if (method === 'arrangeComponentSet') {
+                return window.arrangeComponentSet(params.nodeIds);
+              }
+              return { success: false, error: 'Unknown method: ' + method };
+            };
+            var wsRef = mcpBridgeWs;
+            Promise.resolve(run()).then(function(result) {
+              if (wsRef && wsRef.readyState === 1) {
+                try { wsRef.send(JSON.stringify({ id: id, result: result })); } catch (_) {}
+              }
+            }).catch(function(err) {
+              if (wsRef && wsRef.readyState === 1) {
+                try { wsRef.send(JSON.stringify({ id: id, error: err.message || String(err) })); } catch (_) {}
+              }
+            });
+          } catch (e) {
+            if (mcpBridgeWs && mcpBridgeWs.readyState === 1 && msg && msg.id) {
+              try { mcpBridgeWs.send(JSON.stringify({ id: msg.id, error: e.message || String(e) })); } catch (_) {}
+            }
+          }
+        };
         mcpBridgeWs.onclose = function() {
           stopKeepAlive();
           if (mcpBridgeWs !== currentWs) return;
@@ -1520,7 +1266,6 @@
     }
 
     if (typeof WebSocket !== 'undefined') {
-      initCloudModeUi();
       initMcpHostInput();
       initMcpPortInput();
       initAdvancedPanel();
@@ -1530,9 +1275,7 @@
           DEFAULT_MCP_PORT = rememberedPort;
         }
       } catch (e) {}
-      if (!isCloudMode()) {
-        candidatePorts = listCandidatePorts();
-      }
+      candidatePorts = listCandidatePorts();
       connectMcpBridge();
       requestUiResize();
     }