sonance-brand-mcp 1.3.39 → 1.3.41

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

@@ -504,6 +504,8 @@ export async function POST(request: Request) {
       // 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: LLM screenshot analysis");
         const analysis = await analyzeScreenshotForSearch(screenshot, userPrompt, apiKey);
@@ -516,13 +518,39 @@ export async function POST(request: Request) {
           // 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", {
             analysis: {
               visibleText: analysis.visibleText.slice(0, 5),
               componentNames: analysis.componentNames,
               codePatterns: analysis.codePatterns.slice(0, 5)
             },
-            filesFound: smartSearchFiles.map(f => f.path)
+            filesFound: smartSearchFiles.map(f => f.path),
+            recommendedFile
           });
         }
       }
@@ -625,9 +653,47 @@ GLOBALS.CSS (relevant theme variables):
 ${pageContext.globalsCSS.substring(0, 2000)}${pageContext.globalsCSS.length > 2000 ? "\n/* ... (truncated) */" : ""}
 \`\`\`
 
-VALID FILES YOU MAY EDIT:
-${pageContext.pageFile ? `- ${pageContext.pageFile}` : ""}
-${pageContext.componentSources.map((c) => `- ${c.path}`).join("\n")}
+`;
+
+      // Add recommendation block just before VALID FILES if we have one
+      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.
+YOU MUST edit the recommended file unless you have a specific reason not to.
+
+`;
+      }
+
+      // Build VALID FILES list with recommended file first and marked
+      const validFilesList: string[] = [];
+      const recommendedPath = recommendedFile?.path;
+      
+      // Add recommended file first with marker
+      if (recommendedPath) {
+        validFilesList.push(`- ${recommendedPath} (*** RECOMMENDED - EDIT THIS FILE ***)`);
+      }
+      
+      // Add page file (if not the recommended file)
+      if (pageContext.pageFile && pageContext.pageFile !== recommendedPath) {
+        validFilesList.push(`- ${pageContext.pageFile}`);
+      }
+      
+      // Add other component sources (excluding recommended file)
+      for (const comp of pageContext.componentSources) {
+        if (comp.path !== recommendedPath) {
+          validFilesList.push(`- ${comp.path}`);
+        }
+      }
+
+      textContent += `VALID FILES YOU MAY EDIT:
+${validFilesList.join("\n")}
 
 INSTRUCTIONS:
 1. Look at the screenshot and identify elements mentioned in the user's request
@@ -636,6 +702,7 @@ INSTRUCTIONS:
 4. PRESERVE all existing logic, hooks, API calls, and error handling
 5. Return the FULL file content (no truncation, no "// ... existing ..." comments)
 6. Only use file paths from the VALID FILES list above
+7. ALWAYS prioritize the (*** RECOMMENDED ***) file if one is marked - it contains the UI you see in the screenshot
 
 CRITICAL: Your modified file should have approximately the same number of lines as the original. If the original has 200 lines and your output has 50 lines, you have made a mistake.`;
 

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

@@ -514,6 +514,8 @@ export async function POST(request: Request) {
       // 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: LLM screenshot analysis");
         const analysis = await analyzeScreenshotForSearch(screenshot, userPrompt, apiKey);
@@ -526,13 +528,39 @@ export async function POST(request: Request) {
           // 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", {
             analysis: {
               visibleText: analysis.visibleText.slice(0, 5),
               componentNames: analysis.componentNames,
               codePatterns: analysis.codePatterns.slice(0, 5)
             },
-            filesFound: smartSearchFiles.map(f => f.path)
+            filesFound: smartSearchFiles.map(f => f.path),
+            recommendedFile
           });
         }
       }
@@ -635,9 +663,47 @@ GLOBALS.CSS (relevant theme variables):
 ${pageContext.globalsCSS.substring(0, 2000)}${pageContext.globalsCSS.length > 2000 ? "\n/* ... (truncated) */" : ""}
 \`\`\`
 
-VALID FILES YOU MAY EDIT:
-${pageContext.pageFile ? `- ${pageContext.pageFile}` : ""}
-${pageContext.componentSources.map((c) => `- ${c.path}`).join("\n")}
+`;
+
+      // Add recommendation block just before VALID FILES if we have one
+      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.
+YOU MUST edit the recommended file unless you have a specific reason not to.
+
+`;
+      }
+
+      // Build VALID FILES list with recommended file first and marked
+      const validFilesList: string[] = [];
+      const recommendedPath = recommendedFile?.path;
+      
+      // Add recommended file first with marker
+      if (recommendedPath) {
+        validFilesList.push(`- ${recommendedPath} (*** RECOMMENDED - EDIT THIS FILE ***)`);
+      }
+      
+      // Add page file (if not the recommended file)
+      if (pageContext.pageFile && pageContext.pageFile !== recommendedPath) {
+        validFilesList.push(`- ${pageContext.pageFile}`);
+      }
+      
+      // Add other component sources (excluding recommended file)
+      for (const comp of pageContext.componentSources) {
+        if (comp.path !== recommendedPath) {
+          validFilesList.push(`- ${comp.path}`);
+        }
+      }
+
+      textContent += `VALID FILES YOU MAY EDIT:
+${validFilesList.join("\n")}
 
 INSTRUCTIONS:
 1. Look at the screenshot and identify elements mentioned in the user's request
@@ -646,6 +712,7 @@ INSTRUCTIONS:
 4. Generate complete modified code for each file
 5. Provide previewCSS for immediate visual feedback
 6. Return as JSON in the specified format
+7. ALWAYS prioritize the (*** RECOMMENDED ***) file if one is marked - it contains the UI you see in the screenshot
 
 CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new files.`;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.39",
+  "version": "1.3.41",
   "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",