sonance-brand-mcp 1.3.62 → 1.3.64

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

@@ -29,6 +29,10 @@ interface VisionFocusedElement {
     height: number;
   };
   description?: string;
+  /** The actual text content of the element (e.g., "REFRESH", "ADD PROCESS") */
+  textContent?: string;
+  /** The className string of the element for pattern matching */
+  className?: string;
 }
 
 interface VisionFileModification {
@@ -106,7 +110,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,10 +178,16 @@ 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
+ * 
+ * @param phase2aMatches - File paths that Phase 2a identified by component name matching visible text
+ *                         These get a MASSIVE bonus because they're contextually relevant
  */
 function findFilesContainingElement(
   focusedElements: VisionFocusedElement[] | undefined,
-  candidateFiles: { path: string; content: string }[]
+  candidateFiles: { path: string; content: string }[],
+  phase2aMatches: string[] = [] // Files that Phase 2a identified by component name
 ): { path: string; score: number; matches: string[] }[] {
   if (!focusedElements || focusedElements.length === 0) {
     return [];
@@ -188,44 +198,88 @@ function findFilesContainingElement(
   for (const file of candidateFiles) {
     let score = 0;
     const matches: string[] = [];
-    const content = file.content.toLowerCase();
+    const content = file.content;
+
+    // HIGHEST VALUE: Phase 2a identified this file by matching component name to visible text
+    // This means the LLM saw "ProcessRow" in the screenshot and this file is ProcessRow.tsx
+    if (phase2aMatches.includes(file.path)) {
+      score += 200;
+      matches.push('Phase2a component match');
+    }
 
     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;
+      // NOTE: We intentionally DO NOT count buttons, onClick handlers, or JSX tags
+      // because files with MORE of these are often "kitchen sink" components,
+      // not the focused component the user is looking at.
+      // Instead, we rely on Phase 2a matches and textContent matching.
+
+      // VERY HIGH VALUE: Exact text content match (e.g., button says "REFRESH")
+      // This is THE file if it contains the exact text the user clicked on
+      if (el.textContent && el.textContent.length >= 2) {
+        // Search for the text in JSX patterns like >REFRESH< or {`REFRESH`} or {"REFRESH"}
+        const textPatterns = [
+          `>${el.textContent}<`,           // JSX text content
+          `"${el.textContent}"`,           // String literal
+          `'${el.textContent}'`,           // Single-quoted string
+          `\`${el.textContent}\``,         // Template literal
+        ];
+        
+        for (const pattern of textPatterns) {
+          if (content.includes(pattern)) {
+            score += 150; // Very high - exact match!
+            matches.push(`contains "${el.textContent.substring(0, 20)}"`);
+            break; // Only add once per element
+          }
+        }
       }
 
-      // Check for event handlers commonly associated with buttons
-      if (elementType === "button" || componentType === "button") {
-        if (content.includes("onclick") || content.includes("onpress")) {
-          score += 3;
+      // MEDIUM VALUE: className pattern match
+      // If the file contains the same className string, it likely defines this element
+      if (el.className && el.className.length >= 10) {
+        // Extract the first few unique class names (not all to avoid noise)
+        const classNames = el.className.split(/\s+/).filter(c => c.length > 3).slice(0, 5);
+        for (const cls of classNames) {
+          if (content.includes(cls)) {
+            score += 25;
+            matches.push(`has class "${cls.substring(0, 20)}"`);
+            break; // Only add once per element
+          }
         }
       }
 
-      // 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');
       }
     }
 
@@ -386,7 +440,7 @@ function searchFilesSmart(
   analysis: ScreenshotAnalysis,
   projectRoot: string,
   maxFiles: number = 10
-): { path: string; content: string; score: number }[] {
+): { path: string; content: string; score: number; filenameMatch: boolean }[] {
   const { visibleText, componentNames, codePatterns } = analysis;
   
   // Combine all search terms
@@ -508,7 +562,7 @@ function searchFilesSmart(
     }))
   });
 
-  return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
+  return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score, filenameMatch: r.filenameMatch }));
 }
 
 const VISION_SYSTEM_PROMPT = `You edit code. Return ONLY valid JSON - no explanation, no preamble, no markdown.
@@ -652,10 +706,19 @@ export async function POST(request: Request) {
           const searchResults = searchFilesSmart(analysis, projectRoot, 10);
           smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
           
+          // Extract Phase 2a matches - files identified by component name matching visible text
+          // These are contextually relevant (e.g., "ProcessRow" seen in screenshot -> ProcessRow.tsx)
+          const phase2aMatches = searchResults
+            .filter(r => r.filenameMatch)
+            .map(r => r.path);
+          
+          debugLog("Phase 2a component-name matches", { phase2aMatches });
+          
           // PHASE 2.5: Find which files contain the focused element
           const focusedElementHints = findFilesContainingElement(
             focusedElements,
-            searchResults.map(r => ({ path: r.path, content: r.content }))
+            searchResults.map(r => ({ path: r.path, content: r.content })),
+            phase2aMatches // Pass Phase 2a matches for massive bonus
           );
           
           if (focusedElementHints.length > 0) {
@@ -668,8 +731,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 +2496,4 @@ function applyPatches(originalContent: string, patches: Patch[]): ApplyPatchesRe
     failedPatches,
   };
 }
+

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

@@ -28,6 +28,10 @@ interface VisionFocusedElement {
     height: number;
   };
   description?: string;
+  /** The actual text content of the element (e.g., "REFRESH", "ADD PROCESS") */
+  textContent?: string;
+  /** The className string of the element for pattern matching */
+  className?: string;
 }
 
 interface VisionFileModification {
@@ -102,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",
@@ -170,10 +174,16 @@ 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
+ * 
+ * @param phase2aMatches - File paths that Phase 2a identified by component name matching visible text
+ *                         These get a MASSIVE bonus because they're contextually relevant
  */
 function findFilesContainingElement(
   focusedElements: VisionFocusedElement[] | undefined,
-  candidateFiles: { path: string; content: string }[]
+  candidateFiles: { path: string; content: string }[],
+  phase2aMatches: string[] = [] // Files that Phase 2a identified by component name
 ): { path: string; score: number; matches: string[] }[] {
   if (!focusedElements || focusedElements.length === 0) {
     return [];
@@ -184,44 +194,88 @@ function findFilesContainingElement(
   for (const file of candidateFiles) {
     let score = 0;
     const matches: string[] = [];
-    const content = file.content.toLowerCase();
+    const content = file.content;
+
+    // HIGHEST VALUE: Phase 2a identified this file by matching component name to visible text
+    // This means the LLM saw "ProcessRow" in the screenshot and this file is ProcessRow.tsx
+    if (phase2aMatches.includes(file.path)) {
+      score += 200;
+      matches.push('Phase2a component match');
+    }
 
     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;
+      // NOTE: We intentionally DO NOT count buttons, onClick handlers, or JSX tags
+      // because files with MORE of these are often "kitchen sink" components,
+      // not the focused component the user is looking at.
+      // Instead, we rely on Phase 2a matches and textContent matching.
+
+      // VERY HIGH VALUE: Exact text content match (e.g., button says "REFRESH")
+      // This is THE file if it contains the exact text the user clicked on
+      if (el.textContent && el.textContent.length >= 2) {
+        // Search for the text in JSX patterns like >REFRESH< or {`REFRESH`} or {"REFRESH"}
+        const textPatterns = [
+          `>${el.textContent}<`,           // JSX text content
+          `"${el.textContent}"`,           // String literal
+          `'${el.textContent}'`,           // Single-quoted string
+          `\`${el.textContent}\``,         // Template literal
+        ];
+        
+        for (const pattern of textPatterns) {
+          if (content.includes(pattern)) {
+            score += 150; // Very high - exact match!
+            matches.push(`contains "${el.textContent.substring(0, 20)}"`);
+            break; // Only add once per element
+          }
+        }
       }
 
