sonance-brand-mcp 1.3.61 → 1.3.63

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

@@ -106,7 +106,7 @@ async function analyzeScreenshotForSearch(
 
   const response = await anthropic.messages.create({
     model: "claude-sonnet-4-20250514",
-    max_tokens: 1024,
+    max_tokens: 2048, // Increased for better analysis
     messages: [
       {
         role: "user",
@@ -174,6 +174,8 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
 /**
  * Search candidate files for JSX code matching the focused element
  * This helps identify which file actually contains the element the user clicked on
+ * 
+ * CURSOR-STYLE: Search file CONTENTS for patterns, not just file names
  */
 function findFilesContainingElement(
   focusedElements: VisionFocusedElement[] | undefined,
@@ -188,44 +190,68 @@ function findFilesContainingElement(
   for (const file of candidateFiles) {
     let score = 0;
     const matches: string[] = [];
-    const content = file.content.toLowerCase();
+    const content = file.content;
+    const contentLower = content.toLowerCase();
 
     for (const el of focusedElements) {
       // Extract element type from the name (e.g., "button #123" -> "button")
       const elementType = el.name.split(/[\s#]/)[0].toLowerCase();
       const componentType = el.type.toLowerCase();
+      const capitalizedType = el.type.charAt(0).toUpperCase() + el.type.slice(1);
 
-      // Search for JSX patterns
-      // Check for HTML tags like <button, <div, etc.
-      if (content.includes(`<${elementType}`)) {
-        score += 10;
-        matches.push(`<${elementType}>`);
+      // HIGH VALUE: Component is EXPORTED from this file (this is likely THE file)
+      if (content.includes(`export function ${capitalizedType}`) || 
+          content.includes(`export const ${capitalizedType}`) ||
+          content.includes(`export default function ${capitalizedType}`)) {
+        score += 100;
+        matches.push(`EXPORTS ${capitalizedType}`);
       }
 
-      // Check for React component like <Button, <Card, etc.
-      const capitalizedType = el.type.charAt(0).toUpperCase() + el.type.slice(1);
-      if (file.content.includes(`<${capitalizedType}`)) {
-        score += 15;
-        matches.push(`<${capitalizedType}>`);
+      // HIGH VALUE: Component is DEFINED in this file
+      if (content.includes(`function ${capitalizedType}(`) || 
+          content.includes(`const ${capitalizedType} =`) ||
+          content.includes(`const ${capitalizedType}:`) ||
+          content.includes(`function ${capitalizedType} (`)) {
+        score += 50;
+        matches.push(`defines ${capitalizedType}`);
       }
 
-      // Check for component imports
-      if (content.includes(`import`) && content.includes(componentType)) {
-        score += 5;
+      // MEDIUM VALUE: JSX usage of this element type (rendered in this file)
+      const jsxTagPattern = new RegExp(`<${capitalizedType}[\\s/>]`, 'g');
+      const jsxMatches = content.match(jsxTagPattern);
+      if (jsxMatches) {
+        score += 20 * jsxMatches.length;
+        matches.push(`<${capitalizedType}> x${jsxMatches.length}`);
       }
 
-      // Check for event handlers commonly associated with buttons
+      // MEDIUM VALUE: HTML tag usage
+      const htmlTagPattern = new RegExp(`<${elementType}[\\s>]`, 'gi');
+      const htmlMatches = content.match(htmlTagPattern);
+      if (htmlMatches) {
+        score += 10 * htmlMatches.length;
+        matches.push(`<${elementType}> x${htmlMatches.length}`);
+      }
+
+      // LOW VALUE: Event handlers (onClick, onPress, etc.)
       if (elementType === "button" || componentType === "button") {
-        if (content.includes("onclick") || content.includes("onpress")) {
-          score += 3;
+        const clickHandlers = content.match(/onClick\s*=/gi);
+        if (clickHandlers) {
+          score += 5 * clickHandlers.length;
+          matches.push(`onClick x${clickHandlers.length}`);
         }
       }
 
-      // Check for the component being defined in this file
-      if (file.content.includes(`function ${capitalizedType}`) || 
-          file.content.includes(`const ${capitalizedType}`)) {
-        score += 20;
-        matches.push(`defines ${capitalizedType}`);
+      // BONUS: File name contains the element type
+      const fileName = file.path.toLowerCase();
+      if (fileName.includes(elementType) || fileName.includes(componentType)) {
+        score += 30;
+        matches.push(`filename contains ${elementType}`);
+      }
+
+      // BONUS: File is a Row/Cell component (likely contains action buttons)
+      if (fileName.includes('row') || fileName.includes('cell') || fileName.includes('item')) {
+        score += 15;
+        matches.push('row/cell component');
       }
     }
 
@@ -511,7 +537,7 @@ function searchFilesSmart(
   return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
 }
 
-const VISION_SYSTEM_PROMPT = `You edit code. Make ONLY the change requested.
+const VISION_SYSTEM_PROMPT = `You edit code. Return ONLY valid JSON - no explanation, no preamble, no markdown.
 
 RULES:
 1. Copy code EXACTLY from the file - character for character
@@ -519,13 +545,8 @@ RULES:
 3. For color changes, just change the className
 4. Do not restructure or reorganize code
 
-Return JSON:
-{
-  "modifications": [{
-    "filePath": "path",
-    "patches": [{ "search": "exact code from file", "replace": "changed code" }]
-  }]
-}`;
+RESPOND WITH ONLY THIS JSON FORMAT (nothing else):
+{"modifications":[{"filePath":"path","patches":[{"search":"exact code","replace":"changed code"}]}]}`;
 
 export async function POST(request: Request) {
   // Only allow in development
@@ -673,8 +694,19 @@ export async function POST(request: Request) {
             });
           }
           
-          // PHASE 3: Ask LLM to pick the best file from actual file list
-          if (searchResults.length > 0) {
+          // CURSOR-STYLE: If focused element search has high confidence, use it directly
+          // Skip the LLM guessing phase - we found the file that contains the code
+          const HIGH_CONFIDENCE_THRESHOLD = 50; // Score of 50+ means we found exact matches
+          
+          if (focusedElementHints.length > 0 && focusedElementHints[0].score >= HIGH_CONFIDENCE_THRESHOLD) {
+            // HIGH CONFIDENCE: Use focused element match directly
+            recommendedFile = {
+              path: focusedElementHints[0].path,
+              reason: `Content search found element (score: ${focusedElementHints[0].score}, matches: ${focusedElementHints[0].matches.join(', ')})`
+            };
+            debugLog("HIGH CONFIDENCE: Using focused element match directly", recommendedFile);
+          } else if (searchResults.length > 0) {
+            // LOW CONFIDENCE: Fall back to LLM selection
             const candidateFiles = searchResults.slice(0, 10).map(r => r.path);
             const selectedFile = await selectBestFileFromList(
               screenshot,
@@ -992,12 +1024,42 @@ This is better than generating patches with made-up code.`,
 
         jsonText = jsonText.trim();
         
-        // Robust JSON extraction: find the first { and last } to extract JSON object
-        // This handles cases where the LLM includes preamble text before the JSON
+        // Robust JSON extraction: look for {"modifications" pattern specifically
+        // This handles cases where the LLM includes preamble text with code blocks
+        const jsonStartPatterns = ['{"modifications"', '{ "modifications"', '{\n  "modifications"'];
+        let jsonStart = -1;
+        
+        for (const pattern of jsonStartPatterns) {
+          const idx = jsonText.indexOf(pattern);
+          if (idx !== -1 && (jsonStart === -1 || idx < jsonStart)) {
+            jsonStart = idx;
+          }
+        }
+        
+        if (jsonStart !== -1) {
+          // Find the matching closing brace by counting braces
+          let braceCount = 0;
+          let jsonEnd = -1;
+          for (let i = jsonStart; i < jsonText.length; i++) {
+            if (jsonText[i] === '{') braceCount++;
+            if (jsonText[i] === '}') {
+              braceCount--;
+              if (braceCount === 0) {
+                jsonEnd = i;
+                break;
+              }
+            }
+          }
+          if (jsonEnd !== -1) {
+            jsonText = jsonText.substring(jsonStart, jsonEnd + 1);
+          }
+        } else {
+          // Fallback: try first { to last }
         const firstBrace = jsonText.indexOf('{');
         const lastBrace = jsonText.lastIndexOf('}');
         if (firstBrace !== -1 && lastBrace > firstBrace) {
           jsonText = jsonText.substring(firstBrace, lastBrace + 1);
+          }
         }
         
         aiResponse = JSON.parse(jsonText);
@@ -2397,3 +2459,4 @@ function applyPatches(originalContent: string, patches: Patch[]): ApplyPatchesRe
     failedPatches,
   };
 }
+

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

@@ -102,7 +102,7 @@ async function analyzeScreenshotForSearch(
 
   const response = await anthropic.messages.create({
     model: "claude-sonnet-4-20250514",
-    max_tokens: 1024,
+    max_tokens: 2048, // Increased for better analysis
     messages: [
       {
         role: "user",
@@ -170,6 +170,8 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
 /**
  * Search candidate files for JSX code matching the focused element
  * This helps identify which file actually contains the element the user clicked on
+ * 
+ * CURSOR-STYLE: Search file CONTENTS for patterns, not just file names
  */
 function findFilesContainingElement(
   focusedElements: VisionFocusedElement[] | undefined,
@@ -184,44 +186,68 @@ function findFilesContainingElement(
   for (const file of candidateFiles) {
     let score = 0;
     const matches: string[] = [];
-    const content = file.content.toLowerCase();
+    const content = file.content;
+    const contentLower = content.toLowerCase();
 
     for (const el of focusedElements) {
       // Extract element type from the name (e.g., "button #123" -> "button")
       const elementType = el.name.split(/[\s#]/)[0].toLowerCase();
       const componentType = el.type.toLowerCase();
+      const capitalizedType = el.type.charAt(0).toUpperCase() + el.type.slice(1);
 
-      // Search for JSX patterns
-      // Check for HTML tags like <button, <div, etc.
-      if (content.includes(`<${elementType}`)) {
-        score += 10;
-        matches.push(`<${elementType}>`);
+      // HIGH VALUE: Component is EXPORTED from this file (this is likely THE file)
+      if (content.includes(`export function ${capitalizedType}`) || 
+          content.includes(`export const ${capitalizedType}`) ||
+          content.includes(`export default function ${capitalizedType}`)) {
+        score += 100;
+        matches.push(`EXPORTS ${capitalizedType}`);
       }
 
-      // Check for React component like <Button, <Card, etc.
-      const capitalizedType = el.type.charAt(0).toUpperCase() + el.type.slice(1);
-      if (file.content.includes(`<${capitalizedType}`)) {
-        score += 15;
-        matches.push(`<${capitalizedType}>`);
+      // HIGH VALUE: Component is DEFINED in this file
+      if (content.includes(`function ${capitalizedType}(`) || 
+          content.includes(`const ${capitalizedType} =`) ||
+          content.includes(`const ${capitalizedType}:`) ||
+          content.includes(`function ${capitalizedType} (`)) {
+        score += 50;
+        matches.push(`defines ${capitalizedType}`);
       }
 
-      // Check for component imports
-      if (content.includes(`import`) && content.includes(componentType)) {
-        score += 5;
+      // MEDIUM VALUE: JSX usage of this element type (rendered in this file)
+      const jsxTagPattern = new RegExp(`<${capitalizedType}[\\s/>]`, 'g');
+      const jsxMatches = content.match(jsxTagPattern);
+      if (jsxMatches) {
+        score += 20 * jsxMatches.length;
+        matches.push(`<${capitalizedType}> x${jsxMatches.length}`);
       }
 
-      // Check for event handlers commonly associated with buttons
+      // MEDIUM VALUE: HTML tag usage
+      const htmlTagPattern = new RegExp(`<${elementType}[\\s>]`, 'gi');
+      const htmlMatches = content.match(htmlTagPattern);
+      if (htmlMatches) {
+        score += 10 * htmlMatches.length;
+        matches.push(`<${elementType}> x${htmlMatches.length}`);
+      }
+
+      // LOW VALUE: Event handlers (onClick, onPress, etc.)
       if (elementType === "button" || componentType === "button") {
-        if (content.includes("onclick") || content.includes("onpress")) {
-          score += 3;
+        const clickHandlers = content.match(/onClick\s*=/gi);
+        if (clickHandlers) {
+          score += 5 * clickHandlers.length;
+          matches.push(`onClick x${clickHandlers.length}`);
         }
       }
 
-      // Check for the component being defined in this file
-      if (file.content.includes(`function ${capitalizedType}`) || 
-          file.content.includes(`const ${capitalizedType}`)) {
-        score += 20;
-        matches.push(`defines ${capitalizedType}`);
+      // BONUS: File name contains the element type
+      const fileName = file.path.toLowerCase();
+      if (fileName.includes(elementType) || fileName.includes(componentType)) {
+        score += 30;
+        matches.push(`filename contains ${elementType}`);
+      }
+
+      // BONUS: File is a Row/Cell component (likely contains action buttons)
+      if (fileName.includes('row') || fileName.includes('cell') || fileName.includes('item')) {
+        score += 15;
+        matches.push('row/cell component');
       }
     }
 
@@ -507,7 +533,7 @@ function searchFilesSmart(
   return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
 }
 
-const VISION_SYSTEM_PROMPT = `You edit code. Make ONLY the change requested.
+const VISION_SYSTEM_PROMPT = `You edit code. Return ONLY valid JSON - no explanation, no preamble, no markdown.
 
 RULES:
 1. Copy code EXACTLY from the file - character for character
@@ -515,13 +541,8 @@ RULES:
 3. For color changes, just change the className
 4. Do not restructure or reorganize code
 
-Return JSON:
-{
-  "modifications": [{
-    "filePath": "path",
-    "patches": [{ "search": "exact code from file", "replace": "changed code" }]
-  }]
-}`;
+RESPOND WITH ONLY THIS JSON FORMAT (nothing else):
+{"modifications":[{"filePath":"path","patches":[{"search":"exact code","replace":"changed code"}]}]}`;
 
 export async function POST(request: Request) {
   // Only allow in development
@@ -642,8 +663,19 @@ export async function POST(request: Request) {
             });
           }
           
-          // PHASE 3: Ask LLM to pick the best file from actual file list
-          if (searchResults.length > 0) {
+          // CURSOR-STYLE: If focused element search has high confidence, use it directly
+          // Skip the LLM guessing phase - we found the file that contains the code
+          const HIGH_CONFIDENCE_THRESHOLD = 50; // Score of 50+ means we found exact matches
+          
+          if (focusedElementHints.length > 0 && focusedElementHints[0].score >= HIGH_CONFIDENCE_THRESHOLD) {
+            // HIGH CONFIDENCE: Use focused element match directly
+            recommendedFile = {
+              path: focusedElementHints[0].path,
+              reason: `Content search found element (score: ${focusedElementHints[0].score}, matches: ${focusedElementHints[0].matches.join(', ')})`
+            };
+            debugLog("HIGH CONFIDENCE: Using focused element match directly", recommendedFile);
+          } else if (searchResults.length > 0) {
+            // LOW CONFIDENCE: Fall back to LLM selection
             const candidateFiles = searchResults.slice(0, 10).map(r => r.path);
             const selectedFile = await selectBestFileFromList(
               screenshot,
@@ -958,12 +990,42 @@ This is better than generating patches with made-up code.`,
         // Clean up any remaining whitespace
         jsonText = jsonText.trim();
         
-        // Robust JSON extraction: find the first { and last } to extract JSON object
-        // This handles cases where the LLM includes preamble text before the JSON
+        // Robust JSON extraction: look for {"modifications" pattern specifically
+        // This handles cases where the LLM includes preamble text with code blocks
+        const jsonStartPatterns = ['{"modifications"', '{ "modifications"', '{\n  "modifications"'];
+        let jsonStart = -1;
+        
+        for (const pattern of jsonStartPatterns) {
+          const idx = jsonText.indexOf(pattern);
+          if (idx !== -1 && (jsonStart === -1 || idx < jsonStart)) {
+            jsonStart = idx;
+          }
+        }
+        
+        if (jsonStart !== -1) {
+          // Find the matching closing brace by counting braces
+          let braceCount = 0;
+          let jsonEnd = -1;
+          for (let i = jsonStart; i < jsonText.length; i++) {
+            if (jsonText[i] === '{') braceCount++;
+            if (jsonText[i] === '}') {
+              braceCount--;
+              if (braceCount === 0) {
+                jsonEnd = i;
+                break;
+              }
+            }
+          }
+          if (jsonEnd !== -1) {
+            jsonText = jsonText.substring(jsonStart, jsonEnd + 1);
+          }
+        } else {
+          // Fallback: try first { to last }
         const firstBrace = jsonText.indexOf('{');
         const lastBrace = jsonText.lastIndexOf('}');
         if (firstBrace !== -1 && lastBrace > firstBrace) {
           jsonText = jsonText.substring(firstBrace, lastBrace + 1);
+          }
         }
         
         aiResponse = JSON.parse(jsonText);
@@ -2206,3 +2268,4 @@ function applyPatches(originalContent: string, patches: Patch[]): ApplyPatchesRe
     failedPatches,
   };
 }
+

package/package.json

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