sonance-brand-mcp 1.3.62 → 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}`);
+      }
+
+      // 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 component imports
-      if (content.includes(`import`) && content.includes(componentType)) {
-        score += 5;
+      // 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}`);
       }
 
-      // Check for event handlers commonly associated with buttons
+      // 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');
       }
     }
 
@@ -668,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,
@@ -2422,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}`);
+      }
+
+      // 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 component imports
-      if (content.includes(`import`) && content.includes(componentType)) {
-        score += 5;
+      // 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}`);
       }
 
-      // Check for event handlers commonly associated with buttons
+      // 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');
       }
     }
 
@@ -637,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,
@@ -2231,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.62",
+  "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",