sonance-brand-mcp 1.3.38 → 1.3.40

package/dist/assets/api/sonance-vision-apply/route.ts

@@ -80,14 +80,23 @@ function debugLog(message: string, data?: unknown) {
 }
 
 /**
- * Phase 1: Extract visible text from screenshot
- * The LLM reads the screenshot and extracts text content related to the user's edit request
+ * Result of LLM screenshot analysis for smart file discovery
  */
-async function extractTextFromScreenshot(
+interface ScreenshotAnalysis {
+  visibleText: string[];
+  componentNames: string[];
+  codePatterns: string[];
+}
+
+/**
+ * Phase 1: Analyze screenshot using LLM vision for smart file discovery
+ * The LLM extracts visible text AND deduces likely component names and code patterns
+ */
+async function analyzeScreenshotForSearch(
   screenshot: string,
   userPrompt: string,
   apiKey: string
-): Promise<string[]> {
+): Promise<ScreenshotAnalysis> {
   const anthropic = new Anthropic({ apiKey });
 
   const base64Data = screenshot.split(",")[1] || screenshot;
@@ -109,15 +118,22 @@ async function extractTextFromScreenshot(
           },
           {
             type: "text",
-            text: `Look at this screenshot. The user wants to: "${userPrompt}"
+            text: `Look at this screenshot of a React application. The user wants to: "${userPrompt}"
+
+Analyze this UI to help find the correct source file. Return:
 
-Extract the EXACT text content visible in the UI elements that need to be edited.
-Focus on button labels, headings, and any text within the area the user wants to change.
+1. **visibleText**: Extract the EXACT text visible in UI elements (button labels, headings, tab names, etc.)
+2. **componentNames**: Deduce likely React component names based on what you see (e.g., "ProcessDetailPanel", "UserSettings", "DataTable"). Think about common React naming conventions.
+3. **codePatterns**: Suggest code identifiers that might exist (e.g., "handleEdit", "isLoading", "activeTab", "onDelete")
 
 Return ONLY valid JSON:
-{ "textStrings": ["View Assets", "View Flowchart", "exact text 1", "exact text 2"] }
+{
+  "visibleText": ["Assets", "Flowchart", "Edit", "Delete"],
+  "componentNames": ["ProcessDetailPanel", "ProcessActions", "QuickActions"],
+  "codePatterns": ["handleEdit", "handleDelete", "activeTab", "setActiveTab"]
+}
 
-Be precise - return the exact text as it appears, no extra words.`,
+Be smart - use your knowledge of React patterns to make educated guesses about component and variable names.`,
           },
         ],
       },
@@ -126,7 +142,9 @@ Be precise - return the exact text as it appears, no extra words.`,
 
   try {
     const textBlock = response.content.find((block) => block.type === "text");
-    if (!textBlock || textBlock.type !== "text") return [];
+    if (!textBlock || textBlock.type !== "text") {
+      return { visibleText: [], componentNames: [], codePatterns: [] };
+    }
 
     let jsonText = textBlock.text.trim();
     const jsonMatch = jsonText.match(/```json\n([\s\S]*?)\n```/) ||
@@ -136,34 +154,131 @@ Be precise - return the exact text as it appears, no extra words.`,
     }
 
     const parsed = JSON.parse(jsonText);
-    const strings = parsed.textStrings || [];
+    const result: ScreenshotAnalysis = {
+      visibleText: parsed.visibleText || parsed.textStrings || [],
+      componentNames: parsed.componentNames || [],
+      codePatterns: parsed.codePatterns || [],
+    };
 
