sonance-brand-mcp 1.3.43 → 1.3.45

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

@@ -168,6 +168,73 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
   }
 }
 
+/**
+ * Phase 3: Ask LLM to select the best file from actual file list
+ * This replaces guessing - the LLM sees the real filenames and picks one
+ */
+async function selectBestFileFromList(
+  screenshot: string,
+  userPrompt: string,
+  candidateFiles: string[],
+  apiKey: string
+): Promise<string | null> {
+  if (candidateFiles.length === 0) return null;
+  
+  const anthropic = new Anthropic({ apiKey });
+  const base64Data = screenshot.split(",")[1] || screenshot;
+
+  try {
+    const response = await anthropic.messages.create({
+      model: "claude-sonnet-4-20250514",
+      max_tokens: 256,
+      messages: [{
+        role: "user",
+        content: [
+          { 
+            type: "image", 
+            source: { type: "base64", media_type: "image/png", data: base64Data } 
+          },
+          { 
+            type: "text", 
+            text: `The user wants to: "${userPrompt}"
+
+Here are the actual component files found in this codebase:
+${candidateFiles.map((f, i) => `${i + 1}. ${f}`).join('\n')}
+
+Looking at the screenshot, which file MOST LIKELY contains the UI elements the user wants to modify?
+
+IMPORTANT: Return ONLY the exact file path from the list above (e.g., "components/ProcessCatalogue/ProcessDetailPanel.tsx").
+Do not add any explanation or other text.` 
+          }
+        ]
+      }]
+    });
+
+    const textBlock = response.content.find(b => b.type === "text");
+    if (!textBlock || textBlock.type !== "text") return null;
+    
+    const selectedPath = textBlock.text.trim().replace(/^["']|["']$/g, ''); // Remove quotes if present
+    
+    // Validate it's in our list (exact match or ends with the path)
+    const matchedFile = candidateFiles.find(f => 
+      f === selectedPath || 
+      f.endsWith(selectedPath) ||
+      selectedPath.endsWith(f)
+    );
+    
+    debugLog("Phase 3: LLM selected file from list", { 
+      selectedPath, 
+      matchedFile, 
+      candidateCount: candidateFiles.length 
+    });
+    
+    return matchedFile || null;
+  } catch (e) {
+    debugLog("Phase 3: Failed to select file from list", { error: String(e) });
+    return null;
+  }
+}
+
 /**
  * Search for component files by name across the project
  * Returns the file path if found, null otherwise
@@ -519,37 +586,23 @@ export async function POST(request: Request) {
           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)
+          // PHASE 3: Ask LLM to pick the best file from actual file list
           if (searchResults.length > 0) {
-            // Helper to extract filename without extension
-            const getFilenameWithoutExt = (filePath: string): string => {
-              const filename = filePath.split('/').pop() || '';
-              return filename.replace(/\.(tsx?|jsx?)$/, '').toLowerCase();
-            };
-            
-            // Find file where FILENAME matches a component name (not just path)
-            const filenameMatch = searchResults.find(r => {
-              const filename = getFilenameWithoutExt(r.path);
-              return analysis.componentNames.some(name => {
-                const nameLower = name.toLowerCase();
-                // Exact match: ProcessDetailPanel === processdetailpanel
-                // Or filename contains the component name
-                return filename === nameLower || filename.includes(nameLower);
-              });
-            });
+            const candidateFiles = searchResults.slice(0, 10).map(r => r.path);
+            const selectedFile = await selectBestFileFromList(
+              screenshot,
+              userPrompt,
+              candidateFiles,
+              apiKey
+            );
             
-            if (filenameMatch) {
-              const matchedName = analysis.componentNames.find(name => {
-                const filename = getFilenameWithoutExt(filenameMatch.path);
-                const nameLower = name.toLowerCase();
-                return filename === nameLower || filename.includes(nameLower);
-              });
+            if (selectedFile) {
               recommendedFile = {
-                path: filenameMatch.path,
-                reason: `Filename matches component "${matchedName}" from screenshot`
+                path: selectedFile,
+                reason: `LLM selected from ${candidateFiles.length} candidate files`
               };
             } else {
-              // Fall back to highest score
+              // Fallback to highest score if LLM selection fails
               recommendedFile = {
                 path: searchResults[0].path,
                 reason: `Highest content match score (${searchResults[0].score} points)`
@@ -608,7 +661,7 @@ export async function POST(request: Request) {
       // Total budget: 100k chars (~25k tokens, safe for Claude)
       // Priority: Recommended file (full) > Page file (limited) > Other components (dynamic)
       const TOTAL_CONTEXT_BUDGET = 100000;
-      const MAX_RECOMMENDED_FILE = 50000; // 50k chars max for recommended file
+      const MAX_RECOMMENDED_FILE = 80000; // 80k chars max for recommended file
       const MAX_PAGE_FILE = 2000; // Page file is just a wrapper
       const MAX_GLOBALS_CSS = 1500;
       const MAX_FILES = 25;

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

@@ -166,6 +166,73 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
   }
 }
 
+/**
+ * Phase 3: Ask LLM to select the best file from actual file list
+ * This replaces guessing - the LLM sees the real filenames and picks one
+ */
+async function selectBestFileFromList(
+  screenshot: string,
+  userPrompt: string,
+  candidateFiles: string[],
+  apiKey: string
+): Promise<string | null> {
+  if (candidateFiles.length === 0) return null;
+  
+  const anthropic = new Anthropic({ apiKey });
+  const base64Data = screenshot.split(",")[1] || screenshot;
+
+  try {
+    const response = await anthropic.messages.create({
+      model: "claude-sonnet-4-20250514",
+      max_tokens: 256,
+      messages: [{
+        role: "user",
+        content: [
+          { 
+            type: "image", 
+            source: { type: "base64", media_type: "image/png", data: base64Data } 
+          },
+          { 
+            type: "text", 
+            text: `The user wants to: "${userPrompt}"
+
+Here are the actual component files found in this codebase:
+${candidateFiles.map((f, i) => `${i + 1}. ${f}`).join('\n')}
+
+Looking at the screenshot, which file MOST LIKELY contains the UI elements the user wants to modify?
+
+IMPORTANT: Return ONLY the exact file path from the list above (e.g., "components/ProcessCatalogue/ProcessDetailPanel.tsx").
+Do not add any explanation or other text.` 
+          }
+        ]
+      }]
+    });
+
+    const textBlock = response.content.find(b => b.type === "text");
+    if (!textBlock || textBlock.type !== "text") return null;
+    
+    const selectedPath = textBlock.text.trim().replace(/^["']|["']$/g, ''); // Remove quotes if present
+    
+    // Validate it's in our list (exact match or ends with the path)
+    const matchedFile = candidateFiles.find(f => 
+      f === selectedPath || 
+      f.endsWith(selectedPath) ||
+      selectedPath.endsWith(f)
+    );
+    
+    debugLog("Phase 3: LLM selected file from list", { 
+      selectedPath, 
+      matchedFile, 
+      candidateCount: candidateFiles.length 
+    });
+    
+    return matchedFile || null;
+  } catch (e) {
+    debugLog("Phase 3: Failed to select file from list", { error: String(e) });
+    return null;
+  }
+}
+
 /**
  * Search for component files by name across the project (for smart search)
  * Returns the file path if found, null otherwise
@@ -529,37 +596,23 @@ export async function POST(request: Request) {
           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)
+          // PHASE 3: Ask LLM to pick the best file from actual file list
           if (searchResults.length > 0) {
-            // Helper to extract filename without extension
-            const getFilenameWithoutExt = (filePath: string): string => {
-              const filename = filePath.split('/').pop() || '';
-              return filename.replace(/\.(tsx?|jsx?)$/, '').toLowerCase();
-            };
-            
-            // Find file where FILENAME matches a component name (not just path)
-            const filenameMatch = searchResults.find(r => {
-              const filename = getFilenameWithoutExt(r.path);
-              return analysis.componentNames.some(name => {
-                const nameLower = name.toLowerCase();
-                // Exact match: ProcessDetailPanel === processdetailpanel
-                // Or filename contains the component name
-                return filename === nameLower || filename.includes(nameLower);
-              });
-            });
+            const candidateFiles = searchResults.slice(0, 10).map(r => r.path);
+            const selectedFile = await selectBestFileFromList(
+              screenshot,
+              userPrompt,
+              candidateFiles,
+              apiKey
+            );
             
-            if (filenameMatch) {
-              const matchedName = analysis.componentNames.find(name => {
-                const filename = getFilenameWithoutExt(filenameMatch.path);
-                const nameLower = name.toLowerCase();
-                return filename === nameLower || filename.includes(nameLower);
-              });
+            if (selectedFile) {
               recommendedFile = {
-                path: filenameMatch.path,
-                reason: `Filename matches component "${matchedName}" from screenshot`
+                path: selectedFile,
+                reason: `LLM selected from ${candidateFiles.length} candidate files`
               };
             } else {
-              // Fall back to highest score
+              // Fallback to highest score if LLM selection fails
               recommendedFile = {
                 path: searchResults[0].path,
                 reason: `Highest content match score (${searchResults[0].score} points)`
@@ -618,7 +671,7 @@ export async function POST(request: Request) {
       // Total budget: 100k chars (~25k tokens, safe for Claude)
       // Priority: Recommended file (full) > Page file (limited) > Other components (dynamic)
       const TOTAL_CONTEXT_BUDGET = 100000;
-      const MAX_RECOMMENDED_FILE = 50000; // 50k chars max for recommended file
+      const MAX_RECOMMENDED_FILE = 80000; // 80k chars max for recommended file
       const MAX_PAGE_FILE = 2000; // Page file is just a wrapper
       const MAX_GLOBALS_CSS = 1500;
       const MAX_FILES = 25;

package/package.json

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