figma-local 1.0.0

package/src/daemon.js

@@ -0,0 +1,664 @@
+#!/usr/bin/env node
+
+/**
+ * Figma CLI Daemon
+ *
+ * Supports two modes:
+ * - Yolo Mode (CDP): Direct connection via Chrome DevTools Protocol (fast, requires patching)
+ * - Safe Mode (Plugin): Connection via Figma plugin WebSocket (secure, no patching)
+ *
+ * Security features:
+ * - Session token authentication (X-Daemon-Token header)
+ * - No CORS headers (blocks cross-origin browser requests)
+ * - Host header validation (blocks DNS rebinding)
+ * - Idle timeout auto-shutdown (configurable, default 10 minutes)
+ */
+
+import { createServer } from 'http';
+import { WebSocketServer, WebSocket } from 'ws';
+import { randomBytes } from 'crypto';
+import { readFileSync, statSync, writeFileSync, unlinkSync, readdirSync } from 'fs';
+import { join, dirname } from 'path';
+import { homedir, tmpdir } from 'os';
+import { fileURLToPath, pathToFileURL } from 'url';
+
+// Hot-reload FigmaClient: copy to temp file and import (Node.js ES modules don't support cache busting)
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const figmaClientPath = join(__dirname, 'figma-client.js');
+let FigmaClient = null;
+let lastModTime = 0;
+let lastTempFile = null;
+
+async function getFigmaClient() {
+  try {
+    const stat = statSync(figmaClientPath);
+    const modTime = stat.mtimeMs;
+
+    // Reload if file changed or never loaded
+    if (!FigmaClient || modTime > lastModTime) {
+      // Clean up old temp files in project directory (keeps node_modules accessible)
+      try {
+        const oldFiles = readdirSync(__dirname).filter(f => f.startsWith('.figma-client-') && f.endsWith('.mjs'));
+        for (const f of oldFiles) {
+          try { unlinkSync(join(__dirname, f)); } catch {}
+        }
+      } catch {}
+
+      // Copy to temp file in same directory (so imports resolve correctly)
+      const tempFile = join(__dirname, `.figma-client-${modTime}.mjs`);
+      const content = readFileSync(figmaClientPath, 'utf8');
+      writeFileSync(tempFile, content);
+      lastTempFile = tempFile;
+
+      // Import from temp file
+      const tempUrl = pathToFileURL(tempFile).href;
+      const module = await import(tempUrl);
+      FigmaClient = module.FigmaClient;
+
+      const wasReload = lastModTime > 0;
+      lastModTime = modTime;
+      if (wasReload) console.log('[daemon] Hot-reloaded figma-client.js');
+    }
+  } catch (e) {
+    console.error('[daemon] Hot-reload error:', e.message);
+    // Fallback: just import normally
+    if (!FigmaClient) {
+      const module = await import('./figma-client.js');
+      FigmaClient = module.FigmaClient;
+    }
+  }
+  return FigmaClient;
+}
+
+const PORT = parseInt(process.env.DAEMON_PORT) || 3456;
+const MODE = process.env.DAEMON_MODE || 'auto'; // 'auto', 'cdp', 'plugin'
+const IDLE_TIMEOUT_MS = parseInt(process.env.DAEMON_IDLE_TIMEOUT) || 10 * 60 * 1000; // Default: 10 minutes
+
+// ============ SECURITY ============
+
+// Load session token (generated by CLI on daemon start)
+const TOKEN_FILE = join(homedir(), '.figma-ds-cli', '.daemon-token');
+let SESSION_TOKEN = null;
+
+try {
+  SESSION_TOKEN = readFileSync(TOKEN_FILE, 'utf8').trim();
+  console.log('[daemon] Session token loaded');
+} catch {
+  console.error('[daemon] WARNING: No session token found. Daemon will reject all requests.');
+}
+
+/**
+ * Validate request authentication and origin
+ * Returns null if valid, or an error string if rejected
+ */
+function validateRequest(req) {
+  // Layer 1: Host header validation (blocks DNS rebinding)
+  const host = req.headers.host || '';
+  if (!host.match(/^(localhost|127\.0\.0\.1)(:\d+)?$/)) {
+    return 'Invalid host header';
+  }
+
+  // Layer 2: Session token (blocks unauthorized local processes)
+  const token = req.headers['x-daemon-token'];
+  if (!SESSION_TOKEN) {
+    return 'No session token configured';
+  }
+  if (token !== SESSION_TOKEN) {
+    return 'Invalid or missing token';
+  }
+
+  return null; // Valid
+}
+
+// ============ IDLE TIMEOUT ============
+
+let lastActivityTime = Date.now();
+let idleTimer = null;
+
+function resetIdleTimer() {
+  lastActivityTime = Date.now();
+  if (idleTimer) clearTimeout(idleTimer);
+  idleTimer = setTimeout(() => {
+    const idleSecs = Math.round((Date.now() - lastActivityTime) / 1000);
+    console.log(`[daemon] Idle for ${idleSecs}s — auto-shutting down`);
+    shutdown();
+  }, IDLE_TIMEOUT_MS);
+}
+
+// Start the idle timer immediately
+resetIdleTimer()
+
+// CDP Client (Yolo Mode)
+let cdpClient = null;
+let isCdpConnecting = false;
+let lastHealthCheck = 0;
+let lastHealthResult = false;
+const HEALTH_CACHE_MS = 30000; // Cache health for 30 seconds (reduces overhead)
+
+// Plugin Client (Safe Mode)
+let pluginWs = null;
+let pluginPendingRequests = new Map();
+let pluginMsgId = 0;
+
+// ============ CDP MODE (YOLO) ============
+
+async function isCdpHealthy(forceCheck = false) {
+  // Quick WebSocket state check (no network call)
+  if (!cdpClient || !cdpClient.ws) return false;
+  if (cdpClient.ws.readyState !== 1) return false;
+
+  // Use cached result if recent (avoids constant eval calls)
+  const now = Date.now();
+  if (!forceCheck && now - lastHealthCheck < HEALTH_CACHE_MS) {
+    return lastHealthResult;
+  }
+
+  try {
+    const result = await Promise.race([
+      cdpClient.eval('1'), // Simple eval, just check connection works
+      new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), 2000))
+    ]);
+    lastHealthCheck = now;
+    lastHealthResult = result === 1;
+    return lastHealthResult;
+  } catch {
+    lastHealthCheck = now;
+    lastHealthResult = false;
+    return false;
+  }
+}
+
+async function getCdpClient() {
+  // Fast path: if we have a client with open WebSocket, use it
+  if (cdpClient && cdpClient.ws && cdpClient.ws.readyState === 1) {
+    return cdpClient;
+  }
+
+  // WebSocket closed, need to reconnect
+  if (cdpClient) {
+    console.log('[daemon] CDP WebSocket closed, reconnecting...');
+    try { cdpClient.close(); } catch {}
+    cdpClient = null;
+    lastHealthResult = false;
+  }
+
+  // Wait if another connection attempt is in progress
+  if (isCdpConnecting) {
+    while (isCdpConnecting) {
+      await new Promise(r => setTimeout(r, 100));
+    }
+    return cdpClient;
+  }
+
+  isCdpConnecting = true;
+  try {
+    const ClientClass = await getFigmaClient();
+    cdpClient = new ClientClass();
+    await cdpClient.connect();
+    lastHealthCheck = Date.now();
+    lastHealthResult = true;
+    console.log('[daemon] Connected to Figma via CDP (Yolo Mode)');
+  } finally {
+    isCdpConnecting = false;
+  }
+  return cdpClient;
+}
+
+async function evalViaCdp(code) {
+  const client = await getCdpClient();
+  return client.eval(code);
+}
+
+// ============ PLUGIN MODE (SAFE) ============
+
+function isPluginConnected() {
+  return pluginWs && pluginWs.readyState === WebSocket.OPEN;
+}
+
+async function evalViaPlugin(code, retryCount = 0) {
+  if (!isPluginConnected()) {
+    throw new Error('Plugin not connected. Start the Figma CLI Bridge plugin in Figma.');
+  }
+
+  return new Promise((resolve, reject) => {
+    const id = ++pluginMsgId;
+    const timeout = setTimeout(() => {
+      pluginPendingRequests.delete(id);
+      reject(new Error('Plugin execution timeout (25s)'));
+    }, 25000); // 25s timeout to match plugin-side timeout
+
+    pluginPendingRequests.set(id, { resolve, reject, timeout, code, retryCount });
+
+    try {
+      pluginWs.send(JSON.stringify({
+        action: 'eval',
+        id: id,
+        code: code
+      }));
+    } catch (sendError) {
+      clearTimeout(timeout);
+      pluginPendingRequests.delete(id);
+      reject(new Error(`Plugin send error: ${sendError.message}`));
+    }
+  });
+}
+
+// Batch eval via plugin (execute multiple codes, return all results)
+async function evalBatchViaPlugin(codes) {
+  if (!isPluginConnected()) {
+    throw new Error('Plugin not connected. Start the Figma CLI Bridge plugin in Figma.');
+  }
+
+  return new Promise((resolve, reject) => {
+    const id = ++pluginMsgId;
+    const timeout = setTimeout(() => {
+      pluginPendingRequests.delete(id);
+      reject(new Error('Plugin batch execution timeout (60s)'));
+    }, 60000); // 60s for batches
+
+    pluginPendingRequests.set(id, { resolve, reject, timeout, isBatch: true });
+
+    try {
+      pluginWs.send(JSON.stringify({
+        action: 'eval-batch',
+        id: id,
+        codes: codes
+      }));
+    } catch (sendError) {
+      clearTimeout(timeout);
+      pluginPendingRequests.delete(id);
+      reject(new Error(`Plugin batch send error: ${sendError.message}`));
+    }
+  });
+}
+
+// ============ UNIFIED EVAL ============
+
+/**
+ * Wrap code to handle top-level return statements
+ * CDP's Runtime.evaluate doesn't support bare return, so wrap in IIFE if needed
+ */
+function wrapCodeIfNeeded(code) {
+  const trimmed = code.trim();
+
+  // Already wrapped in IIFE or async IIFE
+  if (trimmed.startsWith('(async') || trimmed.startsWith('(function') || trimmed.startsWith('(() =>')) {
+    return code;
+  }
+
+  // Check if code has top-level return (not inside a function)
+  // Simple heuristic: if 'return' appears before the first '{' or at start
+  const hasTopLevelReturn = /^\s*return\b/.test(trimmed) ||
+    /;\s*return\b/.test(trimmed) ||
+    /^\s*const\s+\w+\s*=.*;\s*return\b/m.test(trimmed);
+
+  if (hasTopLevelReturn) {
+    // Wrap in async IIFE to support both sync and async code
+    return `(async () => { ${code} })()`;
+  }
+
+  return code;
+}
+
+async function executeEval(code) {
+  // Auto mode: prefer plugin if connected, fallback to CDP
+  if (MODE === 'auto') {
+    if (isPluginConnected()) {
+      // Plugin handles its own wrapping, send code as-is
+      return evalViaPlugin(code);
+    }
+    // CDP needs wrapping for top-level return statements
+    return evalViaCdp(wrapCodeIfNeeded(code));
+  }
+
+  // Explicit mode
+  if (MODE === 'plugin') {
+    // Plugin handles its own wrapping
+    return evalViaPlugin(code);
+  }
+
+  // CDP mode
+  return evalViaCdp(wrapCodeIfNeeded(code));
+}
+
+function getMode() {
+  if (MODE === 'plugin') return 'safe';
+  if (MODE === 'cdp') return 'yolo';
+  // Auto: return what's actually connected
+  if (isPluginConnected()) return 'safe';
+  if (cdpClient) return 'yolo';
+  return 'disconnected';
+}
+
+// ============ HTTP SERVER ============
+
+async function handleRequest(req, res) {
+  // Reset idle timer on every request
+  resetIdleTimer();
+
+  // SECURITY: No CORS headers (blocks all cross-origin browser requests)
+
+  // Block preflight requests (browsers send OPTIONS before cross-origin POST)
+  if (req.method === 'OPTIONS') {
+    res.writeHead(403, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ error: 'CORS preflight rejected' }));
+    return;
+  }
+
+  // SECURITY: Validate authentication on all routes
+  const authError = validateRequest(req);
+  if (authError) {
+    res.writeHead(403, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ error: 'Unauthorized: ' + authError }));
+    return;
+  }
+
+  // Health check
+  if (req.url === '/health') {
+    const mode = getMode();
+    const pluginConnected = isPluginConnected();
+    const cdpHealthy = await isCdpHealthy();
+
+    res.writeHead(200, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({
+      status: (pluginConnected || cdpHealthy) ? 'ok' : 'disconnected',
+      mode: mode,
+      plugin: pluginConnected,
+      cdp: cdpHealthy,
+      idleTimeoutMs: IDLE_TIMEOUT_MS
+    }));
+    return;
+  }
+
+  // Force reconnect (CDP only)
+  if (req.url === '/reconnect') {
+    try {
+      if (cdpClient) {
+        try { cdpClient.close(); } catch {}
+        cdpClient = null;
+      }
+      await getCdpClient();
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ status: 'reconnected', mode: 'yolo' }));
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ error: error.message }));
+    }
+    return;
+  }
+
+  // Execute command
+  if (req.url === '/exec' && req.method === 'POST') {
+    let body = '';
+    let bodyBytes = 0;
+    req.on('data', chunk => {
+      bodyBytes += chunk.length;
+      if (bodyBytes > MAX_BODY_BYTES) {
+        res.writeHead(413, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Request body too large' }));
+        req.destroy();
+        return;
+      }
+      body += chunk;
+    });
+    req.on('end', async () => {
+      const MAX_RETRIES = 2;
+      let lastError;
+
+      for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
+        try {
+          const { action, code, jsx, jsxArray, gap, vertical } = JSON.parse(body);
+          let result;
+
+          const execWithTimeout = async (fn, timeoutMs = 30000) => {
+            return Promise.race([
+              fn(),
+              new Promise((_, reject) =>
+                setTimeout(() => reject(new Error(`Execution timeout (${timeoutMs/1000}s)`)), timeoutMs)
+              )
+            ]);
+          };
+
+          switch (action) {
+            case 'eval':
+              result = await execWithTimeout(() => executeEval(code));
+              break;
+            case 'render': {
+              // Parse JSX to code, then execute via unified eval (works with both CDP and Plugin)
+              const ClientClass = await getFigmaClient();
+              const parser = new ClientClass();
+              const renderCode = await parser.parseJSX(jsx);
+              result = await execWithTimeout(() => executeEval(renderCode), 90000); // 90s for renders with icons
+              break;
+            }
+            case 'render-batch': {
+              // Single eval for ALL frames (10x faster than loop)
+              const ClientClass = await getFigmaClient();
+              const batchParser = new ClientClass();
+              const batchCode = batchParser.parseJSXBatch(jsxArray, {
+                gap: gap || 40,
+                vertical: vertical || false
+              });
+              result = await execWithTimeout(() => executeEval(batchCode), 60000); // 60s for batches
+              break;
+            }
+            default:
+              throw new Error(`Unknown action: ${action}`);
+          }
+
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ result, mode: getMode() }));
+          return;
+        } catch (error) {
+          lastError = error;
+          console.log(`[daemon] Attempt ${attempt + 1} failed: ${error.message}`);
+
+          // For Safe Mode: wait briefly for potential reconnect
+          if (attempt < MAX_RETRIES && MODE === 'plugin') {
+            console.log('[daemon] Safe Mode: waiting for plugin reconnect...');
+            // Wait up to 2s for plugin to reconnect
+            for (let i = 0; i < 10; i++) {
+              await new Promise(r => setTimeout(r, 200));
+              if (isPluginConnected()) {
+                console.log('[daemon] Plugin reconnected, retrying...');
+                break;
+              }
+            }
+          }
+
+          // For Yolo Mode: force reconnect
+          if (attempt < MAX_RETRIES && MODE !== 'plugin' && !isPluginConnected()) {
+            console.log('[daemon] Reconnecting CDP before retry...');
+            try { cdpClient.close(); } catch {}
+            cdpClient = null;
+            await new Promise(r => setTimeout(r, 200));
+          }
+        }
+      }
+
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ error: lastError.message }));
+    });
+    return;
+  }
+
+  res.writeHead(404);
+  res.end('Not found');
+}
+
+// ============ START SERVERS ============
+
+const httpServer = createServer(handleRequest);
+
+// ============ SECURITY: WebSocket nonce handshake ============
+// Prevents rogue local processes from connecting as the plugin.
+// Daemon sends a one-time challenge nonce on connect; plugin must echo it
+// back in the hello message within HANDSHAKE_TIMEOUT_MS or gets closed.
+
+const HANDSHAKE_TIMEOUT_MS = 5000;
+const MAX_BODY_BYTES = 1 * 1024 * 1024; // 1 MB request body cap
+
+// WebSocket: 1 MB max payload, reject oversized messages before parsing
+const wss = new WebSocketServer({ server: httpServer, path: '/plugin', maxPayload: MAX_BODY_BYTES });
+
+// ── Rate limiting per WebSocket connection ──
+// Max 30 eval messages per 10-second window
+const RATE_WINDOW_MS = 10_000;
+const RATE_MAX = 30;
+
+function makeRateLimiter() {
+  let count = 0;
+  let windowStart = Date.now();
+  return function isAllowed() {
+    const now = Date.now();
+    if (now - windowStart > RATE_WINDOW_MS) { count = 0; windowStart = now; }
+    if (count >= RATE_MAX) return false;
+    count++;
+    return true;
+  };
+}
+
+wss.on('connection', (ws, req) => {
+  // ── Layer 1: Origin header check ──
+  // Figma plugins send no Origin or a figma:// origin.
+  // A browser tab trying to connect would send an http(s):// origin — reject it.
+  const origin = req.headers['origin'] || '';
+  if (origin && !origin.startsWith('figma://') && !origin.startsWith('null')) {
+    console.warn(`[daemon] WebSocket rejected: bad origin "${origin}"`);
+    ws.close(1008, 'Invalid origin');
+    return;
+  }
+
+  // ── Layer 2: Nonce handshake ──
+  // Daemon sends a random challenge; plugin must echo the same nonce in hello.
+  const nonce = randomBytes(16).toString('hex');
+  let authenticated = false;
+
+  const handshakeTimer = setTimeout(() => {
+    if (!authenticated) {
+      console.warn('[daemon] WebSocket handshake timeout — closing unauthenticated connection');
+      ws.close(1008, 'Handshake timeout');
+    }
+  }, HANDSHAKE_TIMEOUT_MS);
+
+  ws.send(JSON.stringify({ type: 'challenge', nonce }));
+
+  // ── Layer 3: Rate limiter (per connection) ──
+  const checkRate = makeRateLimiter();
+
+  console.log('[daemon] Plugin connecting (Safe Mode) — awaiting handshake');
+  resetIdleTimer();
+
+  ws.on('message', (data) => {
+    resetIdleTimer();
+
+    // ── Layer 4: Message size guard (belt-and-suspenders over maxPayload) ──
+    if (data.length > MAX_BODY_BYTES) {
+      console.warn('[daemon] WebSocket message too large, dropping');
+      return;
+    }
+
+    try {
+      const msg = JSON.parse(data.toString());
+
+      // ── Handshake: must be first message ──
+      if (!authenticated) {
+        if (msg.type === 'hello' && typeof msg.nonce === 'string' && msg.nonce === nonce) {
+          authenticated = true;
+          clearTimeout(handshakeTimer);
+          pluginWs = ws;
+          console.log(`[daemon] Plugin authenticated (v${msg.version || 'unknown'})`);
+        } else {
+          console.warn('[daemon] WebSocket bad handshake — closing');
+          ws.close(1008, 'Authentication failed');
+        }
+        return; // hello is consumed; don't process further
+      }
+
+      // ── Rate limit all post-auth messages ──
+      if (!checkRate()) {
+        console.warn('[daemon] WebSocket rate limit exceeded — dropping message');
+        return;
+      }
+
+      if (msg.type === 'result') {
+        const pending = pluginPendingRequests.get(msg.id);
+        if (pending) {
+          clearTimeout(pending.timeout);
+          pluginPendingRequests.delete(msg.id);
+
+          if (msg.error) {
+            pending.reject(new Error(msg.error));
+          } else {
+            pending.resolve(msg.result);
+          }
+        }
+      }
+
+      // Batch result from plugin
+      if (msg.type === 'batch-result') {
+        const pending = pluginPendingRequests.get(msg.id);
+        if (pending) {
+          clearTimeout(pending.timeout);
+          pluginPendingRequests.delete(msg.id);
+          pending.resolve(msg.results);
+        }
+      }
+
+      // Keepalive ping from plugin
+      if (msg.type === 'ping') {
+        ws.send(JSON.stringify({ type: 'pong' }));
+      }
+
+      if (msg.type === 'pong') {
+        // Health check response
+      }
+    } catch (e) {
+      console.error('[daemon] Plugin message error:', e);
+    }
+  });
+
+  ws.on('close', () => {
+    console.log('[daemon] Plugin disconnected');
+    pluginWs = null;
+
+    // Reject all pending requests
+    for (const [id, pending] of pluginPendingRequests) {
+      clearTimeout(pending.timeout);
+      pending.reject(new Error('Plugin disconnected'));
+    }
+    pluginPendingRequests.clear();
+  });
+
+  ws.on('error', (error) => {
+    console.error('[daemon] Plugin WebSocket error:', error.message);
+  });
+});
+
+httpServer.listen(PORT, '127.0.0.1', () => {
+  console.log(`[daemon] Figma CLI daemon running on port ${PORT}`);
+  console.log(`[daemon] Mode: ${MODE === 'auto' ? 'auto (plugin preferred, CDP fallback)' : MODE}`);
+  console.log(`[daemon] Idle timeout: ${IDLE_TIMEOUT_MS / 1000}s`);
+  console.log(`[daemon] Auth: token required`);
+});
+
+// Graceful shutdown
+process.on('SIGTERM', shutdown);
+process.on('SIGINT', shutdown);
+
+function shutdown() {
+  console.log('[daemon] Shutting down...');
+  if (idleTimer) clearTimeout(idleTimer);
+  if (cdpClient) cdpClient.close();
+  if (pluginWs) pluginWs.close();
+  httpServer.close(() => process.exit(0));
+  // Force exit after 3 seconds if graceful shutdown hangs
+  setTimeout(() => process.exit(0), 3000);
+}
+
+// In auto/cdp mode, pre-connect to Figma
+if (MODE !== 'plugin') {
+  getCdpClient().catch(err => {
+    console.log('[daemon] CDP not available, waiting for plugin connection...');
+  });
+}