-    debugLog("Phase 1: Extracted text from screenshot", { textStrings: strings });
-    return strings;
+    debugLog("Phase 1: Analyzed screenshot for search", result);
+    return result;
   } catch (e) {
-    debugLog("Phase 1: Failed to parse text extraction response", { error: String(e) });
-    return [];
+    debugLog("Phase 1: Failed to parse screenshot analysis response", { error: String(e) });
+    return { visibleText: [], componentNames: [], codePatterns: [] };
+  }
+}
+
+/**
+ * Search for component files by name across the project
+ * Returns the file path if found, null otherwise
+ */
+function findComponentFileByName(
+  componentName: string,
+  projectRoot: string
+): string | null {
+  const normalizedName = componentName.toLowerCase();
+  const SEARCH_DIRS = ["src/components", "components", "src", "app"];
+  const EXTENSIONS = [".tsx", ".jsx", ".ts", ".js"];
+
+  function searchRecursive(
+    dir: string,
+    fileName: string,
+    depth = 0
+  ): string | null {
+    if (depth > 5) return null;
+    try {
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      // Check direct matches (case-insensitive)
+      for (const ext of EXTENSIONS) {
+        const match = entries.find(
+          (e) => e.isFile() && e.name.toLowerCase() === `${fileName}${ext}`
+        );
+        if (match) return path.join(dir, match.name);
+      }
+      // Also check for partial matches (e.g., "ProcessDetail" matches "ProcessDetailPanel.tsx")
+      for (const entry of entries) {
+        if (entry.isFile()) {
+          const entryNameLower = entry.name.toLowerCase();
+          if (entryNameLower.includes(fileName) && EXTENSIONS.some(ext => entryNameLower.endsWith(ext))) {
+            return path.join(dir, entry.name);
+          }
+        }
+      }
+      // Recurse into subdirs
+      for (const entry of entries) {
+        if (
+          entry.isDirectory() &&
+          !entry.name.startsWith(".") &&
+          entry.name !== "node_modules"
+        ) {
+          const result = searchRecursive(
+            path.join(dir, entry.name),
+            fileName,
+            depth + 1
+          );
+          if (result) return result;
+        }
+      }
+    } catch {
+      /* skip unreadable */
+    }
+    return null;
   }
+
+  for (const dir of SEARCH_DIRS) {
+    const searchDir = path.join(projectRoot, dir);
+    if (fs.existsSync(searchDir)) {
+      const result = searchRecursive(searchDir, normalizedName);
+      if (result) return path.relative(projectRoot, result);
+    }
+  }
+  return null;
 }
 
 /**
- * Search project files for exact text matches
- * Returns file paths and content for files containing any of the search strings
+ * Smart file search using LLM-derived analysis
+ * Uses intelligent scoring: filename matches > unique text matches > total matches
  */