-      // Check for event handlers commonly associated with buttons
-      if (elementType === "button" || componentType === "button") {
-        if (content.includes("onclick") || content.includes("onpress")) {
-          score += 3;
+      // MEDIUM VALUE: className pattern match
+      // If the file contains the same className string, it likely defines this element
+      if (el.className && el.className.length >= 10) {
+        // Extract the first few unique class names (not all to avoid noise)
+        const classNames = el.className.split(/\s+/).filter(c => c.length > 3).slice(0, 5);
+        for (const cls of classNames) {
+          if (content.includes(cls)) {
+            score += 25;
+            matches.push(`has class "${cls.substring(0, 20)}"`);
+            break; // Only add once per element
+          }
         }
       }
 
-      // 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');
       }
     }
 
@@ -382,7 +436,7 @@ function searchFilesSmart(
   analysis: ScreenshotAnalysis,
   projectRoot: string,
   maxFiles: number = 10
-): { path: string; content: string; score: number }[] {
+): { path: string; content: string; score: number; filenameMatch: boolean }[] {
   const { visibleText, componentNames, codePatterns } = analysis;
   
   // Combine all search terms
@@ -504,7 +558,7 @@ function searchFilesSmart(
     }))
   });
 
-  return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
+  return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score, filenameMatch: r.filenameMatch }));
 }
 
 const VISION_SYSTEM_PROMPT = `You edit code. Return ONLY valid JSON - no explanation, no preamble, no markdown.
@@ -621,10 +675,19 @@ export async function POST(request: Request) {
           const searchResults = searchFilesSmart(analysis, projectRoot, 10);
           smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
           
+          // Extract Phase 2a matches - files identified by component name matching visible text
+          // These are contextually relevant (e.g., "ProcessRow" seen in screenshot -> ProcessRow.tsx)
+          const phase2aMatches = searchResults
+            .filter(r => r.filenameMatch)
+            .map(r => r.path);
+          
+          debugLog("Phase 2a component-name matches", { phase2aMatches });
+          
           // PHASE 2.5: Find which files contain the focused element
           const focusedElementHints = findFilesContainingElement(
             focusedElements,
-            searchResults.map(r => ({ path: r.path, content: r.content }))
+            searchResults.map(r => ({ path: r.path, content: r.content })),
+            phase2aMatches // Pass Phase 2a matches for massive bonus
           );
           
           if (focusedElementHints.length > 0) {
@@ -637,8 +700,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 +2305,4 @@ function applyPatches(originalContent: string, patches: Patch[]): ApplyPatchesRe
     failedPatches,
   };
 }
+

package/dist/assets/dev-tools/SonanceDevTools.tsx

@@ -787,7 +787,11 @@ export function SonanceDevTools() {
                 el.setAttribute("data-sonance-variant", variantId);
               }
 
-              newTagged.push({ name, rect, type: "component", variantId });
+              // Capture textContent and className for dynamic element matching
+              const textContent = (el.textContent?.trim() || "").substring(0, 100); // Cap at 100 chars
+              const className = el.className?.toString() || "";
+              
+              newTagged.push({ name, rect, type: "component", variantId, textContent, className });
             }
           }
         });
@@ -826,7 +830,11 @@ export function SonanceDevTools() {
                 el.setAttribute("data-sonance-name", genericName);
               }
 
-              newTagged.push({ name: genericName, rect, type: "component", variantId });
+              // Capture textContent and className for dynamic element matching
+              const textContent = (el.textContent?.trim() || "").substring(0, 100); // Cap at 100 chars
+              const elClassName = el.className?.toString() || "";
+
+              newTagged.push({ name: genericName, rect, type: "component", variantId, textContent, className: elClassName });
             }
           });
         });
@@ -1017,6 +1025,9 @@ export function SonanceDevTools() {
         width: element.rect.width,
         height: element.rect.height,
       },
+      // NEW: Capture text and className for dynamic file matching
+      textContent: element.textContent,
+      className: element.className,
     };
 
     setVisionFocusedElements((prev) => {

package/dist/assets/dev-tools/types.ts

@@ -22,8 +22,10 @@ export interface DetectedElement {
   logoId?: string;
   /** Unique ID for text elements (for selection/editing) */
   textId?: string;
-  /** The actual text content (for text elements) */
+  /** The actual text content (for all elements - button text, link text, etc.) */
   textContent?: string;
+  /** The className string for pattern matching in code */
+  className?: string;
   /** Component variant ID (hash of styles/classes) to distinguish visual styles */
   variantId?: string;
 }
@@ -220,6 +222,10 @@ export interface VisionFocusedElement {
     height: number;
   };
   description?: string;
+  /** The actual text content of the element (e.g., "REFRESH", "ADD PROCESS") */
+  textContent?: string;
+  /** The className string of the element for pattern matching */
+  className?: string;
 }
 
 export interface VisionEditRequest {

package/package.json

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