@fridaplatform-stk/figma2frida-mcp 1.0.0

package/dist/figma2frida.js

@@ -0,0 +1,2840 @@
+#!/usr/bin/env node
+
+// src/figma2frida/figma2frida.ts
+import "dotenv/config";
+import { z } from "zod";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+import { FastMCP } from "fastmcp";
+
+// src/figma2frida/clients/figma-client.ts
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+var FigmaClient = class {
+  client = null;
+  connected = false;
+  figmaUrl;
+  constructor(figmaUrl = "http://127.0.0.1:3845/sse") {
+    this.figmaUrl = figmaUrl;
+  }
+  /**
+   * Connect to Figma MCP server
+   */
+  async connect(retries = 3) {
+    if (this.connected && this.client) {
+      console.log("[FIGMA CLIENT] Already connected, skipping connection attempt");
+      return;
+    }
+    console.log(`[FIGMA CLIENT] ========================================`);
+    console.log(`[FIGMA CLIENT] \u{1F504} Starting connection attempt`);
+    console.log(`[FIGMA CLIENT] URL: ${this.figmaUrl}`);
+    console.log(`[FIGMA CLIENT] Max retries: ${retries}`);
+    console.log(`[FIGMA CLIENT] Current status: connected=${this.connected}, client=${!!this.client}`);
+    console.log(`[FIGMA CLIENT] ========================================`);
+    for (let attempt = 0; attempt < retries; attempt++) {
+      const attemptStartTime = Date.now();
+      console.log(`[FIGMA CLIENT] \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500`);
+      console.log(`[FIGMA CLIENT] Attempt ${attempt + 1}/${retries} starting...`);
+      try {
+        console.log(`[FIGMA CLIENT] Creating MCP Client object...`);
+        this.client = new Client(
+          {
+            name: "figma-proxy-client",
+            version: "1.0.0"
+          },
+          {
+            capabilities: {
+              tools: {}
+            }
+          }
+        );
+        console.log(`[FIGMA CLIENT] \u2713 Client object created`);
+        console.log(`[FIGMA CLIENT] Creating SSE Transport for: ${this.figmaUrl}`);
+        const transport = new SSEClientTransport(new URL(this.figmaUrl));
+        console.log(`[FIGMA CLIENT] \u2713 Transport object created`);
+        console.log(`[FIGMA CLIENT] Attempting to connect...`);
+        const connectStartTime = Date.now();
+        await this.client.connect(transport);
+        const connectTime = Date.now() - connectStartTime;
+        console.log(`[FIGMA CLIENT] \u2713 Connection established in ${connectTime}ms`);
+        this.connected = true;
+        const totalTime = Date.now() - attemptStartTime;
+        console.log(`[FIGMA CLIENT] ========================================`);
+        console.log(`[FIGMA CLIENT] \u2705 CONNECTION SUCCESS!`);
+        console.log(`[FIGMA CLIENT] URL: ${this.figmaUrl}`);
+        console.log(`[FIGMA CLIENT] Attempt: ${attempt + 1}/${retries}`);
+        console.log(`[FIGMA CLIENT] Total time: ${totalTime}ms`);
+        console.log(`[FIGMA CLIENT] ========================================`);
+        return;
+      } catch (error) {
+        const attemptTime = Date.now() - attemptStartTime;
+        console.log(`[FIGMA CLIENT] \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500`);
+        console.log(`[FIGMA CLIENT] \u274C Connection attempt ${attempt + 1}/${retries} FAILED`);
+        console.log(`[FIGMA CLIENT] Time elapsed: ${attemptTime}ms`);
+        console.log(`[FIGMA CLIENT] Error type: ${error?.constructor?.name || typeof error}`);
+        console.log(`[FIGMA CLIENT] Error message: ${error instanceof Error ? error.message : String(error)}`);
+        if (error && typeof error === "object") {
+          const errorObj = error;
+          if ("code" in errorObj) {
+            console.log(`[FIGMA CLIENT] Error code: ${errorObj.code}`);
+          }
+          if ("cause" in errorObj) {
+            console.log(`[FIGMA CLIENT] Error cause:`, errorObj.cause);
+          }
+          if ("status" in errorObj) {
+            console.log(`[FIGMA CLIENT] HTTP status: ${errorObj.status}`);
+          }
+          if ("statusText" in errorObj) {
+            console.log(`[FIGMA CLIENT] HTTP status text: ${errorObj.statusText}`);
+          }
+        }
+        if (error instanceof Error && error.stack) {
+          console.log(`[FIGMA CLIENT] Error stack:`);
+          console.log(error.stack);
+        }
+        if (attempt === retries - 1) {
+          console.log(`[FIGMA CLIENT] ========================================`);
+          console.log(`[FIGMA CLIENT] \u274C ALL CONNECTION ATTEMPTS FAILED`);
+          console.log(`[FIGMA CLIENT] Total attempts: ${retries}`);
+          console.log(`[FIGMA CLIENT] URL: ${this.figmaUrl}`);
+          console.log(`[FIGMA CLIENT] ========================================`);
+          throw new Error(
+            `Failed to connect to Figma MCP at ${this.figmaUrl} after ${retries} attempts. Make sure Figma Desktop is running with MCP enabled.`
+          );
+        }
+        const waitTime = 1e3 * (attempt + 1);
+        console.log(`[FIGMA CLIENT] Waiting ${waitTime}ms before retry...`);
+        await new Promise(
+          (resolve) => setTimeout(resolve, waitTime)
+        );
+        console.log(`[FIGMA CLIENT] Wait complete, retrying...`);
+      }
+    }
+  }
+  /**
+   * Ensure connection is established
+   */
+  async ensureConnected() {
+    if (!this.connected || !this.client) {
+      console.log("[FIGMA CLIENT] ensureConnected() called - not connected, attempting connection...");
+      await this.connect();
+    } else {
+      console.log("[FIGMA CLIENT] ensureConnected() called - already connected, skipping");
+    }
+  }
+  /**
+   * Call Figma's get_design_context tool
+   */
+  async getDesignContext(nodeId, options) {
+    await this.ensureConnected();
+    const args = {
+      ...nodeId ? { nodeId } : {},
+      clientLanguages: options?.clientLanguages || "typescript",
+      clientFrameworks: options?.clientFrameworks || "react",
+      forceCode: options?.forceCode ?? true
+    };
+    console.log(`[FIGMA CLIENT] Calling get_design_context with args:`, args);
+    try {
+      const result = await this.client.callTool({
+        name: "get_design_context",
+        arguments: args
+      });
+      console.log(`[FIGMA CLIENT] get_design_context response type:`, typeof result);
+      console.log(
+        `[FIGMA CLIENT] get_design_context response keys:`,
+        Object.keys(result)
+      );
+      return result;
+    } catch (error) {
+      console.warn("Error calling get_design_context, attempting reconnect...");
+      this.connected = false;
+      await this.connect();
+      const result = await this.client.callTool({
+        name: "get_design_context",
+        arguments: {
+          ...nodeId ? { nodeId } : {},
+          clientLanguages: options?.clientLanguages || "typescript",
+          clientFrameworks: options?.clientFrameworks || "react",
+          forceCode: options?.forceCode ?? true
+        }
+      });
+      return result;
+    }
+  }
+  /**
+   * Call Figma's get_metadata tool to get actual node structure
+   */
+  async getMetadata(nodeId, options) {
+    await this.ensureConnected();
+    const args = {
+      ...nodeId ? { nodeId } : {},
+      clientLanguages: options?.clientLanguages || "typescript",
+      clientFrameworks: options?.clientFrameworks || "react"
+    };
+    console.log(`[FIGMA CLIENT] Calling get_metadata with args:`, args);
+    try {
+      const result = await this.client.callTool({
+        name: "get_metadata",
+        arguments: args
+      });
+      console.log(`[FIGMA CLIENT] get_metadata response type:`, typeof result);
+      console.log(
+        `[FIGMA CLIENT] get_metadata response keys:`,
+        Object.keys(result)
+      );
+      return result;
+    } catch (error) {
+      console.warn("Error calling get_metadata, attempting reconnect...");
+      this.connected = false;
+      await this.connect();
+      const result = await this.client.callTool({
+        name: "get_metadata",
+        arguments: args
+      });
+      return result;
+    }
+  }
+  /**
+   * Call Figma's get_screenshot tool
+   */
+  async getScreenshot(nodeId, options) {
+    await this.ensureConnected();
+    try {
+      const result = await this.client.callTool({
+        name: "get_screenshot",
+        arguments: {
+          ...nodeId ? { nodeId } : {},
+          clientLanguages: options?.clientLanguages || "typescript",
+          clientFrameworks: options?.clientFrameworks || "react"
+        }
+      });
+      return result;
+    } catch (error) {
+      console.warn("Error calling get_screenshot, attempting reconnect...");
+      this.connected = false;
+      await this.connect();
+      const result = await this.client.callTool({
+        name: "get_screenshot",
+        arguments: {
+          ...nodeId ? { nodeId } : {},
+          clientLanguages: options?.clientLanguages || "typescript",
+          clientFrameworks: options?.clientFrameworks || "react"
+        }
+      });
+      return result;
+    }
+  }
+  /**
+   * Close connection
+   */
+  async disconnect() {
+    if (this.client) {
+      await this.client.close();
+      this.connected = false;
+      this.client = null;
+      console.log("Disconnected from Figma MCP");
+    }
+  }
+};
+
+// src/figma2frida/handlers/component-suggestion-handler.ts
+import "dotenv/config";
+
+// src/figma2frida/services/pinecone/pinecone-service.ts
+import { Pinecone } from "@pinecone-database/pinecone";
+import "dotenv/config";
+var PineconeSearchService = class {
+  apiKey;
+  indexName;
+  namespace;
+  minScore;
+  topK;
+  fridaEmbeddingUrl;
+  fridaApiKey;
+  pinecone = null;
+  index = null;
+  constructor(options = {}) {
+    this.apiKey = options.apiKey || process.env.PINECONE_API_KEY || (() => {
+      throw new Error(
+        "PINECONE_API_KEY is required. Set it in .env or pass it in options."
+      );
+    })();
+    this.indexName = process.env.PINECONE_INDEX;
+    this.namespace = options.namespace;
+    this.minScore = parseFloat(process.env.PINECONE_MIN_SCORE);
+    this.topK = parseInt(process.env.PINECONE_TOP_K, 10);
+    this.fridaEmbeddingUrl = options.fridaEmbeddingUrl || process.env.FRIDA_EMBEDDING_URL || (() => {
+      throw new Error(
+        "FRIDA_EMBEDDING_URL is required. Set it in .env or pass it in options."
+      );
+    })();
+    this.fridaApiKey = options.fridaApiKey || process.env.FRIDA_BEARER_TOKEN || (() => {
+      throw new Error(
+        "FRIDA_BEARER_TOKEN is required. Set it in .env or pass it in options."
+      );
+    })();
+    this.pinecone = new Pinecone({ apiKey: this.apiKey });
+  }
+  /**
+   * Initializes the Pinecone index (lazy loading)
+   * Namespace is set here when getting the index reference using method chaining
+   */
+  async initialize() {
+    if (!this.index) {
+      console.log(`[PINECONE] Connecting to index: ${this.indexName}${this.namespace ? ` namespace "${this.namespace}"` : ""}`);
+      const indexRef = this.pinecone.index(this.indexName);
+      this.index = this.namespace ? indexRef.namespace(this.namespace) : indexRef;
+      console.log(`[PINECONE] Connected to index: ${this.indexName}${this.namespace ? ` namespace "${this.namespace}"` : ""}`);
+    }
+  }
+  /**
+   * Generates embedding for a text using Frida API
+   * @param text - Text to embed
+   * @returns Promise<number[]> Embedding vector (1536 dimensions)
+   */
+  async generateEmbedding(text) {
+    try {
+      console.log(`[PINECONE] Calling Frida Embedding API...`);
+      const startTime = Date.now();
+      const response = await fetch(this.fridaEmbeddingUrl, {
+        method: "POST",
+        headers: {
+          accept: "application/json",
+          Authorization: `Bearer ${this.fridaApiKey}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          input: text,
+          model: "text-embedding-ada-002",
+          user_id: "pinecone-search",
+          email: "design_system@example.com"
+        })
+      });
+      console.log(`[PINECONE] API response status: ${response.status}`);
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error(`[PINECONE] API Error response:`, errorText);
+        throw new Error(`API Error: ${response.status} ${response.statusText}`);
+      }
+      console.log(`[PINECONE] Parsing API response...`);
+      const data = await response.json();
+      if (!data.data || !data.data[0] || !data.data[0].embedding) {
+        console.error(`[PINECONE] Invalid response format:`, JSON.stringify(data).substring(0, 200));
+        throw new Error("Invalid API response format");
+      }
+      const embedding = data.data[0].embedding;
+      const elapsed = Date.now() - startTime;
+      console.log(`[PINECONE] \u2713 Embedding generated (${embedding.length} dims) in ${elapsed}ms`);
+      return embedding;
+    } catch (error) {
+      console.error(`[PINECONE] \u2717 Error generating embedding:`, error instanceof Error ? error.message : String(error));
+      throw new Error(`Failed to generate embedding: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  }
+  /**
+   * Parses a Pinecone match to structured format
+   * Supports new schema with properties, events, methods, slots, etc.
+   */
+  parseMatch(match) {
+    const metadata = match.metadata || {};
+    let props = [];
+    try {
+      if (metadata.properties) {
+        const parsedProps = JSON.parse(
+          metadata.properties
+        );
+        if (Array.isArray(parsedProps)) {
+          props = parsedProps.map((p) => ({
+            name: p.name || "unknown",
+            type_signature: p.type_signature || "unknown",
+            default_value: p.default_value,
+            description: p.description || "",
+            is_utility_prop: p.is_utility_prop || false,
+            reflects_to_attribute: p.reflects_to_attribute || false
+          }));
+        }
+      }
+    } catch {
+      props = [];
+    }
+    let events = [];
+    try {
+      if (metadata.events) {
+        const parsedEvents = JSON.parse(
+          metadata.events
+        );
+        if (Array.isArray(parsedEvents)) {
+          events = parsedEvents.map((e) => ({
+            name: e.name || "unknown",
+            payload_type: e.payload_type || "any",
+            description: e.description || ""
+          }));
+        }
+      }
+    } catch {
+      events = [];
+    }
+    let methods = [];
+    try {
+      if (metadata.methods) {
+        const parsedMethods = JSON.parse(metadata.methods);
+        if (Array.isArray(parsedMethods)) {
+          methods = parsedMethods.map((m) => ({
+            name: m.name || "unknown",
+            parameters: m.parameters || "null",
+            description: m.description || ""
+          }));
+        }
+      }
+    } catch {
+      methods = [];
+    }
+    let slots = [];
+    try {
+      if (metadata.slots) {
+        const parsedSlots = JSON.parse(metadata.slots);
+        if (Array.isArray(parsedSlots)) {
+          slots = parsedSlots.map((s) => ({
+            name: s.name || "unknown",
+            description: s.description || ""
+          }));
+        }
+      }
+    } catch {
+      slots = [];
+    }
+    let usage_examples = [];
+    try {
+      if (metadata.usage_examples) {
+        const parsedExamples = JSON.parse(metadata.usage_examples);
+        if (Array.isArray(parsedExamples)) {
+          usage_examples = parsedExamples.map((ex) => ({
+            title: ex.title || "",
+            description: ex.description || "",
+            code: {
+              template: ex.code?.template || "",
+              script: ex.code?.script
+            }
+          }));
+        }
+      }
+    } catch {
+      usage_examples = [];
+    }
+    let usage_limitations = [];
+    try {
+      if (metadata.usage_limitations) {
+        const parsedLimitations = JSON.parse(metadata.usage_limitations);
+        if (Array.isArray(parsedLimitations)) {
+          usage_limitations = parsedLimitations;
+        }
+      }
+    } catch {
+      usage_limitations = [];
+    }
+    let hooks_or_services = [];
+    try {
+      if (metadata.hooks_or_services) {
+        const parsedHooks = JSON.parse(metadata.hooks_or_services);
+        if (Array.isArray(parsedHooks)) {
+          hooks_or_services = parsedHooks;
+        }
+      }
+    } catch {
+      hooks_or_services = [];
+    }
+    const tag = metadata.selector || metadata.id || "unknown";
+    return {
+      tag,
+      score: match.score || 0,
+      category: metadata.category || "General",
+      description: metadata.short_description || "",
+      keywords: metadata.keywords || "",
+      props,
+      events,
+      // New fields
+      id: metadata.id,
+      selector: metadata.selector,
+      human_name: metadata.human_name,
+      full_readme: metadata.full_readme,
+      visual_variants_description: metadata.visual_variants_description,
+      framework_type: metadata.framework_type,
+      import_statement: metadata.import_statement,
+      is_global: metadata.is_global,
+      module_import: metadata.module_import,
+      content_injection_method: metadata.content_injection_method,
+      methods,
+      slots,
+      usage_limitations,
+      usage_examples,
+      hooks_or_services
+    };
+  }
+  /**
+   * Searches for components in Pinecone
+   * @param query - Search query
+   * @param options - Search options
+   * @returns Structured results
+   */
+  async search(query, options = {}) {
+    if (!query || typeof query !== "string") {
+      throw new Error("Query must be a non-empty string");
+    }
+    await this.initialize();
+    const minScore = options.minScore !== void 0 ? options.minScore : this.minScore;
+    const topK = options.topK !== void 0 ? options.topK : this.topK;
+    console.log(`[PINECONE] Starting search - Query: "${query}", topK: ${topK}, minScore: ${minScore}${this.namespace ? `, namespace: "${this.namespace}"` : ""}`);
+    const embedding = await this.generateEmbedding(query);
+    console.log(`[PINECONE] Querying Pinecone index "${this.indexName}"${this.namespace ? ` namespace "${this.namespace}"` : ""}...`);
+    const startTime = Date.now();
+    const queryResponse = await this.index.query({
+      vector: embedding,
+      topK,
+      includeMetadata: true
+    });
+    const queryTime = Date.now() - startTime;
+    console.log(`[PINECONE] Query completed in ${queryTime}ms - Found ${queryResponse.matches?.length || 0} matches`);
+    const allMatches = queryResponse.matches || [];
+    const relevantMatches = allMatches.filter((m) => (m.score || 0) >= minScore);
+    console.log(`[PINECONE] Filtered results: ${relevantMatches.length} relevant (score >= ${minScore}) out of ${allMatches.length} total`);
+    return {
+      query,
+      totalMatches: allMatches.length,
+      relevantMatches: relevantMatches.length,
+      matches: relevantMatches.map((match) => this.parseMatch(match)),
+      lowScoreMatches: allMatches.filter((m) => (m.score || 0) < minScore).map((match) => {
+        const metadata = match.metadata || {};
+        const tag = metadata.selector || metadata.id || metadata.tag || "unknown";
+        return {
+          tag,
+          score: match.score || 0
+        };
+      }),
+      searchMetadata: {
+        minScore,
+        topK,
+        indexName: this.indexName,
+        namespace: this.namespace
+      }
+    };
+  }
+  /**
+   * Gets details of a specific component by tag, selector, or id
+   * @param tag - Component tag, selector, or id (e.g.: 'my-badge', 'Button', 'custom-table')
+   * @returns Component details or null if it doesn't exist
+   */
+  async getComponentDetails(tag) {
+    if (!tag || typeof tag !== "string") {
+      throw new Error("Tag must be a non-empty string");
+    }
+    await this.initialize();
+    const results = await this.search(tag, { topK: 10, minScore: 0 });
+    const exactMatch = results.matches.find(
+      (m) => m.tag === tag || m.selector === tag || m.id === tag
+    );
+    if (exactMatch) {
+      return exactMatch;
+    }
+    if (results.matches.length > 0) {
+      return results.matches[0];
+    }
+    return null;
+  }
+  /**
+   * Searches for multiple components by tags
+   * @param tags - Array of component tags
+   * @returns Array of component details
+   */
+  async getMultipleComponents(tags) {
+    if (!Array.isArray(tags)) {
+      throw new Error("Tags must be an array");
+    }
+    const results = await Promise.all(
+      tags.map((tag) => this.getComponentDetails(tag))
+    );
+    return results.filter(
+      (r) => r !== null
+    );
+  }
+};
+
+// src/figma2frida/services/frida/frida-client.ts
+import "dotenv/config";
+var FridaClient = class {
+  apiKey;
+  apiUrl;
+  model;
+  maxTokens;
+  enabled;
+  constructor(options = {}) {
+    this.apiKey = options.apiKey || process.env.FRIDA_BEARER_TOKEN;
+    this.apiUrl = options.apiUrl || process.env.FRIDA_API_URL;
+    this.model = options.model || process.env.FRIDA_MODEL || "Innovation-gpt4o";
+    this.maxTokens = options.maxTokens || (process.env.FRIDA_MAX_TOKENS ? parseInt(process.env.FRIDA_MAX_TOKENS, 10) : 4096);
+    this.enabled = !!(this.apiKey && this.apiUrl);
+  }
+  /**
+   * Checks if Frida is configured
+   */
+  isEnabled() {
+    return this.enabled;
+  }
+  /**
+   * Generates the optimized prompt for code generation
+   */
+  buildPrompt(question, context) {
+    return `You are an expert agent in code generation for UI design systems and component libraries.
+Your goal is to provide technical, precise, and ready-to-use answers that enable generating functional code immediately.
+
+**\u{1F6A8} CRITICAL RULES - MANDATORY COMPLIANCE:**
+
+1. **You MUST use ONLY the components** from the AVAILABLE COMPONENT INFORMATION below
+2. **NEVER suggest or use:**
+   - \u274C Components from other libraries not listed in the AVAILABLE COMPONENT INFORMATION
+   - \u274C Generic HTML form elements: <button>, <input>, <select>, <textarea> (unless they are wrapped in design system components)
+   - \u274C Any other component library or framework-specific components not in the AVAILABLE COMPONENT INFORMATION
+
+3. **Use components exactly as documented** - they may be Web Components, React components, Angular components, or any other framework
+4. **If a component is not in the AVAILABLE COMPONENT INFORMATION**, say so clearly - DO NOT invent or use generic alternatives
+
+**EXAMPLES OF WHAT NOT TO DO:**
+- \u274C WRONG: Using components from other libraries (mat-*, MUI, etc.) unless they appear in AVAILABLE COMPONENT INFORMATION
+- \u274C WRONG: Using any component that is NOT in the AVAILABLE COMPONENT INFORMATION below
+- \u274C WRONG: Inventing component names or props not in the documentation
+
+**EXAMPLES OF WHAT TO DO:**
+- \u2705 Use ONLY components from the AVAILABLE COMPONENT INFORMATION below
+- \u2705 Check the component tag/selector in the AVAILABLE COMPONENT INFORMATION before using it
+- \u2705 Use the exact component names, props, and events as shown in the AVAILABLE COMPONENT INFORMATION
+- \u2705 Follow the framework_type and import_statement provided for each component
+- \u2705 If a component is not listed in AVAILABLE COMPONENT INFORMATION, do NOT use it - say clearly that it doesn't exist
+
+## AVAILABLE COMPONENT INFORMATION:
+
+The component information below is provided in JSON format for accurate parsing.
+Use the exact prop names, types, and structure as shown in the JSON.
+
+${context}
+
+**IMPORTANT:** The component information above is in JSON format. Parse it carefully and use:
+- Exact prop names as shown in the props array
+- Exact prop types from type_signature field
+- Event names exactly as shown in the events array
+- Framework type from framework_type field
+- Import statements from import_statement field
+- Follow the structure and patterns from the JSON data
+
+## RESPONSE INSTRUCTIONS:
+
+### 1. MANDATORY STRUCTURE:
+Your response MUST follow this format:
+
+\u{1F6A8} **RECOMMENDED COMPONENT:** [component name - MUST be from AVAILABLE COMPONENT INFORMATION]
+**CATEGORY:** [component category]
+**FRAMEWORK:** [framework_type from the component data]
+
+**DESCRIPTION:**
+[Brief explanation of the component and when to use it]
+
+**IMPORT:**
+\`\`\`
+[import_statement from the component data if available]
+\`\`\`
+
+**EXAMPLE CODE:**
+\`\`\`html
+[Minimal functional and complete example]
+\`\`\`
+
+**IMPORTANT PROPERTIES:**
+[List of key properties with types and possible values]
+- \`property\`: \`type_signature\` - [description]
+
+**EVENT HANDLING:**
+[If applicable, how to listen and handle events]
+\`\`\`javascript
+[Example code to handle events]
+\`\`\`
+
+**ADDITIONAL NOTES:**
+[Any important considerations, best practices, or limitations]
+
+### 2. CODE GENERATION RULES:
+
+1. **Use ONLY components from the AVAILABLE COMPONENT INFORMATION above** - Do NOT use components from other libraries
+2. **Do not invent properties or events** - Use only what exists in the component documentation provided
+3. **Exact types:** Include the exact types of properties from type_signature field
+4. **Functional code:** The example code MUST be copyable and functional
+5. **Required props:** If a prop is required, indicate it clearly
+6. **Default values:** If there are default values (default_value field), mention them
+7. **Events:** Include examples of how to listen to events if the component emits them
+8. **Framework compatibility:** Use the framework_type and import_statement from the component data
+9. **Necessary imports:** Include the import_statement from the component data
+10. **If a component doesn't exist:** Say clearly "No component available for [feature]. Available components are: [list]"
+
+### 3. QUESTION ANALYSIS:
+
+- If asking about a specific component: Provide complete technical documentation
+- If asking "how to do X": Suggest the most suitable component AND provide functional code
+- If asking about properties: List ALL relevant properties with exact types
+- If asking about events: Provide complete examples of event handling
+
+### 4. TECHNICAL ACCURACY:
+
+- Use the exact names of properties as they appear in the documentation
+- Respect exact types (union types, enums, etc.)
+- Include all attributes necessary for the code to work
+- Mention if there are slots available and how to use them
+
+### 5. IF NO INFORMATION:
+
+If the context does not contain enough information to answer, say clearly:
+"I don't have enough information about [aspect] in the provided context. Available components are: [list]"
+
+## USER QUESTION:
+${question}
+
+## RESPONSE (Follow the mandatory structure above):`.trim();
+  }
+  /**
+   * Builds a specialized prompt for code generation from Figma designs
+   */
+  buildCodeGenerationPrompt(originalCode, componentContext) {
+    const elementMatches = originalCode.match(/<\w+/g) || [];
+    const elementCount = elementMatches.length;
+    return `You are an expert in generating code using design system components.
+
+**TASK:** Transform the Figma-generated code below to use design system components from the AVAILABLE COMPONENT INFORMATION.
+
+**\u{1F6A8} CRITICAL RULES - MANDATORY:**
+
+1. **PRESERVE EVERY SINGLE ELEMENT** - The original code has approximately ${elementCount} HTML elements. You MUST transform ALL of them, not just a few examples. Do NOT summarize, simplify, or create examples.
+2. **PRESERVE ALL TEXT CONTENT EXACTLY** - Keep ALL text, labels, placeholders, button text, input values, and content exactly as shown in the original code. DO NOT change, invent, or modify any text content.
+3. **PRESERVE ALL STRUCTURE** - Maintain EVERY div, container, class, style, id, data attribute, and layout element exactly as in the original.
+4. **Use ONLY components from AVAILABLE COMPONENT INFORMATION** - Do NOT use components from other libraries or generic HTML elements unless no alternative exists
+5. **Use EXACT prop names and types** from the component documentation (check type_signature field)
+6. **Map HTML attributes to correct component props** based on component documentation
+7. **Handle events properly** if the component emits them (check events array)
+8. **Use slots or content_injection_method** if the component supports them
+9. **Generate functional, copyable code** that works immediately
+10. **Follow framework_type and import_statement** from the component data
+
+**CRITICAL REQUIREMENTS:**
+- Transform EVERY element in the original code (approximately ${elementCount} elements)
+- Keep ALL text content exactly as it appears in the original (no changes to labels, placeholders, values, etc.)
+- Maintain ALL CSS classes, inline styles, ids, data attributes, and structure
+- Do NOT summarize, simplify, or create examples - transform the ENTIRE code
+- If you cannot transform an element (component doesn't exist), preserve it as-is with all its attributes and content
+
+**VALIDATION:**
+After transformation, you should have approximately the same number of elements as the original (${elementCount}). Every element must be accounted for.
+
+## AVAILABLE COMPONENT INFORMATION:
+
+${componentContext}
+
+## ORIGINAL CODE FROM FIGMA:
+
+\`\`\`html
+${originalCode}
+\`\`\`
+
+## YOUR TASK:
+
+Transform the ENTIRE code above to use design system components. Return ONLY the complete transformed HTML code wrapped in \`\`\`html code blocks. Include ALL ${elementCount} elements and ALL text from the original. No explanations or markdown outside the code block.
+
+**Transformed Code (must include all ${elementCount} elements with all original text):**
+\`\`\`html
+`;
+  }
+  /**
+   * Generates code using component documentation from Pinecone
+   * @param originalCode - Original code from Figma
+   * @param componentContext - Component documentation from Pinecone (JSON format)
+   * @returns Frida response with generated code
+   */
+  async generateCode(originalCode, componentContext) {
+    if (!this.enabled) {
+      return {
+        success: false,
+        error: "Frida AI is not configured. Set FRIDA_BEARER_TOKEN and FRIDA_API_URL in .env",
+        response: null
+      };
+    }
+    if (!originalCode || typeof originalCode !== "string") {
+      return {
+        success: false,
+        error: "Original code must be a non-empty string",
+        response: null
+      };
+    }
+    console.log(`
+[FRIDA CODE GEN] ========================================`);
+    console.log(`[FRIDA CODE GEN] \u{1F680} CALLING FRIDA AI FOR CODE GENERATION`);
+    console.log(`[FRIDA CODE GEN] ========================================`);
+    const prompt = this.buildCodeGenerationPrompt(originalCode, componentContext);
+    const codeGenMaxTokens = process.env.FRIDA_CODE_GEN_MAX_TOKENS ? parseInt(process.env.FRIDA_CODE_GEN_MAX_TOKENS, 10) : Math.max(this.maxTokens, 16384);
+    console.log(`[FRIDA CODE GEN] Model: ${this.model}`);
+    console.log(`[FRIDA CODE GEN] Original code length: ${originalCode.length} chars`);
+    console.log(`[FRIDA CODE GEN] Component context length: ${componentContext.length} chars`);
+    console.log(`[FRIDA CODE GEN] Max tokens: ${codeGenMaxTokens} (default: ${this.maxTokens})`);
+    try {
+      const startTime = Date.now();
+      const response = await fetch(this.apiUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${this.apiKey}`
+        },
+        body: JSON.stringify({
+          model: this.model,
+          input: prompt,
+          max_tokens: codeGenMaxTokens,
+          stream: false,
+          email: "design_system@example.com"
+        })
+      });
+      const fetchTime = Date.now() - startTime;
+      console.log(`[FRIDA CODE GEN] API request completed in ${fetchTime}ms - Status: ${response.status}`);
+      if (!response.ok) {
+        console.error(`[FRIDA CODE GEN] API Error: ${response.status} ${response.statusText}`);
+        throw new Error(`API Error: ${response.status} ${response.statusText}`);
+      }
+      const data = await response.json();
+      console.log(`[FRIDA CODE GEN] Response received successfully`);
+      const answer = data.response || data.output || data.choices?.[0]?.message?.content || data.content || JSON.stringify(data);
+      const tokensUsed = data.usage?.total_tokens || null;
+      const answerLength = typeof answer === "string" ? answer.length : String(answer).length;
+      console.log(`[FRIDA CODE GEN] ========================================`);
+      console.log(`[FRIDA CODE GEN] \u2705 CODE GENERATION COMPLETE`);
+      console.log(`[FRIDA CODE GEN] ========================================`);
+      console.log(`[FRIDA CODE GEN] \u{1F4CA} TOKENS USED: ${tokensUsed || "N/A"}`);
+      console.log(`[FRIDA CODE GEN] \u{1F4DD} Answer length: ${answerLength} chars`);
+      console.log(`[FRIDA CODE GEN] \u23F1\uFE0F  Total time: ${fetchTime}ms`);
+      console.log(`[FRIDA CODE GEN] ========================================
+`);
+      return {
+        success: true,
+        error: null,
+        response: typeof answer === "string" ? answer : String(answer),
+        metadata: {
+          model: this.model,
+          tokensUsed
+        }
+      };
+    } catch (error) {
+      console.error(`[FRIDA CODE GEN] Error calling Frida AI:`, error instanceof Error ? error.message : String(error));
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+        response: null
+      };
+    }
+  }
+  /**
+   * Asks a question to Frida AI
+   * @param question - User question
+   * @param context - Context with component information
+   * @returns Frida response
+   */
+  async ask(question, context) {
+    if (!this.enabled) {
+      return {
+        success: false,
+        error: "Frida AI is not configured. Set FRIDA_BEARER_TOKEN and FRIDA_API_URL in .env",
+        response: null
+      };
+    }
+    if (!question || typeof question !== "string") {
+      return {
+        success: false,
+        error: "Question must be a non-empty string",
+        response: null
+      };
+    }
+    console.log(`
+[FRIDA] ========================================`);
+    console.log(`[FRIDA] \u{1F680} CALLING FRIDA AI`);
+    console.log(`[FRIDA] ========================================`);
+    const prompt = this.buildPrompt(question, context);
+    console.log(`[FRIDA] API URL: ${this.apiUrl}`);
+    console.log(`[FRIDA] Model: ${this.model}`);
+    console.log(`[FRIDA] Question length: ${question.length} chars`);
+    console.log(`[FRIDA] Context length: ${context.length} chars`);
+    console.log(`[FRIDA] Max tokens: ${this.maxTokens}`);
+    try {
+      const startTime = Date.now();
+      const response = await fetch(this.apiUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${this.apiKey}`
+        },
+        body: JSON.stringify({
+          model: this.model,
+          input: prompt,
+          max_tokens: this.maxTokens,
+          stream: false,
+          email: "design_system@example.com"
+        })
+      });
+      const fetchTime = Date.now() - startTime;
+      console.log(`[FRIDA] API request completed in ${fetchTime}ms - Status: ${response.status}`);
+      if (!response.ok) {
+        console.error(`[FRIDA] API Error: ${response.status} ${response.statusText}`);
+        throw new Error(`API Error: ${response.status} ${response.statusText}`);
+      }
+      const data = await response.json();
+      console.log(`[FRIDA] Response received successfully`);
+      const answer = data.response || data.output || data.choices?.[0]?.message?.content || data.content || JSON.stringify(data);
+      const tokensUsed = data.usage?.total_tokens || null;
+      const answerLength = typeof answer === "string" ? answer.length : String(answer).length;
+      console.log(`[FRIDA] ========================================`);
+      console.log(`[FRIDA] \u2705 FRIDA AI RESPONSE RECEIVED`);
+      console.log(`[FRIDA] ========================================`);
+      console.log(`[FRIDA] \u{1F4CA} TOKENS USED: ${tokensUsed || "N/A"}`);
+      console.log(`[FRIDA] \u{1F4DD} Answer length: ${answerLength} chars`);
+      console.log(`[FRIDA] \u23F1\uFE0F  Total time: ${fetchTime}ms`);
+      console.log(`[FRIDA] ========================================
+`);
+      return {
+        success: true,
+        error: null,
+        response: typeof answer === "string" ? answer : String(answer),
+        metadata: {
+          model: this.model,
+          tokensUsed
+        }
+      };
+    } catch (error) {
+      console.error(`[FRIDA] Error calling Frida AI:`, error instanceof Error ? error.message : String(error));
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+        response: null
+      };
+    }
+  }
+};
+
+// src/figma2frida/utils/formatters.ts
+var Formatters = class {
+  /**
+   * Formats results in structured format (JSON-friendly)
+   */
+  static toStructured(searchResults) {
+    return {
+      query: searchResults.query,
+      summary: {
+        totalMatches: searchResults.totalMatches,
+        relevantMatches: searchResults.relevantMatches,
+        minScore: searchResults.searchMetadata.minScore
+      },
+      components: searchResults.matches.map((match) => ({
+        tag: match.tag,
+        score: match.score,
+        category: match.category,
+        description: match.description,
+        keywords: match.keywords || "",
+        props: match.props,
+        events: match.events
+      })),
+      lowScoreComponents: searchResults.lowScoreMatches || []
+    };
+  }
+  /**
+   * Formats results in readable markdown format
+   */
+  static toMarkdown(searchResults) {
+    if (!searchResults.matches || searchResults.matches.length === 0) {
+      return `## No similar components found
+
+**Query:** "${searchResults.query}"
+
+Suggestion: Try more general terms or verify that components are indexed.`;
+    }
+    let markdown = `## Search Results
+
+**Query:** "${searchResults.query}"
+**Components found:** ${searchResults.relevantMatches} of ${searchResults.totalMatches}
+**Minimum score:** ${searchResults.searchMetadata.minScore}
+
+---
+
+`;
+    searchResults.matches.forEach((match, index) => {
+      markdown += `### ${index + 1}. ${match.tag} (Score: ${match.score.toFixed(4)})
+
+**Category:** ${match.category}
+
+**Description:**
+${match.description || "No description available"}
+
+**Keywords:** ${match.keywords || "N/A"}
+
+`;
+      if (match.props && match.props.length > 0) {
+        markdown += `**Properties (${match.props.length}):**
+
+`;
+        match.props.forEach((prop, idx) => {
+          markdown += `${idx + 1}. \`${prop.name}\`
+`;
+          markdown += `   - **Type:** \`${prop.type_signature}\`
+`;
+          if (prop.default_value !== void 0) {
+            markdown += `   - **Default:** \`${prop.default_value}\`
+`;
+          }
+          if (prop.description) {
+            markdown += `   - **Documentation:** ${prop.description}
+`;
+          }
+          markdown += "\n";
+        });
+      } else {
+        markdown += `**Properties:** None
+
+`;
+      }
+      if (match.events && match.events.length > 0) {
+        markdown += `**Events (${match.events.length}):**
+
+`;
+        match.events.forEach((event, idx) => {
+          markdown += `${idx + 1}. \`${event.name}\`
+`;
+          markdown += `   - **Payload type:** ${event.payload_type}
+`;
+          if (event.description) {
+            markdown += `   - **Documentation:** ${event.description}
+`;
+          }
+          markdown += "\n";
+        });
+      } else {
+        markdown += `**Events:** None
+
+`;
+      }
+      markdown += "---\n\n";
+    });
+    if (searchResults.lowScoreMatches && searchResults.lowScoreMatches.length > 0) {
+      markdown += `
+### Components with low relevance (score < ${searchResults.searchMetadata.minScore})
+
+`;
+      searchResults.lowScoreMatches.forEach((match, idx) => {
+        markdown += `${idx + 1}. ${match.tag} (Score: ${match.score.toFixed(4)})
+`;
+      });
+    }
+    return markdown;
+  }
+  /**
+   * Formats an individual component in context for prompts
+   * Returns JSON-structured format for better LLM understanding
+   */
+  static toContextFormat(match) {
+    const componentJson = {
+      tag: match.tag,
+      readme: match.description,
+      props: match.props.map((p) => ({
+        name: p.name,
+        type: p.type_signature,
+        default_value: p.default_value,
+        docs: p.description || ""
+      })),
+      events: match.events.map((e) => ({
+        name: e.name,
+        payload_type: e.payload_type,
+        docs: e.description || ""
+      })),
+      // Include new fields if available
+      ...match.usage_examples && match.usage_examples.length > 0 ? { usage_examples: match.usage_examples } : {},
+      ...match.methods && match.methods.length > 0 ? { methods: match.methods } : {},
+      ...match.slots && match.slots.length > 0 ? { slots: match.slots } : {}
+    };
+    const jsonStr = JSON.stringify(componentJson, null, 2);
+    return `=== COMPONENT: ${match.tag || "N/A"} ===
+${match.human_name ? `HUMAN NAME: ${match.human_name}
+` : ""}CATEGORY: ${match.category || "General"}
+RELEVANCE SCORE: ${match.score.toFixed(4)}
+
+DESCRIPTION:
+${match.description || "No description available"}
+
+${match.full_readme ? `FULL README:
+${match.full_readme}
+
+` : ""}${match.keywords ? `KEYWORDS: ${match.keywords}
+
+` : ""}PROPERTIES (${match.props?.length || 0}):
+${match.props && match.props.length > 0 ? match.props.map((p, idx) => {
+      return `${idx + 1}. \`${p.name}\`
+   Type: \`${p.type_signature}\`
+   ${p.default_value !== void 0 ? `Default: \`${p.default_value}\`
+   ` : ""}Documentation: ${p.description || "No documentation"}`;
+    }).join("\n\n") : "None"}
+
+EVENTS (${match.events?.length || 0}):
+${match.events && match.events.length > 0 ? match.events.map((e, idx) => {
+      return `${idx + 1}. ${e.name}
+   Payload type: ${e.payload_type}
+   Documentation: ${e.description || "No documentation"}`;
+    }).join("\n\n") : "None"}
+
+${match.methods && match.methods.length > 0 ? `METHODS (${match.methods.length}):
+${match.methods.map((m, idx) => {
+      return `${idx + 1}. ${m.name}(${m.parameters})
+   Documentation: ${m.description || "No documentation"}`;
+    }).join("\n\n")}
+
+` : ""}${match.usage_examples && match.usage_examples.length > 0 ? `USAGE EXAMPLES:
+${match.usage_examples.map((ex, idx) => {
+      return `${idx + 1}. ${ex.title}
+   ${ex.description}
+   Template: ${ex.code.template}
+   ${ex.code.script ? `Script: ${ex.code.script}` : ""}`;
+    }).join("\n\n")}
+
+` : ""}COMPONENT JSON STRUCTURE (for reference):
+\`\`\`json
+${jsonStr}
+\`\`\`
+
+---`;
+  }
+  /**
+   * Formats components as JSON array for component documentation
+   * This format worked well with Copilot
+   */
+  static toJSONContext(matches) {
+    if (!matches || matches.length === 0) {
+      return "No components found.";
+    }
+    const componentsArray = matches.map((match) => ({
+      tag: match.tag,
+      readme: match.description,
+      props: match.props.map((p) => ({
+        name: p.name,
+        type: p.type_signature,
+        default_value: p.default_value,
+        docs: p.description || ""
+      })),
+      events: match.events.map((e) => ({
+        name: e.name,
+        payload_type: e.payload_type,
+        docs: e.description || ""
+      }))
+    }));
+    return JSON.stringify({ components: componentsArray }, null, 2);
+  }
+  /**
+   * Formats multiple components for context in prompts
+   * Uses JSON format for better LLM understanding
+   */
+  static matchesToContext(matches) {
+    if (!matches || matches.length === 0) {
+      return "No components found.";
+    }
+    const componentsArray = matches.map((match) => ({
+      tag: match.tag,
+      readme: match.description,
+      category: match.category,
+      keywords: match.keywords,
+      props: match.props.map((p) => ({
+        name: p.name,
+        type: p.type_signature,
+        default_value: p.default_value,
+        docs: p.description || ""
+      })),
+      events: match.events.map((e) => ({
+        name: e.name,
+        payload_type: e.payload_type,
+        docs: e.description || ""
+      })),
+      ...match.usage_examples && match.usage_examples.length > 0 ? { usage_examples: match.usage_examples } : {},
+      ...match.methods && match.methods.length > 0 ? { methods: match.methods } : {}
+    }));
+    return JSON.stringify({ components: componentsArray }, null, 2);
+  }
+  /**
+   * Formats results in pure JSON format
+   */
+  static toJSON(searchResults) {
+    return JSON.stringify(this.toStructured(searchResults), null, 2);
+  }
+  /**
+   * Formats results according to the requested format
+   */
+  static format(searchResults, format = "structured") {
+    switch (format.toLowerCase()) {
+      case "json":
+        return this.toJSON(searchResults);
+      case "markdown":
+      case "md":
+        return this.toMarkdown(searchResults);
+      case "structured":
+        return this.toStructured(searchResults);
+      case "context":
+        return this.matchesToContext(searchResults.matches || []);
+      default:
+        return this.toStructured(searchResults);
+    }
+  }
+};
+
+// src/figma2frida/utils/design-query-extractor.ts
+var DesignQueryExtractor = class {
+  strategies;
+  constructor() {
+    this.strategies = [
+      new TextExtractionStrategy(),
+      new PatternMatchingStrategy(),
+      new MetadataExtractionStrategy()
+    ];
+  }
+  /**
+   * Extracts query from design context using all available strategies
+   */
+  extractQuery(designContext, fallbackQuery = "UI component") {
+    const queries = [];
+    for (const strategy of this.strategies) {
+      try {
+        const extracted = strategy.extract(designContext);
+        queries.push(...extracted);
+      } catch (error) {
+        console.warn(
+          `[QUERY EXTRACTOR] Strategy ${strategy.name} failed:`,
+          error instanceof Error ? error.message : String(error)
+        );
+      }
+    }
+    const uniqueQueries = Array.from(
+      new Set(queries.filter((q) => q && q.trim().length > 0))
+    );
+    if (uniqueQueries.length > 0) {
+      const topQueries = uniqueQueries.slice(0, 3);
+      return `${topQueries.join(" ")} component`.trim();
+    }
+    return fallbackQuery;
+  }
+  /**
+   * Extracts multiple candidate queries for experimentation
+   */
+  extractMultipleQueries(designContext) {
+    const allQueries = [];
+    for (const strategy of this.strategies) {
+      try {
+        const extracted = strategy.extract(designContext);
+        allQueries.push(...extracted);
+      } catch {
+      }
+    }
+    return Array.from(
+      new Set(allQueries.filter((q) => q && q.trim().length > 0))
+    );
+  }
+};
+var TextExtractionStrategy = class {
+  name = "text-extraction";
+  extract(context) {
+    const queries = [];
+    if (!context.content) {
+      return queries;
+    }
+    for (const item of context.content) {
+      if (item.type === "text" && typeof item.text === "string") {
+        const text = item.text.trim();
+        if (text.length > 0) {
+          const componentKeywords = this.extractComponentKeywords(text);
+          queries.push(...componentKeywords);
+          const descriptivePhrases = this.extractDescriptivePhrases(text);
+          queries.push(...descriptivePhrases);
+        }
+      }
+    }
+    return queries;
+  }
+  extractComponentKeywords(text) {
+    const keywords = [];
+    const patterns = [
+      { pattern: /button|btn/gi, keyword: "button" },
+      { pattern: /input|textfield|text field/gi, keyword: "input" },
+      { pattern: /card|panel/gi, keyword: "card" },
+      { pattern: /badge|label|tag/gi, keyword: "badge" },
+      { pattern: /alert|message|notification/gi, keyword: "alert" },
+      { pattern: /modal|dialog|popup/gi, keyword: "modal" },
+      { pattern: /dropdown|select|picker/gi, keyword: "dropdown" },
+      { pattern: /checkbox|check box/gi, keyword: "checkbox" },
+      { pattern: /radio|radio button/gi, keyword: "radio" },
+      { pattern: /slider|range/gi, keyword: "slider" },
+      { pattern: /table|grid|list/gi, keyword: "table" },
+      { pattern: /breadcrumb|breadcrumb navigation/gi, keyword: "breadcrumb" },
+      { pattern: /tooltip|tip/gi, keyword: "tooltip" },
+      { pattern: /accordion|collapsible/gi, keyword: "accordion" },
+      { pattern: /progress|loader|spinner/gi, keyword: "progress" }
+    ];
+    for (const { pattern, keyword } of patterns) {
+      if (pattern.test(text)) {
+        keywords.push(keyword);
+      }
+    }
+    return keywords;
+  }
+  extractDescriptivePhrases(text) {
+    const phrases = [];
+    const descriptionPatterns = [
+      /(?:a |an |the )?([a-z]+(?: [a-z]+){0,3}) (?:that |for |to |with |in |on )/gi,
+      /(?:create |make |add |use |show |display )([a-z]+(?: [a-z]+){0,3})/gi
+    ];
+    for (const pattern of descriptionPatterns) {
+      const matches = text.matchAll(pattern);
+      for (const match of matches) {
+        if (match[1] && match[1].length > 2) {
+          phrases.push(match[1].trim());
+        }
+      }
+    }
+    return phrases.slice(0, 5);
+  }
+};
+var PatternMatchingStrategy = class {
+  name = "pattern-matching";
+  extract(context) {
+    const queries = [];
+    if (!context.content) {
+      return queries;
+    }
+    const combinedText = context.content.filter((item) => item.type === "text" && typeof item.text === "string").map((item) => item.text).join(" ");
+    if (combinedText.length === 0) {
+      return queries;
+    }
+    const elementTypes = [];
+    if (/<(?:button|Button)[^>]*>/gi.test(combinedText)) {
+      elementTypes.push("button");
+    }
+    if (/<(?:input|Input)[^>]*>/gi.test(combinedText)) {
+      elementTypes.push("input");
+      if (/type=["'](?:text|email|password|number)/gi.test(combinedText)) {
+        elementTypes.push("text input");
+      }
+      if (/type=["']checkbox/gi.test(combinedText)) {
+        elementTypes.push("checkbox");
+      }
+      if (/type=["']radio/gi.test(combinedText)) {
+        elementTypes.push("radio");
+      }
+      if (/type=["']range/gi.test(combinedText)) {
+        elementTypes.push("slider");
+      }
+    }
+    if (/<(?:textarea|Textarea)[^>]*>/gi.test(combinedText)) {
+      elementTypes.push("textarea");
+    }
+    if (/<(?:select|Select)[^>]*>/gi.test(combinedText)) {
+      elementTypes.push("dropdown");
+      elementTypes.push("select");
+    }
+    if (/<(?:div|Div)[^>]*class[^>]*(?:card|Card|panel|Panel)/gi.test(combinedText)) {
+      elementTypes.push("card");
+    }
+    if (/<(?:span|Span)[^>]*class[^>]*(?:badge|Badge|label|Label|tag|Tag)/gi.test(combinedText)) {
+      elementTypes.push("badge");
+    }
+    if (/<(?:div|Div)[^>]*class[^>]*(?:alert|Alert|message|Message|notification|Notification)/gi.test(combinedText)) {
+      elementTypes.push("alert");
+    }
+    if (/<(?:form|Form)[^>]*>/gi.test(combinedText)) {
+      elementTypes.push("form");
+    }
+    if (/<(?:nav|Nav|ul|Ul)[^>]*class[^>]*(?:nav|Nav|menu|Menu|breadcrumb|Breadcrumb)/gi.test(combinedText)) {
+      elementTypes.push("navigation");
+    }
+    if (/<(?:a|A)[^>]*href/gi.test(combinedText)) {
+      elementTypes.push("link");
+      elementTypes.push("action link");
+    }
+    for (const elementType of elementTypes) {
+      queries.push(`${elementType} component`);
+    }
+    if (elementTypes.includes("button")) {
+      queries.push("button Buttons category");
+    }
+    if (elementTypes.some((e) => e.includes("input") || e.includes("select") || e.includes("textarea"))) {
+      queries.push("form Forms category");
+    }
+    if (elementTypes.includes("alert") || elementTypes.includes("badge")) {
+      queries.push("feedback Feedback category");
+    }
+    return queries;
+  }
+};
+var MetadataExtractionStrategy = class {
+  name = "metadata-extraction";
+  extract(context) {
+    const queries = [];
+    if (!context.content) {
+      return queries;
+    }
+    const componentPattern = /<([a-z]+-[\w-]+)/gi;
+    for (const item of context.content) {
+      if (item.type === "text" && typeof item.text === "string") {
+        const matches = item.text.matchAll(componentPattern);
+        for (const match of matches) {
+          const componentName = match[2];
+          queries.push(componentName.replace(/-/g, " "));
+        }
+      }
+    }
+    return queries;
+  }
+};
+
+// src/figma2frida/handlers/component-suggestion-handler.ts
+var componentSuggestionsCache = /* @__PURE__ */ new Map();
+var COMPONENT_CACHE_TTL_MS = 3e5;
+var pineconeService = null;
+var pineconeServiceNamespace = void 0;
+var fridaClient = null;
+var queryExtractor = null;
+function getPineconeService(namespace) {
+  if (!pineconeService || pineconeServiceNamespace !== namespace) {
+    pineconeService = new PineconeSearchService({ namespace });
+    pineconeServiceNamespace = namespace;
+  }
+  return pineconeService;
+}
+function getFridaClient() {
+  if (!fridaClient) {
+    fridaClient = new FridaClient();
+  }
+  return fridaClient;
+}
+function getQueryExtractor() {
+  if (!queryExtractor) {
+    queryExtractor = new DesignQueryExtractor();
+  }
+  return queryExtractor;
+}
+async function handleComponentSuggestion(options) {
+  const {
+    nodeId,
+    minScore = 0.05,
+    topK = 10,
+    useFrida = true,
+    query: customQuery,
+    namespace,
+    designContext,
+    streamContent
+  } = options;
+  try {
+    const cacheKey = `${nodeId || "current"}:${minScore}:${topK}:${useFrida}:${customQuery || "auto"}`;
+    const now = Date.now();
+    const cached = componentSuggestionsCache.get(cacheKey);
+    if (cached && now - cached.timestamp < COMPONENT_CACHE_TTL_MS) {
+      console.log(
+        `[COMPONENT SUGGEST] Using cached result (age: ${((now - cached.timestamp) / 1e3).toFixed(1)}s)`
+      );
+      if (streamContent) {
+        await streamContent({
+          type: "text",
+          text: `\u26A1 Using cached component suggestions (${((now - cached.timestamp) / 1e3).toFixed(1)}s old)`
+        });
+      }
+      return { content: cached.data };
+    }
+    if (!designContext.content || designContext.content.length === 0) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `\u274C No design context returned from Figma MCP.
+
+**Node ID:** ${nodeId || "current selection"}
+
+Cannot suggest components without design context.`
+          }
+        ]
+      };
+    }
+    if (streamContent) {
+      await streamContent({
+        type: "text",
+        text: "\u{1F50D} Extracting semantic query from design..."
+      });
+    }
+    const extractor = getQueryExtractor();
+    const searchQuery = customQuery || extractor.extractQuery(designContext);
+    console.log(`[COMPONENT SUGGEST] Extracted query: "${searchQuery}"`);
+    if (streamContent) {
+      await streamContent({
+        type: "text",
+        text: `\u{1F50E} Searching Pinecone for: "${searchQuery}"...`
+      });
+    }
+    console.log(`[COMPONENT SUGGEST] Calling Pinecone search service...`);
+    const searchService = getPineconeService(namespace);
+    const searchStartTime = Date.now();
+    const searchResults = await searchService.search(searchQuery, {
+      minScore,
+      topK
+    });
+    const searchTime = Date.now() - searchStartTime;
+    console.log(
+      `[COMPONENT SUGGEST] Pinecone search completed in ${searchTime}ms - Found ${searchResults.relevantMatches} relevant components`
+    );
+    if (searchResults.matches.length === 0) {
+      const namespaceInfo = searchResults.searchMetadata.namespace ? `
+**Namespace:** ${searchResults.searchMetadata.namespace}` : "";
+      return {
+        content: [
+          {
+            type: "text",
+            text: `\u26A0\uFE0F **No Components Found**
+
+**Query:** "${searchQuery}"
+**Min Score:** ${minScore}${namespaceInfo}
+**Index:** ${searchResults.searchMetadata.indexName}
+
+No components from your design system matched the design context with sufficient relevance.
+
+**Possible Causes:**
+- The namespace "${searchResults.searchMetadata.namespace || "default"}" may not exist or may be empty
+- Components may not be indexed in this namespace
+- The query may not match any components in this namespace
+
+**Suggestions:**
+- Verify that components are indexed in Pinecone${searchResults.searchMetadata.namespace ? ` namespace "${searchResults.searchMetadata.namespace}"` : ""}
+- Set namespace via \`--pinecone-namespace\` CLI argument if not set
+- Try lowering the \`minScore\` parameter
+- Provide a more specific \`query\` parameter`
+          }
+        ]
+      };
+    }
+    const componentTags = searchResults.matches.map((m) => m.tag).join(", ");
+    const frameworkType = searchResults.matches[0]?.framework_type || "Web Components";
+    const prefixPatterns = Array.from(
+      new Set(
+        searchResults.matches.map((m) => {
+          const match = m.tag.match(/^([a-z]+-)/);
+          return match ? match[1] : null;
+        }).filter(Boolean)
+      )
+    ).join(", ");
+    const content = [
+      {
+        type: "text",
+        text: `\u{1F6A8} **MANDATORY: USE ONLY COMPONENTS FROM YOUR DESIGN SYSTEM**
+
+**CRITICAL INSTRUCTIONS:**
+- You MUST use ONLY the components listed below from your organization's design system
+- **DO NOT** use components from other libraries unless they appear in the search results
+- **DO NOT** use generic HTML elements directly - use the design system components instead
+${prefixPatterns ? `- Component prefixes in your system: ${prefixPatterns}` : ""}
+${frameworkType ? `- Framework type: ${frameworkType}` : ""}
+
+**Available Components for this design:**
+${componentTags || "No components found"}
+
+---
+
+\u2705 **Component Suggestions**
+
+**Query:** "${searchQuery}"
+**Components found:** ${searchResults.relevantMatches} of ${searchResults.totalMatches}
+**Min Score:** ${minScore}
+
+---
+
+`
+      }
+    ];
+    content.push({
+      type: "text",
+      text: `## \u{1F4CB} MANDATORY USAGE INSTRUCTIONS
+
+**You MUST follow these rules when generating code:**
+
+1. **Use ONLY the components from the search results below**
+2. **DO NOT use:**
+   - \u274C Components from other libraries not listed in the results
+   - \u274C Generic HTML elements unless the component wraps them
+   - \u274C Any component not found in your organization's design system
+
+3. **Use the recommended components:**
+   - \u2705 Use ONLY the components listed in the search results below
+   - \u2705 Follow the import statements and usage examples provided
+   - \u2705 Respect the component's props, events, and methods as documented
+   - \u2705 If a component is not in the list below, do NOT use it
+
+4. **Framework compatibility:** Check the \`framework_type\` and \`import_statement\` fields for each component
+
+---
+
+## Search Results (${searchResults.relevantMatches} components)
+
+${Formatters.toMarkdown(searchResults)}
+
+---
+
+`
+    });
+    if (useFrida) {
+      const frida = getFridaClient();
+      if (frida.isEnabled()) {
+        if (streamContent) {
+          await streamContent({
+            type: "text",
+            text: "\u{1F916} Processing with Frida AI for intelligent recommendations..."
+          });
+        }
+        const contextForFrida = Formatters.matchesToContext(
+          searchResults.matches
+        );
+        const question = `Based on this Figma design context, which component(s) from the design system should I use? Design description: ${searchQuery}`;
+        console.log(`[COMPONENT SUGGEST] Calling Frida AI with ${searchResults.matches.length} component matches...`);
+        const fridaStartTime = Date.now();
+        const fridaResponse = await frida.ask(question, contextForFrida);
+        const fridaTime = Date.now() - fridaStartTime;
+        console.log(`[COMPONENT SUGGEST] Frida AI completed in ${fridaTime}ms - Success: ${fridaResponse.success}`);
+        if (fridaResponse.success && fridaResponse.response) {
+          content.push({
+            type: "text",
+            text: `## \u{1F916} Frida AI Recommendation
+
+${fridaResponse.response}
+
+---
+
+`
+          });
+          const topComponents = searchResults.matches.slice(0, 3);
+          if (topComponents.length > 0) {
+            let examplesText = `## \u{1F4DD} CODE GENERATION RULES - Recommended Usage
+
+**MANDATORY: Use ONLY components from your design system. Here are examples:**
+
+`;
+            topComponents.forEach((comp) => {
+              const componentName = comp.tag;
+              const importStmt = comp.import_statement;
+              const frameworkType2 = comp.framework_type || "Web Component";
+              examplesText += `### ${comp.human_name || componentName}
+**Tag:** \`${componentName}\`
+**Framework:** ${frameworkType2}
+${importStmt ? `**Import:** \`${importStmt}\`` : ""}
+
+`;
+              if (comp.usage_examples && comp.usage_examples.length > 0) {
+                comp.usage_examples.slice(0, 1).forEach((example) => {
+                  examplesText += `\u2705 **${example.title}**
+${example.description ? `*${example.description}*
+` : ""}
+\`\`\`html
+${example.code.template}
+\`\`\`
+${example.code.script ? `\`\`\`javascript
+${example.code.script}
+\`\`\`` : ""}
+
+`;
+                });
+              } else {
+                const propsExample = comp.props.filter((p) => !p.is_utility_prop).slice(0, 2).map((p) => `${p.name}="${p.default_value || "value"}"`).join(" ");
+                examplesText += `\u2705 **Recommended Usage:**
+\`\`\`html
+<${componentName}${propsExample ? ` ${propsExample}` : ""}></${componentName}>
+\`\`\`
+
+`;
+              }
+              if (comp.props.length > 0) {
+                examplesText += `**Key Props:**
+${comp.props.slice(0, 3).map((p) => `- \`${p.name}\`: ${p.description || p.type_signature}`).join("\n")}
+
+`;
+              }
+              examplesText += `---
+`;
+            });
+            examplesText += `
+**Remember:** Always use components from your design system as listed above. Follow the import statements and usage examples provided.
+
+---
+
+`;
+            content.push({
+              type: "text",
+              text: examplesText
+            });
+          }
+          if (fridaResponse.metadata?.tokensUsed) {
+            content.push({
+              type: "text",
+              text: `*(Tokens used: ${fridaResponse.metadata.tokensUsed})*
+
+---
+
+`
+            });
+          }
+        } else {
+          content.push({
+            type: "text",
+            text: `\u26A0\uFE0F **Frida AI Processing Failed**
+
+${fridaResponse.error || "Unknown error"}
+
+Falling back to raw search results.
+
+---
+
+`
+          });
+        }
+      } else {
+        content.push({
+          type: "text",
+          text: `\u2139\uFE0F **Frida AI Not Configured**
+
+Frida AI is not enabled. Set \`FRIDA_BEARER_TOKEN\` and \`FRIDA_API_URL\` environment variables to enable intelligent recommendations.
+
+Showing raw search results instead.
+
+---
+
+`
+        });
+      }
+    }
+    componentSuggestionsCache.set(cacheKey, {
+      data: content,
+      timestamp: now
+    });
+    console.log(`[COMPONENT SUGGEST] Completed successfully`);
+    return { content };
+  } catch (error) {
+    console.error(`[COMPONENT SUGGEST ERROR]`, error);
+    return {
+      content: [
+        {
+          type: "text",
+          text: `\u274C **Failed to Suggest Components**
+
+**Error:** ${error instanceof Error ? error.message : String(error)}
+
+**Troubleshooting:**
+1. Is Figma Desktop running?
+2. Is Pinecone configured? (Check PINECONE_API_KEY)
+3. Are components indexed in Pinecone?
+4. Check the console for detailed error messages
+
+${error instanceof Error && error.stack ? `
+**Stack:**
+\`\`\`
+${error.stack}
+\`\`\`` : ""}`
+        }
+      ]
+    };
+  }
+}
+
+// src/figma2frida/utils/component-extractor.ts
+var ComponentExtractor = class {
+  /**
+   * Pattern to match custom components in various formats:
+   * - Web Components (hyphenated): <my-button>, <custom-badge>
+   * - PascalCase components: <Button>, <CustomBadge>
+   * - Standalone references
+   * - Import statements
+   */
+  static COMPONENT_PATTERNS = [
+    // Web Component tags (hyphenated custom elements): <my-button>, <custom-badge>
+    /<([a-z]+-[\w-]+)/gi,
+    // PascalCase component tags (React/Vue/etc): <Button>, <CustomBadge>
+    /<([A-Z][a-zA-Z0-9]+)(?:\s|>|\/)/g,
+    // Standalone hyphenated references: my-button, custom-badge
+    /\b([a-z]+-[\w-]+)\b/gi
+  ];
+  /**
+   * Extracts all unique component tags from code content
+   * @param content - Code content as string or array of content items
+   * @returns Array of unique component tags found
+   */
+  static extractComponents(content) {
+    const componentMap = /* @__PURE__ */ new Map();
+    const textContents = [];
+    if (typeof content === "string") {
+      textContents.push(content);
+    } else if (Array.isArray(content)) {
+      for (const item of content) {
+        if (item.type === "text" && typeof item.text === "string") {
+          textContents.push(item.text);
+        }
+      }
+    }
+    for (const text of textContents) {
+      for (const pattern of this.COMPONENT_PATTERNS) {
+        const matches = text.matchAll(pattern);
+        for (const match of matches) {
+          if (!match[1]) continue;
+          let fullTag = match[1];
+          const normalizedTag = fullTag.includes("-") ? fullTag.toLowerCase().replace(/-+$/, "") : fullTag;
+          if (this.isCommonHtmlTag(normalizedTag)) {
+            continue;
+          }
+          if (componentMap.has(normalizedTag)) {
+            componentMap.get(normalizedTag).occurrences++;
+          } else {
+            componentMap.set(normalizedTag, {
+              tag: normalizedTag,
+              fullTag: normalizedTag,
+              occurrences: 1
+            });
+          }
+        }
+      }
+    }
+    return Array.from(componentMap.values()).sort(
+      (a, b) => b.occurrences - a.occurrences
+    );
+  }
+  /**
+   * Check if a tag is a common HTML tag (not a custom component)
+   */
+  static isCommonHtmlTag(tag) {
+    const commonTags = /* @__PURE__ */ new Set([
+      "div",
+      "span",
+      "p",
+      "a",
+      "img",
+      "ul",
+      "li",
+      "ol",
+      "table",
+      "tr",
+      "td",
+      "th",
+      "form",
+      "input",
+      "button",
+      "select",
+      "option",
+      "textarea",
+      "label",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "header",
+      "footer",
+      "nav",
+      "main",
+      "section",
+      "article",
+      "aside",
+      "figure",
+      "figcaption",
+      "strong",
+      "em",
+      "code",
+      "pre",
+      "iframe",
+      "video",
+      "audio",
+      "canvas",
+      "svg",
+      "path",
+      "g",
+      "circle",
+      "rect",
+      "script",
+      "style",
+      "link",
+      "meta",
+      "title",
+      "head",
+      "body",
+      "html"
+    ]);
+    return commonTags.has(tag.toLowerCase());
+  }
+  /**
+   * Extracts component tags and returns just the tag names
+   * @param content - Code content
+   * @returns Array of unique component tag names
+   */
+  static extractComponentTags(content) {
+    return this.extractComponents(content).map((c) => c.tag);
+  }
+  /**
+   * Checks if content contains any custom components
+   * @param content - Code content
+   * @returns true if components are found
+   */
+  static hasComponents(content) {
+    const components = this.extractComponents(content);
+    return components.length > 0;
+  }
+};
+
+// src/figma2frida/services/component-lookup.ts
+var ComponentLookupService = class {
+  pineconeService;
+  lookupCache = /* @__PURE__ */ new Map();
+  cacheEnabled;
+  constructor(pineconeService2, options = {}) {
+    this.pineconeService = pineconeService2 || new PineconeSearchService({ namespace: options.namespace });
+    this.cacheEnabled = options.cacheResults !== false;
+  }
+  /**
+   * Looks up a single component by tag
+   * @param tag - Component tag/selector (e.g., 'my-button', 'Button')
+   * @param options - Lookup options
+   * @returns Component lookup result
+   */
+  async lookupComponent(tag, options = {}) {
+    const cacheKey = options.namespace ? `${tag}:${options.namespace}` : tag;
+    if (this.cacheEnabled && this.lookupCache.has(cacheKey)) {
+      const cached = this.lookupCache.get(cacheKey) ?? null;
+      return {
+        tag,
+        found: cached !== null,
+        component: cached
+      };
+    }
+    try {
+      const component = await this.pineconeService.getComponentDetails(tag);
+      const componentResult = component ?? null;
+      if (this.cacheEnabled) {
+        this.lookupCache.set(cacheKey, componentResult);
+      }
+      return {
+        tag,
+        found: componentResult !== null,
+        component: componentResult
+      };
+    } catch (error) {
+      return {
+        tag,
+        found: false,
+        component: null,
+        error: error instanceof Error ? error.message : String(error)
+      };
+    }
+  }
+  /**
+   * Looks up multiple components in parallel
+   * @param tags - Array of component tags
+   * @param options - Lookup options
+   * @returns Array of lookup results
+   */
+  async lookupMultipleComponents(tags, options = {}) {
+    if (!tags || tags.length === 0) {
+      return [];
+    }
+    const uniqueTags = Array.from(new Set(tags));
+    const lookupPromises = uniqueTags.map(
+      (tag) => this.lookupComponent(tag, options)
+    );
+    const results = await Promise.all(lookupPromises);
+    return results.sort((a, b) => {
+      if (a.found !== b.found) {
+        return a.found ? -1 : 1;
+      }
+      return a.tag.localeCompare(b.tag);
+    });
+  }
+  /**
+   * Gets a summary of found components
+   * @param results - Lookup results
+   * @returns Summary object
+   */
+  static getSummary(results) {
+    const found = results.filter((r) => r.found);
+    const notFound = results.filter((r) => !r.found);
+    return {
+      total: results.length,
+      found: found.length,
+      notFound: notFound.length,
+      foundComponents: found.map((r) => r.component).filter((c) => c !== null),
+      notFoundTags: notFound.map((r) => r.tag)
+    };
+  }
+  /**
+   * Clears the lookup cache
+   */
+  clearCache() {
+    this.lookupCache.clear();
+  }
+  /**
+   * Gets cache statistics
+   */
+  getCacheStats() {
+    return {
+      size: this.lookupCache.size,
+      keys: Array.from(this.lookupCache.keys())
+    };
+  }
+};
+
+// src/figma2frida/figma2frida.ts
+console.log("\n[CONFIG] Validating environment variables...\n");
+var missingVars = [];
+if (!process.env.PINECONE_API_KEY) {
+  console.error(`[CONFIG] \u274C ERROR: PINECONE_API_KEY is missing from .env file`);
+  missingVars.push("PINECONE_API_KEY");
+} else {
+  console.log(`[CONFIG] \u2713 PINECONE_API_KEY: ${process.env.PINECONE_API_KEY.substring(0, 8)}... (hidden)`);
+}
+if (!process.env.PINECONE_INDEX) {
+  console.error(`[CONFIG] \u274C ERROR: PINECONE_INDEX is missing from .env file`);
+  missingVars.push("PINECONE_INDEX");
+} else {
+  console.log(`[CONFIG] \u2713 PINECONE_INDEX: ${process.env.PINECONE_INDEX}`);
+}
+if (!process.env.PINECONE_MIN_SCORE) {
+  console.error(`[CONFIG] \u274C ERROR: PINECONE_MIN_SCORE is missing from .env file`);
+  missingVars.push("PINECONE_MIN_SCORE");
+} else {
+  const parsed = parseFloat(process.env.PINECONE_MIN_SCORE);
+  if (isNaN(parsed)) {
+    console.error(`[CONFIG] \u274C ERROR: PINECONE_MIN_SCORE is not a valid number: "${process.env.PINECONE_MIN_SCORE}"`);
+    missingVars.push("PINECONE_MIN_SCORE");
+  } else {
+    console.log(`[CONFIG] \u2713 PINECONE_MIN_SCORE: ${parsed}`);
+  }
+}
+if (!process.env.PINECONE_TOP_K) {
+  console.error(`[CONFIG] \u274C ERROR: PINECONE_TOP_K is missing from .env file`);
+  missingVars.push("PINECONE_TOP_K");
+} else {
+  const parsed = parseInt(process.env.PINECONE_TOP_K, 10);
+  if (isNaN(parsed)) {
+    console.error(`[CONFIG] \u274C ERROR: PINECONE_TOP_K is not a valid integer: "${process.env.PINECONE_TOP_K}"`);
+    missingVars.push("PINECONE_TOP_K");
+  } else {
+    console.log(`[CONFIG] \u2713 PINECONE_TOP_K: ${parsed}`);
+  }
+}
+if (missingVars.length > 0) {
+  console.error(`
+[CONFIG] \u274C Missing required environment variables: ${missingVars.join(", ")}
+`);
+  process.exit(1);
+}
+console.log(`[CONFIG] \u2713 All required Pinecone environment variables are set
+`);
+var argv = yargs(hideBin(process.argv)).option("pinecone-namespace", {
+  type: "string",
+  description: "Pinecone namespace (passed via options, not from .env)"
+}).parseSync();
+var PINECONE_NAMESPACE = argv.pineconeNamespace || void 0;
+if (PINECONE_NAMESPACE) {
+  console.log(`[CONFIG] \u2713 PINECONE_NAMESPACE: ${PINECONE_NAMESPACE} (from CLI)
+`);
+}
+var HTTP_STREAM = process.env.HTTP_STREAM === "true" || process.env.HTTP_STREAM === "1";
+var PORT = parseInt(process.env.PORT || "8080", 10);
+var designContextCache = /* @__PURE__ */ new Map();
+var CACHE_TTL_MS = 6e4;
+var server = new FastMCP({
+  instructions: `You are a Figma design assistant optimized for fast code generation using your organization's design system components.
+
+**\u{1F6A8} CRITICAL: Follow Figma Design Exactly**
+
+When generating code from Figma designs, you MUST:
+
+1. **USE THE TRANSFORMED CODE AS YOUR BASE** - The \`figma_get_design_context\` tool with \`transformToDesignSystem: true\` returns code that:
+   - Preserves the EXACT structure, layout, and styling from Figma
+   - Transforms generic HTML elements to design system components
+   - Maintains all divs, containers, classes, and CSS from the original design
+   - **DO NOT invent new layouts or structures** - Use the transformed code exactly as provided
+
+2. **SHOW ELEMENT ANALYSIS** - Before showing code, clearly display:
+   - What HTML elements were found in the Figma design
+   - Which design system components will be used for each element
+   - The mapping: HTML element \u2192 Design system component
+   - Any elements that couldn't be transformed (and why)
+
+3. **PRESERVE DESIGN STRUCTURE** - The transformed code maintains:
+   - All container divs and layout structure
+   - All CSS classes and inline styles
+   - All spacing, positioning, and visual hierarchy
+   - The exact visual appearance from Figma
+
+4. **USE ONLY DESIGN SYSTEM COMPONENTS** - Components must be:
+   - From your organization's design system library
+   - From the component suggestions provided
+   - NEVER use generic component libraries unless they appear in search results
+   - Framework/language agnostic - use whatever framework type is specified in component metadata (Web Components, React, Angular, Vue, etc.)
+
+**Available tools:**
+- figma_get_screenshot: Get visual screenshot (fast, ~0.5-1s)
+- figma_get_design_context: Get design context and transformed code with design system components (main tool)
+- figma_suggest_components: Suggest design system components based on Figma design
+
+**Workflow for code generation:**
+1. User asks for code from Figma design
+2. Call \`figma_get_design_context\` with \`forceCode: true\` and \`transformToDesignSystem: true\`
+3. The tool will return:
+   - Analysis of HTML elements found
+   - Mapping to design system components
+   - Transformed code preserving Figma design structure
+   - Component metadata including framework type, import statements, and usage examples
+4. **USE THE TRANSFORMED CODE AS PROVIDED** - Do not modify the structure or layout
+5. Show the element analysis and mapping clearly to the user
+6. Present the transformed code maintaining all Figma design elements
+7. **Use the component's framework type and import statements** as specified in the component metadata
+
+**IMPORTANT:** The transformed code from Figma is the source of truth. Do not create new layouts or modify the structure. Use only the design system components as mapped in the transformation. The framework/language depends on what's configured in your component library.
+
+Connection is established on startup. Always use design system components from the configured library.`,
+  name: "figma-proxy",
+  version: "1.0.0"
+});
+console.log("\n[FIGMA2FRIDA] ========================================");
+console.log("[FIGMA2FRIDA] Initializing Figma Client...");
+var figmaClient = new FigmaClient("http://127.0.0.1:3845/sse");
+console.log("[FIGMA2FRIDA] \u2713 Figma Client object created");
+console.log("[FIGMA2FRIDA] ========================================\n");
+var figmaConnected = false;
+console.log("[FIGMA2FRIDA] Starting initial connection attempt to Figma MCP...");
+console.log("[FIGMA2FRIDA] This is a non-blocking async operation - server will continue starting\n");
+var connectionStartTime = Date.now();
+figmaClient.connect().then(() => {
+  const connectionTime = Date.now() - connectionStartTime;
+  figmaConnected = true;
+  console.log("\n[FIGMA2FRIDA] ========================================");
+  console.log("[FIGMA2FRIDA] \u2705 STARTUP CONNECTION SUCCESS!");
+  console.log(`[FIGMA2FRIDA] Connection time: ${connectionTime}ms`);
+  console.log(`[FIGMA2FRIDA] Status: figmaConnected = ${figmaConnected}`);
+  console.log("[FIGMA2FRIDA] ========================================\n");
+}).catch((error) => {
+  const connectionTime = Date.now() - connectionStartTime;
+  console.log("\n[FIGMA2FRIDA] ========================================");
+  console.log("[FIGMA2FRIDA] \u274C STARTUP CONNECTION FAILED");
+  console.log(`[FIGMA2FRIDA] Time elapsed: ${connectionTime}ms`);
+  console.log(`[FIGMA2FRIDA] Status: figmaConnected = ${figmaConnected}`);
+  console.log("[FIGMA2FRIDA] \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500");
+  console.error("[FIGMA2FRIDA] Error type:", error?.constructor?.name || typeof error);
+  console.error("[FIGMA2FRIDA] Error message:", error instanceof Error ? error.message : String(error));
+  if (error && typeof error === "object") {
+    const errorObj = error;
+    if ("code" in errorObj) {
+      console.error("[FIGMA2FRIDA] Error code:", errorObj.code);
+    }
+  }
+  if (error instanceof Error && error.stack) {
+    console.error("[FIGMA2FRIDA] Error stack:");
+    console.error(error.stack);
+  }
+  console.log("[FIGMA2FRIDA] \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500");
+  console.error("[FIGMA2FRIDA] Make sure Figma Desktop is running with MCP enabled at http://127.0.0.1:3845/sse");
+  console.log("[FIGMA2FRIDA] Note: Tools will attempt to reconnect when called");
+  console.log("[FIGMA2FRIDA] ========================================\n");
+});
+server.addTool({
+  name: "figma_get_screenshot",
+  description: `Get a screenshot of a Figma node for visual reference.
+
+**Fast & Simple:**
+- Takes ~0.5-1 second
+- Returns just the image, no code generation
+- Use this when you need to see what the design looks like
+
+**Usage:**
+- Provide a nodeId (e.g., "315-2920")
+- Or leave empty to use current Figma selection
+
+**Example:**
+\`\`\`json
+{
+  "nodeId": "315-2920"
+}
+\`\`\``,
+  annotations: {
+    title: "Get Screenshot",
+    readOnlyHint: true,
+    openWorldHint: false
+  },
+  parameters: z.object({
+    nodeId: z.string().optional().describe('Figma node ID (e.g., "315-2920"). Leave empty for current selection.')
+  }),
+  execute: async (args, _context) => {
+    try {
+      console.log(`[FIGMA_GET_SCREENSHOT] Tool called with nodeId: ${args.nodeId || "current selection"}`);
+      console.log(`[FIGMA_GET_SCREENSHOT] figmaConnected flag: ${figmaConnected}`);
+      if (!figmaConnected) {
+        console.log(`[FIGMA_GET_SCREENSHOT] \u26A0\uFE0F  Early return: figmaConnected is false`);
+        const result = {
+          content: [{
+            type: "text",
+            text: "\u274C Not connected to Figma MCP. Check logs for connection details."
+          }]
+        };
+        return result;
+      }
+      console.log(`[FIGMA_GET_SCREENSHOT] Calling figmaClient.getScreenshot()...`);
+      const screenshot = await figmaClient.getScreenshot(args.nodeId);
+      if (!screenshot.content || screenshot.content.length === 0) {
+        const result = {
+          content: [{ type: "text", text: "\u274C No screenshot returned" }]
+        };
+        return result;
+      }
+      return { content: screenshot.content };
+    } catch (error) {
+      const result = {
+        content: [{
+          type: "text",
+          text: `\u274C Failed to get screenshot: ${error instanceof Error ? error.message : String(error)}`
+        }]
+      };
+      return result;
+    }
+  }
+});
+server.addTool({
+  name: "figma_get_design_context",
+  description: `Get design context and generated code directly from Figma Desktop MCP.
+
+**What this does:**
+- Calls Figma's get_design_context tool
+- Returns design data and optionally generated code (React, HTML, etc.)
+- Automatically searches for design system components in generated code
+- Results are cached for 60 seconds for instant subsequent access
+- Streams progress updates for better responsiveness
+
+**Performance Modes:**
+- \`forceCode: false\` (default) - Fast metadata-only mode (~1-2s)
+- \`forceCode: true\` - Full code generation (~3-15s depending on complexity)
+
+**Component Search:**
+- When \`forceCode: true\` and \`autoSearchComponents: true\` (default), automatically:
+  - Extracts component tags from generated code
+  - Searches component information in Pinecone
+  - Streams component details while processing
+  - Adds summary section with found/not found components
+
+**Code Transformation:**
+- When \`forceCode: true\` and \`transformToDesignSystem: true\` (default), automatically:
+  - **Analyzes** all HTML elements found in Figma design
+  - **Shows mapping** of HTML elements \u2192 design system components before transformation
+  - **Transforms** generic HTML elements (button, input, etc.) to design system components
+  - **Preserves** ALL structure, layout, CSS classes, and styling from Figma design
+  - **Maintains** all container divs, spacing, positioning, and visual hierarchy
+  - **Uses component metadata** including framework type, import statements, and usage examples
+  - Returns transformed code as the main output, with original code for reference
+  - Shows detailed analysis and transformation summary
+
+**Output includes:**
+1. Element Analysis - What HTML elements were found in Figma
+2. Element Mapping - Which design system components will be used for each element
+3. Transformed Code - Ready-to-use code preserving Figma design structure
+4. Original Code - For reference and comparison
+
+**Usage:**
+- Provide a nodeId (e.g., "315-2920")
+- Or leave empty to use current Figma selection
+- Set forceCode to true only when you need the actual React/HTML code
+- Set autoSearchComponents to false to disable automatic component search
+
+**Example:**
+\`\`\`json
+{
+  "nodeId": "315-2920",
+  "forceCode": true,
+  "autoSearchComponents": true
+}
+\`\`\`
+
+**Tip:** Start with \`forceCode: false\` to quickly see what's available, then request code if needed.`,
+  annotations: {
+    title: "Get Design Context from Figma",
+    readOnlyHint: true,
+    openWorldHint: false
+  },
+  parameters: z.object({
+    nodeId: z.string().optional().describe('Figma node ID (e.g., "315-2920" or "315:2920"). Leave empty for current selection.'),
+    forceCode: z.boolean().optional().describe("Force code generation even for large outputs (default: false). Set to true only when you need the actual React/HTML code."),
+    autoSearchComponents: z.boolean().optional().describe("Automatically search for design system components in the generated code (default: true). Only works when forceCode is true."),
+    transformToDesignSystem: z.boolean().optional().describe("Transform Figma-generated code to use design system components (default: true). Only works when forceCode is true. Replaces generic HTML elements (button, input, etc.) with components from your design system library. Framework and language are determined by component metadata.")
+  }),
+  execute: async (args, context) => {
+    try {
+      console.log(`
+[FIGMA_GET_DESIGN_CONTEXT] ========================================`);
+      console.log(`[FIGMA_GET_DESIGN_CONTEXT] Tool called`);
+      console.log(`[FIGMA_GET_DESIGN_CONTEXT] nodeId: ${args.nodeId || "current selection"}`);
+      console.log(`[FIGMA_GET_DESIGN_CONTEXT] forceCode: ${args.forceCode ?? false}`);
+      console.log(`[FIGMA_GET_DESIGN_CONTEXT] figmaConnected flag: ${figmaConnected}`);
+      console.log(`[FIGMA_GET_DESIGN_CONTEXT] ========================================`);
+      if (!figmaConnected) {
+        console.log(`[FIGMA_GET_DESIGN_CONTEXT] \u26A0\uFE0F  Early return: figmaConnected is false`);
+        return {
+          content: [
+            {
+              type: "text",
+              text: "\u274C Not connected to Figma MCP. Check logs for connection details."
+            }
+          ]
+        };
+      }
+      console.log(`[FIGMA_GET_DESIGN_CONTEXT] Calling figmaClient.getDesignContext()...`);
+      console.log(`
+[DESIGN CONTEXT] Starting...`);
+      const nodeId = args.nodeId;
+      const forceCode = args.forceCode ?? false;
+      const autoSearchComponents = args.autoSearchComponents ?? true;
+      const transformToDesignSystem = args.transformToDesignSystem ?? true;
+      console.log(`[DESIGN CONTEXT] NodeId:`, nodeId || "current selection");
+      console.log(`[DESIGN CONTEXT] ForceCode:`, forceCode);
+      console.log(`[DESIGN CONTEXT] AutoSearchComponents:`, autoSearchComponents);
+      console.log(`[DESIGN CONTEXT] TransformToDesignSystem:`, transformToDesignSystem);
+      const cacheKey = `${nodeId || "current"}:${forceCode}`;
+      const now = Date.now();
+      const cached = designContextCache.get(cacheKey);
+      if (cached && now - cached.timestamp < CACHE_TTL_MS) {
+        console.log(`[DESIGN CONTEXT] Using cached result (age: ${(now - cached.timestamp).toFixed(0)}ms)`);
+        await context.streamContent({
+          type: "text",
+          text: `\u26A1 Using cached design context (${((now - cached.timestamp) / 1e3).toFixed(1)}s old)`
+        });
+        const header2 = {
+          type: "text",
+          text: `\u2705 **Design Context from Figma** (Cached)
+
+**Node ID:** ${nodeId || "current selection"}
+**Content Items:** ${cached.data.content?.length || 0}
+**Cache Age:** ${((now - cached.timestamp) / 1e3).toFixed(1)}s
+**Mode:** ${forceCode ? "Full code generation" : "Metadata only (fast mode)"}
+
+\u{1F4BE} **Cache hit!** This response was retrieved from cache for instant performance.
+
+---
+
+`
+        };
+        return {
+          content: [header2, ...cached.data.content || []]
+        };
+      }
+      await context.streamContent({
+        type: "text",
+        text: `\u{1F504} Fetching design from Figma${forceCode ? " (including code generation)" : ""}...`
+      });
+      console.log(`[DESIGN CONTEXT] Calling Figma MCP get_design_context...`);
+      const startTime = performance.now();
+      const designResult = await figmaClient.getDesignContext(nodeId, {
+        clientLanguages: "typescript",
+        clientFrameworks: "react",
+        forceCode
+      });
+      const endTime = performance.now();
+      designContextCache.set(cacheKey, {
+        data: designResult,
+        timestamp: now,
+        forceCode
+      });
+      console.log(`[DESIGN CONTEXT] Cached result for key: ${cacheKey}`);
+      console.log(`[DESIGN CONTEXT] Response received in ${(endTime - startTime).toFixed(0)}ms`);
+      console.log(`[DESIGN CONTEXT] Content items:`, designResult.content?.length || 0);
+      if (!designResult.content || designResult.content.length === 0) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `\u274C No design context returned from Figma MCP.
+
+**Node ID:** ${nodeId || "current selection"}
+
+**Troubleshooting:**
+- Ensure the node exists and is accessible in Figma
+- Try selecting the node in Figma first
+- Check if the node has any visible design elements`
+            }
+          ]
+        };
+      }
+      designResult.content.forEach((item, idx) => {
+        console.log(`[DESIGN CONTEXT] Content[${idx}]:`, {
+          type: item.type,
+          hasText: item.type === "text" && "text" in item,
+          textLength: item.type === "text" && "text" in item ? item.text?.length : 0,
+          hasData: item.type === "image" && "data" in item
+        });
+      });
+      const header = {
+        type: "text",
+        text: `\u2705 **Design Context from Figma**
+
+**Node ID:** ${nodeId || "current selection"}
+**Content Items:** ${designResult.content.length}
+**Fetch Time:** ${(endTime - startTime).toFixed(0)}ms
+**Mode:** ${forceCode ? "Full code generation" : "Metadata only (fast mode)"}
+
+${forceCode ? "" : "\u{1F4A1} **Tip:** If you need the actual React/HTML code, call this tool again with `forceCode: true`\n\n"}**What you're seeing:** Raw output from Figma's get_design_context tool.
+
+---
+
+`
+      };
+      console.log(`\u2705 Design context retrieved successfully`);
+      let transformedCodeSection = null;
+      let componentSuggestions = [];
+      if (forceCode && transformToDesignSystem && designResult.content) {
+        try {
+          await context.streamContent({
+            type: "text",
+            text: "\u{1F504} Transforming code to use design system components..."
+          });
+          if (autoSearchComponents) {
+            await context.streamContent({
+              type: "text",
+              text: "\u{1F50D} Discovering design system components from design analysis..."
+            });
+            try {
+              const queryExtractor2 = new DesignQueryExtractor();
+              const searchQuery = queryExtractor2.extractQuery(designResult);
+              console.log(`[TRANSFORM] Extracted query: "${searchQuery}"`);
+              await context.streamContent({
+                type: "text",
+                text: `\u{1F50E} Searching Pinecone for: "${searchQuery}"...`
+              });
+              const searchService = new PineconeSearchService({
+                namespace: PINECONE_NAMESPACE
+              });
+              const searchResults = await searchService.search(searchQuery, {
+                // topK and minScore use service defaults (read from PINECONE_TOP_K and PINECONE_MIN_SCORE env vars)
+              });
+              componentSuggestions = searchResults.matches;
+              const componentNames = componentSuggestions.map((comp) => comp.tag).join(", ");
+              console.log(
+                `[TRANSFORM] Found ${componentSuggestions.length} components from Pinecone: ${componentNames}`
+              );
+              if (componentSuggestions.length > 0) {
+                await context.streamContent({
+                  type: "text",
+                  text: `\u2705 Discovered ${componentSuggestions.length} design system components:
+${componentSuggestions.map((c) => `  - ${c.tag} (${c.category})`).join("\n")}`
+                });
+              } else {
+                await context.streamContent({
+                  type: "text",
+                  text: `\u26A0\uFE0F No components found in Pinecone. Using default mappings.`
+                });
+              }
+            } catch (error) {
+              console.warn(
+                `[TRANSFORM] Could not get component suggestions:`,
+                error
+              );
+              await context.streamContent({
+                type: "text",
+                text: `\u26A0\uFE0F Error searching Pinecone: ${error instanceof Error ? error.message : String(error)}
+Falling back to default mappings.`
+              });
+            }
+          }
+          if (componentSuggestions.length > 0) {
+            await context.streamContent({
+              type: "text",
+              text: `\u2705 Found ${componentSuggestions.length} design system components from Pinecone. Returning component documentation to agent.`
+            });
+            const queryExtractor2 = new DesignQueryExtractor();
+            const searchQuery = queryExtractor2.extractQuery(designResult);
+            const minScore = parseFloat(process.env.PINECONE_MIN_SCORE);
+            const topK = parseInt(process.env.PINECONE_TOP_K, 10);
+            const indexName = process.env.PINECONE_INDEX;
+            transformedCodeSection = {
+              type: "text",
+              text: `## \u{1F50D} **Available Design System Components from Pinecone**
+
+**Search Query:** "${searchQuery}"
+**Components Found:** ${componentSuggestions.length}
+
+Use the component documentation below to transform the Figma code into design system components. The agent will generate the code using these component specifications.
+
+---
+
+${Formatters.toMarkdown({
+                query: searchQuery,
+                matches: componentSuggestions,
+                relevantMatches: componentSuggestions.length,
+                totalMatches: componentSuggestions.length,
+                searchMetadata: { minScore, topK, indexName },
+                lowScoreMatches: []
+              })}
+
+**\u{1F4A1} Instructions:** Use the component documentation above to transform the Figma code. Each component includes:
+- Exact prop names and types
+- Event names and types
+- Full documentation
+- Usage examples
+
+Generate code that uses these components with the correct props and structure.
+
+---
+
+`
+            };
+          } else {
+            await context.streamContent({
+              type: "text",
+              text: `\u26A0\uFE0F No components found in Pinecone for this design.`
+            });
+          }
+        } catch (error) {
+          console.error(`[CODE TRANSFORM ERROR]`, error);
+          await context.streamContent({
+            type: "text",
+            text: `\u26A0\uFE0F Error transforming code: ${error instanceof Error ? error.message : String(error)}
+`
+          });
+        }
+      }
+      let componentSection = null;
+      if (forceCode && autoSearchComponents && designResult.content) {
+        try {
+          await context.streamContent({
+            type: "text",
+            text: "\u{1F50D} Analyzing generated code for design system components..."
+          });
+          const extractedComponents = ComponentExtractor.extractComponents(
+            designResult.content
+          );
+          if (extractedComponents.length > 0) {
+            await context.streamContent({
+              type: "text",
+              text: `\u{1F4E6} Found ${extractedComponents.length} component reference(s): ${extractedComponents.map((c) => c.tag).join(", ")}`
+            });
+            const lookupService = new ComponentLookupService(void 0, { namespace: PINECONE_NAMESPACE });
+            const componentTags = extractedComponents.map((c) => c.tag);
+            await context.streamContent({
+              type: "text",
+              text: `\u{1F50E} Searching component information in Pinecone...`
+            });
+            const lookupResults = await lookupService.lookupMultipleComponents(
+              componentTags
+            );
+            const summary = ComponentLookupService.getSummary(lookupResults);
+            for (const result of lookupResults) {
+              if (result.found && result.component) {
+                const comp = result.component;
+                await context.streamContent({
+                  type: "text",
+                  text: `\u2705 **${comp.tag}** - ${comp.category}
+${comp.description || "No description available"}
+`
+                });
+              } else {
+                await context.streamContent({
+                  type: "text",
+                  text: `\u26A0\uFE0F **${result.tag}** - Not found in component library
+`
+                });
+              }
+            }
+            let summaryText = `
+## \u{1F4CB} **Component Analysis Summary**
+
+**Total components found in code:** ${summary.total}
+**Found in library:** ${summary.found}
+**Not found:** ${summary.notFound}
+
+`;
+            if (summary.foundComponents.length > 0) {
+              summaryText += `### \u2705 Components Found:
+
+`;
+              summary.foundComponents.forEach((comp) => {
+                summaryText += `- **${comp.tag}** (${comp.category}) - Score: ${comp.score.toFixed(4)}
+`;
+                if (comp.description) {
+                  summaryText += `  - ${comp.description.substring(0, 100)}${comp.description.length > 100 ? "..." : ""}
+`;
+                }
+              });
+              summaryText += `
+`;
+            }
+            if (summary.notFoundTags.length > 0) {
+              summaryText += `### \u26A0\uFE0F Components Not Found:
+
+`;
+              summary.notFoundTags.forEach((tag) => {
+                summaryText += `- **${tag}** - This component may not be indexed in Pinecone or may not exist
+`;
+              });
+              summaryText += `
+`;
+            }
+            summaryText += `\u{1F4A1} **Tip:** Use \`figma_suggest_components\` tool to get detailed information and usage examples for these components.
+
+---
+
+`;
+            componentSection = {
+              type: "text",
+              text: summaryText
+            };
+          } else {
+            await context.streamContent({
+              type: "text",
+              text: `\u2139\uFE0F No design system components found in the generated code.
+`
+            });
+          }
+        } catch (error) {
+          console.error(`[COMPONENT SEARCH ERROR]`, error);
+          await context.streamContent({
+            type: "text",
+            text: `\u26A0\uFE0F Error searching for components: ${error instanceof Error ? error.message : String(error)}
+`
+          });
+        }
+      }
+      const finalContent = [header];
+      finalContent.push(...designResult.content);
+      if (transformedCodeSection) {
+        finalContent.push(transformedCodeSection);
+      }
+      if (componentSection) {
+        finalContent.push(componentSection);
+      }
+      return {
+        content: finalContent
+      };
+    } catch (error) {
+      console.error(`[DESIGN CONTEXT ERROR]`, error);
+      return {
+        content: [
+          {
+            type: "text",
+            text: `\u274C **Failed to Get Design Context**
+
+**Error:** ${error instanceof Error ? error.message : String(error)}
+
+**Troubleshooting:**
+1. Is Figma Desktop running?
+2. Is the node ID valid?
+3. Is Figma MCP enabled? (Figma \u2192 Preferences \u2192 Enable MCP)
+4. Try restarting Figma Desktop
+
+${error instanceof Error && error.stack ? `
+**Stack:**
+${error.stack}` : ""}`
+          }
+        ]
+      };
+    }
+  }
+});
+server.addTool({
+  name: "figma_suggest_components",
+  description: `**USE THIS TOOL FIRST** when generating code from Figma designs.
+
+Get component suggestions from your organization's design system based on a Figma design. This tool searches the component library configured in your environment and returns specific components that match your design.
+
+**CRITICAL:**
+- This tool returns ONLY components from your organization's design system
+- NEVER use generic component libraries unless explicitly found in the search results
+- Always call this tool BEFORE generating code from Figma designs
+- Use the recommended components from the response in your code generation
+
+**What this does:**
+- Fetches design context from Figma (uses cache when available)
+- Extracts semantic query from the design
+- Searches your component library for relevant components
+- Processes results with Frida AI for intelligent recommendations
+- Returns component suggestions with code examples and usage guidelines
+
+**Performance:**
+- Typically completes in 3-10 seconds (depending on Frida processing)
+- Uses cache to avoid redundant Figma calls
+- Component search is fast (~1-2s)
+- Frida AI processing adds 2-5s for intelligent suggestions
+
+**Usage:**
+- Provide a nodeId (e.g., "315-2920") or leave empty for current selection
+- Optionally provide a custom query to override automatic extraction
+- Configure minScore and topK to control search results
+- Set useFrida to false to skip AI processing (faster, less intelligent)
+
+**Example:**
+\`\`\`json
+{
+  "nodeId": "315-2920",
+  "minScore": 0.1,
+  "topK": 5,
+  "useFrida": true
+}
+\`\`\`
+
+**Returns:**
+- Recommended components from Frida AI (if enabled)
+- Search results with components from your design system
+- Component details (props, events, methods, slots, usage examples)
+- Generated code examples with framework-specific imports`,
+  annotations: {
+    title: "Suggest Design System Components",
+    readOnlyHint: true,
+    openWorldHint: false
+  },
+  parameters: z.object({
+    nodeId: z.string().optional().describe('Figma node ID (e.g., "315-2920" or "315:2920"). Leave empty for current selection.'),
+    minScore: z.number().optional().describe("Minimum Pinecone relevance score (default: 0.05). Higher values return more relevant results."),
+    topK: z.number().optional().describe("Maximum number of components to retrieve (default: 10)."),
+    useFrida: z.boolean().optional().describe("Enable Frida AI processing for intelligent recommendations (default: true)."),
+    query: z.string().optional().describe("Custom search query. If not provided, will be extracted automatically from the Figma design context.")
+  }),
+  execute: async (args, context) => {
+    console.log(`
+[FIGMA_SUGGEST_COMPONENTS] ========================================`);
+    console.log(`[FIGMA_SUGGEST_COMPONENTS] Tool called`);
+    console.log(`[FIGMA_SUGGEST_COMPONENTS] nodeId: ${args.nodeId || "current selection"}`);
+    console.log(`[FIGMA_SUGGEST_COMPONENTS] figmaConnected flag: ${figmaConnected}`);
+    console.log(`[FIGMA_SUGGEST_COMPONENTS] ========================================`);
+    if (!figmaConnected) {
+      console.log(`[FIGMA_SUGGEST_COMPONENTS] \u26A0\uFE0F  Early return: figmaConnected is false`);
+      return {
+        content: [
+          {
+            type: "text",
+            text: "\u274C Not connected to Figma MCP. Check logs for connection details."
+          }
+        ]
+      };
+    }
+    console.log(`[FIGMA_SUGGEST_COMPONENTS] Proceeding with component suggestion...`);
+    const nodeId = args.nodeId;
+    const minScore = args.minScore ?? 0.05;
+    const topK = args.topK ?? 10;
+    const useFrida = args.useFrida ?? true;
+    const customQuery = args.query;
+    console.log(`
+[COMPONENT SUGGEST] Starting...`);
+    console.log(`[COMPONENT SUGGEST] NodeId:`, nodeId || "current selection");
+    console.log(`[COMPONENT SUGGEST] MinScore:`, minScore);
+    console.log(`[COMPONENT SUGGEST] TopK:`, topK);
+    console.log(`[COMPONENT SUGGEST] UseFrida:`, useFrida);
+    await context.streamContent({
+      type: "text",
+      text: "\u{1F3A8} Fetching design context from Figma..."
+    });
+    const designCacheKey = `${nodeId || "current"}:false`;
+    const now = Date.now();
+    let designResult;
+    const cachedDesign = designContextCache.get(designCacheKey);
+    const designCacheAge = cachedDesign ? now - cachedDesign.timestamp : CACHE_TTL_MS + 1;
+    if (cachedDesign && designCacheAge < CACHE_TTL_MS) {
+      console.log(`[COMPONENT SUGGEST] Using cached design context`);
+      designResult = cachedDesign.data;
+    } else {
+      designResult = await figmaClient.getDesignContext(nodeId, {
+        clientLanguages: "typescript",
+        clientFrameworks: "react",
+        forceCode: false
+        // Use metadata mode for faster response
+      });
+      designContextCache.set(designCacheKey, {
+        data: designResult,
+        timestamp: now,
+        forceCode: false
+      });
+    }
+    return handleComponentSuggestion({
+      nodeId,
+      minScore,
+      topK,
+      useFrida,
+      query: customQuery,
+      namespace: PINECONE_NAMESPACE,
+      designContext: designResult,
+      designContextCache,
+      getDesignContext: figmaClient.getDesignContext.bind(figmaClient),
+      streamContent: async (content) => {
+        if (Array.isArray(content)) {
+          for (const item of content) {
+            await context.streamContent(item);
+          }
+        } else {
+          await context.streamContent(content);
+        }
+      }
+    });
+  }
+});
+server.addTool({
+  name: "figma_improve_layout",
+  description: `Trigger layout improvement to match the Figma frame reference.
+
+**What this does:**
+- Returns an instruction to improve the generated layout to match the Figma design
+- Use this tool after code generation to refine the layout
+- The agent will use this instruction to adjust spacing, positioning, and styling
+
+**Usage:**
+- Call this tool after generating code from Figma
+- No parameters required - simply triggers the improvement instruction
+
+**Example:**
+\`\`\`json
+{}
+\`\`\``,
+  annotations: {
+    title: "Improve Layout to Match Figma",
+    readOnlyHint: false,
+    openWorldHint: false
+  },
+  parameters: z.object({}),
+  execute: async (_args, _context) => {
+    return {
+      content: [
+        {
+          type: "text",
+          text: "#figma2frida improve the layout to match the figma frame reference"
+        }
+      ]
+    };
+  }
+});
+if (HTTP_STREAM) {
+  server.start({
+    httpStream: {
+      port: PORT
+    },
+    transportType: "httpStream"
+  });
+  console.log(`
+\u2705 Figma Proxy MCP Server running on HTTP Stream!
+
+Endpoint: http://localhost:${PORT}/mcp
+
+Available Tools:
+- figma_get_screenshot: Get visual screenshot (fast)
+- figma_get_design_context: Get design data and generated code (with caching & streaming)
+- figma_suggest_components: Suggest design system components based on Figma design (with Pinecone & Frida AI)
+- figma_improve_layout: Trigger layout improvement to match Figma frame reference
+
+Configuration:
+- Pinecone Namespace: ${PINECONE_NAMESPACE || "not set (use --pinecone-namespace)"}
+
+Test with curl:
+curl -X POST http://localhost:${PORT}/mcp \\
+  -H "Content-Type: application/json" \\
+  -d '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}'
+`);
+} else {
+  server.start({ transportType: "stdio" });
+  console.log("Started with stdio transport (for MCP clients like Cursor)");
+}
+//# sourceMappingURL=figma2frida.js.map