-function searchFilesForExactText(
-  searchStrings: string[],
+function searchFilesSmart(
+  analysis: ScreenshotAnalysis,
   projectRoot: string,
   maxFiles: number = 10
-): { path: string; content: string }[] {
-  if (searchStrings.length === 0) return [];
+): { path: string; content: string; score: number }[] {
+  const { visibleText, componentNames, codePatterns } = analysis;
+  
+  // Combine all search terms
+  const allSearchTerms = [...visibleText, ...codePatterns];
+  
+  if (allSearchTerms.length === 0 && componentNames.length === 0) return [];
 
-  const results: { path: string; content: string; matchCount: number }[] = [];
-  const searchDirs = ["components", "src/components", "app", "src/app"];
+  const results: Map<string, { path: string; content: string; score: number; filenameMatch: boolean }> = new Map();
+  const searchDirs = ["components", "src/components", "app", "src/app", "pages", "src/pages"];
   const extensions = [".tsx", ".jsx"];
   const visited = new Set<string>();
 
+  // Phase 2a: Search by component name (highest priority)
+  for (const componentName of componentNames) {
+    const foundPath = findComponentFileByName(componentName, projectRoot);
+    if (foundPath && !results.has(foundPath)) {
+      try {
+        const fullPath = path.join(projectRoot, foundPath);
+        const content = fs.readFileSync(fullPath, "utf-8");
+        results.set(foundPath, { 
+          path: foundPath, 
+          content, 
+          score: 50, // High base score for filename match
+          filenameMatch: true 
+        });
+        debugLog("Phase 2a: Found file by component name", { componentName, foundPath });
+      } catch {
+        // Skip files that can't be read
+      }
+    }
+  }
+
+  // Phase 2b: Search by text content (case-insensitive, unique term scoring)
   function searchDir(dirPath: string, depth: number = 0) {
-    if (depth > 5 || results.length >= maxFiles) return;
+    if (depth > 5) return;
 
     const fullDirPath = path.join(projectRoot, dirPath);
     if (!fs.existsSync(fullDirPath) || visited.has(fullDirPath)) return;
@@ -173,8 +288,6 @@ function searchFilesForExactText(
       const entries = fs.readdirSync(fullDirPath, { withFileTypes: true });
 
       for (const entry of entries) {
-        if (results.length >= maxFiles) break;
-
         const entryPath = path.join(dirPath, entry.name);
         const fullEntryPath = path.join(projectRoot, entryPath);
 
@@ -185,17 +298,41 @@ function searchFilesForExactText(
         } else if (entry.isFile() && extensions.some(ext => entry.name.endsWith(ext))) {
           try {
             const content = fs.readFileSync(fullEntryPath, "utf-8");
+            const contentLower = content.toLowerCase();
 
-            // Count exact text matches
-            let matchCount = 0;
-            for (const searchText of searchStrings) {
-              if (content.includes(searchText)) {
-                matchCount++;
+            // Count unique matches and total matches
+            let uniqueMatches = 0;
+            let totalMatches = 0;
+            
+            for (const searchTerm of allSearchTerms) {
+              const searchLower = searchTerm.toLowerCase();
+              // Check if term exists (case-insensitive)
+              if (contentLower.includes(searchLower)) {
+                uniqueMatches++;
+                // Count occurrences
+                const regex = new RegExp(searchLower.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
+                const matches = content.match(regex);
+                totalMatches += matches ? matches.length : 0;
               }
             }
 
-            if (matchCount > 0) {
-              results.push({ path: entryPath, content, matchCount });
+            if (uniqueMatches > 0) {
+              // Score: unique matches * 10 + total matches
+              const contentScore = (uniqueMatches * 10) + totalMatches;
+              
+              // Check if we already have this file (from component name search)
+              const existing = results.get(entryPath);
+              if (existing) {
+                // Add content score to existing filename match score
+                existing.score += contentScore;
+              } else {
+                results.set(entryPath, { 
+                  path: entryPath, 
+                  content, 
+                  score: contentScore,
+                  filenameMatch: false 
+                });
+              }
             }
           } catch {
             // Skip files that can't be read
@@ -209,19 +346,26 @@ function searchFilesForExactText(
 
   for (const dir of searchDirs) {
     searchDir(dir);
-    if (results.length >= maxFiles) break;
   }
 
-  // Sort by match count (most matches first)
-  results.sort((a, b) => b.matchCount - a.matchCount);
-
-  debugLog("Phase 2: Found files with text matches", {
-    searchStrings,
-    filesFound: results.length,
-    topMatches: results.slice(0, 5).map(r => ({ path: r.path, matchCount: r.matchCount }))
+  // Sort by score (highest first)
+  const sortedResults = Array.from(results.values())
+    .sort((a, b) => b.score - a.score)
+    .slice(0, maxFiles);
+
+  debugLog("Phase 2: Smart search results", {
+    componentNames,
+    visibleText: visibleText.slice(0, 5),
+    codePatterns: codePatterns.slice(0, 5),
+    filesFound: sortedResults.length,
+    topMatches: sortedResults.slice(0, 5).map(r => ({ 
+      path: r.path, 
+      score: r.score, 
+      filenameMatch: r.filenameMatch 
+    }))
   });
 
-  return results.slice(0, maxFiles).map(r => ({ path: r.path, content: r.content }));
+  return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
 }
 
 const VISION_SYSTEM_PROMPT = `You are an expert React/TypeScript developer with vision capabilities. You can see screenshots and modify code.
@@ -357,19 +501,56 @@ export async function POST(request: Request) {
       // Generate a unique session ID
       const newSessionId = randomUUID().slice(0, 8);
 
-      // PHASE 1: Extract visible text from screenshot using LLM vision
-      // This helps find the correct component file even if it's not in the import chain
-      let textSearchFiles: { path: string; content: string }[] = [];
+      // PHASE 1+2: LLM-driven smart file discovery
+      // The LLM analyzes the screenshot and deduces component names, code patterns, and visible text
+      let smartSearchFiles: { path: string; content: string }[] = [];
+      let recommendedFile: { path: string; reason: string } | null = null;
+      
       if (screenshot) {
-        debugLog("Starting Phase 1: Text extraction from screenshot");
-        const extractedText = await extractTextFromScreenshot(screenshot, userPrompt, apiKey);
+        debugLog("Starting Phase 1: LLM screenshot analysis");
+        const analysis = await analyzeScreenshotForSearch(screenshot, userPrompt, apiKey);
 
-        if (extractedText.length > 0) {
-          // PHASE 2: Search project for files containing the extracted text
-          textSearchFiles = searchFilesForExactText(extractedText, projectRoot, 5);
+        const hasSearchTerms = analysis.visibleText.length > 0 || 
+                               analysis.componentNames.length > 0 || 
+                               analysis.codePatterns.length > 0;
+        
+        if (hasSearchTerms) {
+          // PHASE 2: Smart search using component names, text, and code patterns
+          const searchResults = searchFilesSmart(analysis, projectRoot, 10);
+          smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
+          
+          // Identify the recommended file (highest scoring file, prefer filename matches)
+          if (searchResults.length > 0) {
+            // Find the best filename match first
+            const filenameMatch = searchResults.find(r => 
+              analysis.componentNames.some(name => 
+                r.path.toLowerCase().includes(name.toLowerCase())
+              )
+            );
+            
+            if (filenameMatch) {
+              recommendedFile = {
+                path: filenameMatch.path,
+                reason: `Component name match from screenshot analysis`
+              };
+            } else {
+              // Fall back to highest score
+              recommendedFile = {
+                path: searchResults[0].path,
+                reason: `Highest content match score (${searchResults[0].score} points)`
+              };
+            }
+            debugLog("Recommended file for editing", recommendedFile);
+          }
+          
           debugLog("Phase 1+2 complete", {
-            extractedText,
-            filesFound: textSearchFiles.map(f => f.path)
+            analysis: {
+              visibleText: analysis.visibleText.slice(0, 5),
+              componentNames: analysis.componentNames,
+              codePatterns: analysis.codePatterns.slice(0, 5)
+            },
+            filesFound: smartSearchFiles.map(f => f.path),
+            recommendedFile
           });
         }
       }
@@ -377,17 +558,18 @@ export async function POST(request: Request) {
       // Gather page context (with keyword search based on user prompt)
       const pageContext = gatherPageContext(pageRoute || "/", projectRoot, userPrompt);
 
-      // Add text-search discovered files to component sources (if not already present)
+      // Add smart-search discovered files to component sources (if not already present)
+      // These files are prioritized because they were identified by LLM analysis
       const existingPaths = new Set([
         pageContext.pageFile,
         ...pageContext.componentSources.map(c => c.path)
       ]);
 
-      for (const file of textSearchFiles) {
+      for (const file of smartSearchFiles) {
         if (!existingPaths.has(file.path)) {
           // Insert at the beginning so these get priority
           pageContext.componentSources.unshift(file);
-          debugLog("Added file from text search to context", { path: file.path });
+          debugLog("Added file from smart search to context", { path: file.path });
         }
       }
 
@@ -415,6 +597,22 @@ User Request: "${userPrompt}"
 
 `;
 
+      // Add recommendation if smart search identified a best match
+      if (recommendedFile) {
+        textContent += `═══════════════════════════════════════════════════════════════════════════════
+⚡ RECOMMENDED FILE TO EDIT
+═══════════════════════════════════════════════════════════════════════════════
+
+Based on the screenshot analysis, the component you should edit is:
+**${recommendedFile.path}**
+Reason: ${recommendedFile.reason}
+
+The page file (${pageContext.pageFile}) is just a wrapper - the actual UI elements are in the component above.
+STRONGLY PREFER editing the recommended file unless you have a specific reason not to.
+
+`;
+      }
+
       if (focusedElements && focusedElements.length > 0) {
         textContent += `FOCUSED ELEMENTS (user clicked on these):
 ${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}, ${el.coordinates.y})`).join("\n")}

package/dist/assets/api/sonance-vision-edit/route.ts

@@ -78,14 +78,23 @@ function debugLog(message: string, data?: unknown) {
 }
 
 /**
- * Phase 1: Extract visible text from screenshot
- * The LLM reads the screenshot and extracts text content related to the user's edit request
+ * Result of LLM screenshot analysis for smart file discovery
  */
-async function extractTextFromScreenshot(
+interface ScreenshotAnalysis {
+  visibleText: string[];
+  componentNames: string[];
+  codePatterns: string[];
+}
+
+/**
+ * Phase 1: Analyze screenshot using LLM vision for smart file discovery
+ * The LLM extracts visible text AND deduces likely component names and code patterns
+ */
+async function analyzeScreenshotForSearch(
   screenshot: string,
   userPrompt: string,
   apiKey: string
-): Promise<string[]> {
+): Promise<ScreenshotAnalysis> {
   const anthropic = new Anthropic({ apiKey });
 
   const base64Data = screenshot.split(",")[1] || screenshot;
@@ -107,15 +116,22 @@ async function extractTextFromScreenshot(
           },
           {
             type: "text",
-            text: `Look at this screenshot. The user wants to: "${userPrompt}"
+            text: `Look at this screenshot of a React application. The user wants to: "${userPrompt}"
 
-Extract the EXACT text content visible in the UI elements that need to be edited.
-Focus on button labels, headings, and any text within the area the user wants to change.
+Analyze this UI to help find the correct source file. Return:
+
+1. **visibleText**: Extract the EXACT text visible in UI elements (button labels, headings, tab names, etc.)
+2. **componentNames**: Deduce likely React component names based on what you see (e.g., "ProcessDetailPanel", "UserSettings", "DataTable"). Think about common React naming conventions.
+3. **codePatterns**: Suggest code identifiers that might exist (e.g., "handleEdit", "isLoading", "activeTab", "onDelete")
 
 Return ONLY valid JSON:
-{ "textStrings": ["View Assets", "View Flowchart", "exact text 1", "exact text 2"] }
+{
+  "visibleText": ["Assets", "Flowchart", "Edit", "Delete"],
+  "componentNames": ["ProcessDetailPanel", "ProcessActions", "QuickActions"],
+  "codePatterns": ["handleEdit", "handleDelete", "activeTab", "setActiveTab"]
+}
 
-Be precise - return the exact text as it appears, no extra words.`,
+Be smart - use your knowledge of React patterns to make educated guesses about component and variable names.`,
           },
         ],
       },
@@ -124,7 +140,9 @@ Be precise - return the exact text as it appears, no extra words.`,
 
   try {
     const textBlock = response.content.find((block) => block.type === "text");
-    if (!textBlock || textBlock.type !== "text") return [];
+    if (!textBlock || textBlock.type !== "text") {
+      return { visibleText: [], componentNames: [], codePatterns: [] };
+    }
 
     let jsonText = textBlock.text.trim();
     const jsonMatch = jsonText.match(/```json\n([\s\S]*?)\n```/) ||
@@ -134,34 +152,131 @@ Be precise - return the exact text as it appears, no extra words.`,
     }
 
     const parsed = JSON.parse(jsonText);
-    const strings = parsed.textStrings || [];
+    const result: ScreenshotAnalysis = {
+      visibleText: parsed.visibleText || parsed.textStrings || [],
+      componentNames: parsed.componentNames || [],
+      codePatterns: parsed.codePatterns || [],
+    };
 
-    debugLog("Phase 1: Extracted text from screenshot", { textStrings: strings });
-    return strings;
+    debugLog("Phase 1: Analyzed screenshot for search", result);
+    return result;
   } catch (e) {
-    debugLog("Phase 1: Failed to parse text extraction response", { error: String(e) });
-    return [];
+    debugLog("Phase 1: Failed to parse screenshot analysis response", { error: String(e) });
+    return { visibleText: [], componentNames: [], codePatterns: [] };
+  }
+}
+
+/**
+ * Search for component files by name across the project (for smart search)
+ * Returns the file path if found, null otherwise
+ */
+function findComponentFileByNameSmart(
+  componentName: string,
+  projectRoot: string
+): string | null {
+  const normalizedName = componentName.toLowerCase();
+  const SEARCH_DIRS = ["src/components", "components", "src", "app"];
+  const EXTENSIONS = [".tsx", ".jsx", ".ts", ".js"];
+
+  function searchRecursive(
+    dir: string,
+    fileName: string,
+    depth = 0
+  ): string | null {
+    if (depth > 5) return null;
+    try {
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      // Check direct matches (case-insensitive)
+      for (const ext of EXTENSIONS) {
+        const match = entries.find(
+          (e) => e.isFile() && e.name.toLowerCase() === `${fileName}${ext}`
+        );
+        if (match) return path.join(dir, match.name);
+      }
+      // Also check for partial matches (e.g., "ProcessDetail" matches "ProcessDetailPanel.tsx")
+      for (const entry of entries) {
+        if (entry.isFile()) {
+          const entryNameLower = entry.name.toLowerCase();
+          if (entryNameLower.includes(fileName) && EXTENSIONS.some(ext => entryNameLower.endsWith(ext))) {
+            return path.join(dir, entry.name);
+          }
+        }
+      }
+      // Recurse into subdirs
+      for (const entry of entries) {
+        if (
+          entry.isDirectory() &&
+          !entry.name.startsWith(".") &&
+          entry.name !== "node_modules"
+        ) {
+          const result = searchRecursive(
+            path.join(dir, entry.name),
+            fileName,
+            depth + 1
+          );
+          if (result) return result;
+        }
+      }
+    } catch {
+      /* skip unreadable */
+    }
+    return null;
+  }
+
+  for (const dir of SEARCH_DIRS) {
+    const searchDir = path.join(projectRoot, dir);
+    if (fs.existsSync(searchDir)) {
+      const result = searchRecursive(searchDir, normalizedName);
+      if (result) return path.relative(projectRoot, result);
+    }
   }
+  return null;
 }
 
 /**
- * Search project files for exact text matches
- * Returns file paths and content for files containing any of the search strings
+ * Smart file search using LLM-derived analysis
+ * Uses intelligent scoring: filename matches > unique text matches > total matches
  */
-function searchFilesForExactText(
-  searchStrings: string[],
+function searchFilesSmart(
+  analysis: ScreenshotAnalysis,
   projectRoot: string,
   maxFiles: number = 10
-): { path: string; content: string }[] {
-  if (searchStrings.length === 0) return [];
+): { path: string; content: string; score: number }[] {
+  const { visibleText, componentNames, codePatterns } = analysis;
+  
+  // Combine all search terms
+  const allSearchTerms = [...visibleText, ...codePatterns];
+  
+  if (allSearchTerms.length === 0 && componentNames.length === 0) return [];
 
-  const results: { path: string; content: string; matchCount: number }[] = [];
-  const searchDirs = ["components", "src/components", "app", "src/app"];
+  const results: Map<string, { path: string; content: string; score: number; filenameMatch: boolean }> = new Map();
+  const searchDirs = ["components", "src/components", "app", "src/app", "pages", "src/pages"];
   const extensions = [".tsx", ".jsx"];
   const visited = new Set<string>();
 
+  // Phase 2a: Search by component name (highest priority)
+  for (const componentName of componentNames) {
+    const foundPath = findComponentFileByNameSmart(componentName, projectRoot);
+    if (foundPath && !results.has(foundPath)) {
+      try {
+        const fullPath = path.join(projectRoot, foundPath);
+        const content = fs.readFileSync(fullPath, "utf-8");
+        results.set(foundPath, { 
+          path: foundPath, 
+          content, 
+          score: 50, // High base score for filename match
+          filenameMatch: true 
+        });
+        debugLog("Phase 2a: Found file by component name", { componentName, foundPath });
+      } catch {
+        // Skip files that can't be read
+      }
+    }
+  }
+
+  // Phase 2b: Search by text content (case-insensitive, unique term scoring)
   function searchDir(dirPath: string, depth: number = 0) {
-    if (depth > 5 || results.length >= maxFiles) return;
+    if (depth > 5) return;
 
     const fullDirPath = path.join(projectRoot, dirPath);
     if (!fs.existsSync(fullDirPath) || visited.has(fullDirPath)) return;
@@ -171,8 +286,6 @@ function searchFilesForExactText(
       const entries = fs.readdirSync(fullDirPath, { withFileTypes: true });
 
       for (const entry of entries) {
-        if (results.length >= maxFiles) break;
-
         const entryPath = path.join(dirPath, entry.name);
         const fullEntryPath = path.join(projectRoot, entryPath);
 
@@ -183,17 +296,41 @@ function searchFilesForExactText(
         } else if (entry.isFile() && extensions.some(ext => entry.name.endsWith(ext))) {
           try {
             const content = fs.readFileSync(fullEntryPath, "utf-8");
+            const contentLower = content.toLowerCase();
 
-            // Count exact text matches
-            let matchCount = 0;
-            for (const searchText of searchStrings) {
-              if (content.includes(searchText)) {
-                matchCount++;
+            // Count unique matches and total matches
+            let uniqueMatches = 0;
+            let totalMatches = 0;
+            
+            for (const searchTerm of allSearchTerms) {
+              const searchLower = searchTerm.toLowerCase();
+              // Check if term exists (case-insensitive)
+              if (contentLower.includes(searchLower)) {
+                uniqueMatches++;
+                // Count occurrences
+                const regex = new RegExp(searchLower.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
+                const matches = content.match(regex);
+                totalMatches += matches ? matches.length : 0;
               }
             }
 
-            if (matchCount > 0) {
-              results.push({ path: entryPath, content, matchCount });
+            if (uniqueMatches > 0) {
+              // Score: unique matches * 10 + total matches
+              const contentScore = (uniqueMatches * 10) + totalMatches;
+              
+              // Check if we already have this file (from component name search)
+              const existing = results.get(entryPath);
+              if (existing) {
+                // Add content score to existing filename match score
+                existing.score += contentScore;
+              } else {
+                results.set(entryPath, { 
+                  path: entryPath, 
+                  content, 
+                  score: contentScore,
+                  filenameMatch: false 
+                });
+              }
             }
           } catch {
             // Skip files that can't be read
@@ -207,19 +344,26 @@ function searchFilesForExactText(
 
   for (const dir of searchDirs) {
     searchDir(dir);
-    if (results.length >= maxFiles) break;
   }
 
-  // Sort by match count (most matches first)
-  results.sort((a, b) => b.matchCount - a.matchCount);
-
-  debugLog("Phase 2: Found files with text matches", {
-    searchStrings,
-    filesFound: results.length,
-    topMatches: results.slice(0, 5).map(r => ({ path: r.path, matchCount: r.matchCount }))
+  // Sort by score (highest first)
+  const sortedResults = Array.from(results.values())
+    .sort((a, b) => b.score - a.score)
+    .slice(0, maxFiles);
+
+  debugLog("Phase 2: Smart search results", {
+    componentNames,
+    visibleText: visibleText.slice(0, 5),
+    codePatterns: codePatterns.slice(0, 5),
+    filesFound: sortedResults.length,
+    topMatches: sortedResults.slice(0, 5).map(r => ({ 
+      path: r.path, 
+      score: r.score, 
+      filenameMatch: r.filenameMatch 
+    }))
   });
 
-  return results.slice(0, maxFiles).map(r => ({ path: r.path, content: r.content }));
+  return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
 }
 
 const VISION_SYSTEM_PROMPT = `You are an expert React/TypeScript developer with vision capabilities. You can see screenshots and modify code.
@@ -367,19 +511,56 @@ export async function POST(request: Request) {
         );
       }
 
-      // PHASE 1: Extract visible text from screenshot using LLM vision
-      // This helps find the correct component file even if it's not in the import chain
-      let textSearchFiles: { path: string; content: string }[] = [];
+      // PHASE 1+2: LLM-driven smart file discovery
+      // The LLM analyzes the screenshot and deduces component names, code patterns, and visible text
+      let smartSearchFiles: { path: string; content: string }[] = [];
+      let recommendedFile: { path: string; reason: string } | null = null;
+      
       if (screenshot) {
-        debugLog("Starting Phase 1: Text extraction from screenshot");
-        const extractedText = await extractTextFromScreenshot(screenshot, userPrompt, apiKey);
+        debugLog("Starting Phase 1: LLM screenshot analysis");
+        const analysis = await analyzeScreenshotForSearch(screenshot, userPrompt, apiKey);
 
-        if (extractedText.length > 0) {
-          // PHASE 2: Search project for files containing the extracted text
-          textSearchFiles = searchFilesForExactText(extractedText, projectRoot, 5);
+        const hasSearchTerms = analysis.visibleText.length > 0 || 
+                               analysis.componentNames.length > 0 || 
+                               analysis.codePatterns.length > 0;
+        
+        if (hasSearchTerms) {
+          // PHASE 2: Smart search using component names, text, and code patterns
+          const searchResults = searchFilesSmart(analysis, projectRoot, 10);
+          smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
+          
+          // Identify the recommended file (highest scoring file, prefer filename matches)
+          if (searchResults.length > 0) {
+            // Find the best filename match first
+            const filenameMatch = searchResults.find(r => 
+              analysis.componentNames.some(name => 
+                r.path.toLowerCase().includes(name.toLowerCase())
+              )
+            );
+            
+            if (filenameMatch) {
+              recommendedFile = {
+                path: filenameMatch.path,
+                reason: `Component name match from screenshot analysis`
+              };
+            } else {
+              // Fall back to highest score
+              recommendedFile = {
+                path: searchResults[0].path,
+                reason: `Highest content match score (${searchResults[0].score} points)`
+              };
+            }
+            debugLog("Recommended file for editing", recommendedFile);
+          }
+          
           debugLog("Phase 1+2 complete", {
-            extractedText,
-            filesFound: textSearchFiles.map(f => f.path)
+            analysis: {
+              visibleText: analysis.visibleText.slice(0, 5),
+              componentNames: analysis.componentNames,
+              codePatterns: analysis.codePatterns.slice(0, 5)
+            },
+            filesFound: smartSearchFiles.map(f => f.path),
+            recommendedFile
           });
         }
       }
@@ -387,17 +568,18 @@ export async function POST(request: Request) {
       // Gather page context (including focused element files and keyword search)
       const pageContext = gatherPageContext(pageRoute, projectRoot, focusedElements, userPrompt);
 
-      // Add text-search discovered files to component sources (if not already present)
+      // Add smart-search discovered files to component sources (if not already present)
+      // These files are prioritized because they were identified by LLM analysis
       const existingPaths = new Set([
         pageContext.pageFile,
         ...pageContext.componentSources.map(c => c.path)
       ]);
 
-      for (const file of textSearchFiles) {
+      for (const file of smartSearchFiles) {
         if (!existingPaths.has(file.path)) {
           // Insert at the beginning so these get priority
           pageContext.componentSources.unshift(file);
-          debugLog("Added file from text search to context", { path: file.path });
+          debugLog("Added file from smart search to context", { path: file.path });
         }
       }
 
@@ -425,6 +607,22 @@ User Request: "${userPrompt}"
 
 `;
 
+      // Add recommendation if smart search identified a best match
+      if (recommendedFile) {
+        textContent += `═══════════════════════════════════════════════════════════════════════════════
+⚡ RECOMMENDED FILE TO EDIT
+═══════════════════════════════════════════════════════════════════════════════
+
+Based on the screenshot analysis, the component you should edit is:
+**${recommendedFile.path}**
+Reason: ${recommendedFile.reason}
+
+The page file (${pageContext.pageFile}) is just a wrapper - the actual UI elements are in the component above.
+STRONGLY PREFER editing the recommended file unless you have a specific reason not to.
+
+`;
+      }
+
       if (focusedElements && focusedElements.length > 0) {
         textContent += `FOCUSED ELEMENTS (user clicked on these):
 ${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}, ${el.coordinates.y})`).join("\n")}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.38",
+  "version": "1.3.40",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",