sonance-brand-mcp 1.3.74 → 1.3.75

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

@@ -177,6 +177,48 @@ interface ScreenshotAnalysis {
   visibleText: string[];
   componentNames: string[];
   codePatterns: string[];
+  elementTypes: string[]; // Detected UI element types: table, button, form, card, list, modal, dropdown, input
+}
+
+/**
+ * Map element types to JSX/HTML patterns to search for in files
+ * This is the key to Cursor-style file discovery - search for WHAT we see, not guessed names
+ */
+const ELEMENT_PATTERNS: Record<string, string[]> = {
+  table: ['<Table', 'TableRow', 'TableCell', 'TableHeader', 'TableBody', '<table', '<tr', '<td', '<th'],
+  button: ['<Button', '<button', 'onClick={', 'handleClick'],
+  form: ['<Form', '<form', 'onSubmit', '<Input', '<input', 'handleSubmit'],
+  card: ['<Card', 'CardContent', 'CardHeader', 'CardTitle', 'CardDescription'],
+  list: ['<List', '<ul', '<li', 'ListItem', '.map(('],
+  modal: ['<Modal', '<Dialog', 'DialogContent', 'isOpen', 'onClose', 'onOpenChange'],
+  dropdown: ['<Dropdown', '<Select', 'DropdownMenu', 'SelectContent', 'SelectTrigger'],
+  input: ['<Input', '<input', '<Textarea', '<textarea', 'onChange={'],
+  header: ['<Header', '<header', '<Navbar', '<Nav', 'navigation'],
+  sidebar: ['<Sidebar', '<aside', 'SidebarContent', 'NavigationMenu'],
+};
+
+/**
+ * Score a file based on whether it contains patterns for a specific element type
+ * Higher scores indicate the file is more likely to contain the target element
+ */
+function scoreFileByElementType(content: string, elementType: string): number {
+  const patterns = ELEMENT_PATTERNS[elementType.toLowerCase()] || [];
+  let score = 0;
+  let matchCount = 0;
+  
+  for (const pattern of patterns) {
+    if (content.includes(pattern)) {
+      score += 300; // High score per pattern match
+      matchCount++;
+    }
+  }
+  
+  // Bonus for multiple pattern matches (indicates primary component for this element type)
+  if (matchCount >= 3) {
+    score += 500;
+  }
+  
+  return score;
 }
 
 /**
@@ -216,15 +258,17 @@ Analyze this UI to help find the correct source file. Return:
 1. **visibleText**: Extract the EXACT text visible in UI elements (button labels, headings, tab names, etc.)
 2. **componentNames**: Deduce likely React component names based on what you see (e.g., "ProcessDetailPanel", "UserSettings", "DataTable"). Think about common React naming conventions.
 3. **codePatterns**: Suggest code identifiers that might exist (e.g., "handleEdit", "isLoading", "activeTab", "onDelete")
+4. **elementTypes**: What TYPE of UI element is the user's request about? Pick from: table, button, form, card, list, modal, dropdown, input, header, sidebar. List the most relevant first.
 
 Return ONLY valid JSON:
 {
   "visibleText": ["Assets", "Flowchart", "Edit", "Delete"],
   "componentNames": ["ProcessDetailPanel", "ProcessActions", "QuickActions"],
-  "codePatterns": ["handleEdit", "handleDelete", "activeTab", "setActiveTab"]
+  "codePatterns": ["handleEdit", "handleDelete", "activeTab", "setActiveTab"],
+  "elementTypes": ["table", "button"]
 }
 
-Be smart - use your knowledge of React patterns to make educated guesses about component and variable names.`,
+Be smart - use your knowledge of React patterns to identify what type of element the user wants to modify.`,
           },
         ],
       },
@@ -234,7 +278,7 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
   try {
     const textBlock = response.content.find((block) => block.type === "text");
     if (!textBlock || textBlock.type !== "text") {
-      return { visibleText: [], componentNames: [], codePatterns: [] };
+      return { visibleText: [], componentNames: [], codePatterns: [], elementTypes: [] };
     }
 
     let jsonText = textBlock.text.trim();
@@ -249,13 +293,14 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
       visibleText: parsed.visibleText || parsed.textStrings || [],
       componentNames: parsed.componentNames || [],
       codePatterns: parsed.codePatterns || [],
+      elementTypes: parsed.elementTypes || [],
     };
 
     debugLog("Phase 1: Analyzed screenshot for search", result);
     return result;
   } catch (e) {
     debugLog("Phase 1: Failed to parse screenshot analysis response", { error: String(e) });
-    return { visibleText: [], componentNames: [], codePatterns: [] };
+    return { visibleText: [], componentNames: [], codePatterns: [], elementTypes: [] };
   }
 }
 
@@ -547,12 +592,18 @@ function searchFilesSmart(
   projectRoot: string,
   maxFiles: number = 10
 ): { path: string; content: string; score: number; filenameMatch: boolean }[] {
-  const { visibleText, componentNames, codePatterns } = analysis;
+  const { visibleText, componentNames, codePatterns, elementTypes } = analysis;
   
   // Combine all search terms
   const allSearchTerms = [...visibleText, ...codePatterns];
   
-  if (allSearchTerms.length === 0 && componentNames.length === 0) return [];
+  // Get the primary element type for pattern-based scoring (Cursor-style)
+  const primaryElementType = elementTypes?.[0] || null;
+  if (primaryElementType) {
+    debugLog("Phase 2: Element type detected for pattern matching", { primaryElementType });
+  }
+  
+  if (allSearchTerms.length === 0 && componentNames.length === 0 && !primaryElementType) return [];
 
   const results: Map<string, { path: string; content: string; score: number; filenameMatch: boolean }> = new Map();
   const searchDirs = ["components", "src/components", "app", "src/app", "pages", "src/pages"];
@@ -619,23 +670,47 @@ function searchFilesSmart(
               }
             }
 
+            // Calculate content score based on text matches
+            let contentScore = 0;
             if (uniqueMatches > 0) {
               // Score: unique matches * 10 + total matches
-              const contentScore = (uniqueMatches * 10) + totalMatches;
-              
+              contentScore = (uniqueMatches * 10) + totalMatches;
+            }
+            
+            // CURSOR-STYLE: Add element type pattern scoring
+            // Files containing patterns for the detected element type get a big boost
+            let elementTypeScore = 0;
+            if (primaryElementType) {
+              elementTypeScore = scoreFileByElementType(content, primaryElementType);
+            }
+            
+            const totalScore = contentScore + elementTypeScore;
+            
+            if (totalScore > 0) {
               // Check if we already have this file (from component name search)
               const existing = results.get(entryPath);
               if (existing) {
-                // Add content score to existing filename match score
-                existing.score += contentScore;
+                // Add scores to existing entry
+                existing.score += totalScore;
               } else {
                 results.set(entryPath, { 
                   path: entryPath, 
                   content, 
-                  score: contentScore,
+                  score: totalScore,
                   filenameMatch: false 
                 });
               }
+              
+              // Log high-confidence element type matches
+              if (elementTypeScore >= 800) {
+                debugLog("Phase 2: High-confidence element type match", {
+                  file: entryPath,
+                  elementType: primaryElementType,
+                  elementScore: elementTypeScore,
+                  contentScore,
+                  totalScore
+                });
+              }
             }
           } catch {
             // Skip files that can't be read
@@ -958,7 +1033,7 @@ User Request: "${userPrompt}"
         
         // Search for element IDs in the file to enable precise targeting
         let idMatch: { lineNumber: number; matchedId: string; snippet: string } | null = null;
-        if (focusedElements && focusedElements.length > 0) {
+      if (focusedElements && focusedElements.length > 0) {
           for (const el of focusedElements) {
             idMatch = findElementIdInFile(content, el.elementId, el.childIds);
             if (idMatch) break;
@@ -1049,7 +1124,7 @@ ${linesWithNumbers}
           // Only include the variants/props section, not the whole file
           const variantsMatch = comp.content.match(/variants:\s*\{[\s\S]*?\n\s*\},\n\s*defaultVariants/);
           if (variantsMatch) {
-            textContent += `
+          textContent += `
 --- UI Component: ${comp.path} (variants only) ---
 ${variantsMatch[0]}
 ---
@@ -1123,7 +1198,7 @@ CRITICAL: Your "search" string MUST exist in the file. If you can't find the exa
 
       // Call Claude Vision API with retry mechanism
       const anthropic = new Anthropic({ apiKey });
-      
+
       // Build set of valid file paths from page context (needed for validation)
       const validFilePaths = new Set<string>();
       if (pageContext.pageFile) {

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

@@ -173,6 +173,48 @@ interface ScreenshotAnalysis {
   visibleText: string[];
   componentNames: string[];
   codePatterns: string[];
+  elementTypes: string[]; // Detected UI element types: table, button, form, card, list, modal, dropdown, input
+}
+
+/**
+ * Map element types to JSX/HTML patterns to search for in files
+ * This is the key to Cursor-style file discovery - search for WHAT we see, not guessed names
+ */
+const ELEMENT_PATTERNS: Record<string, string[]> = {
+  table: ['<Table', 'TableRow', 'TableCell', 'TableHeader', 'TableBody', '<table', '<tr', '<td', '<th'],
+  button: ['<Button', '<button', 'onClick={', 'handleClick'],
+  form: ['<Form', '<form', 'onSubmit', '<Input', '<input', 'handleSubmit'],
+  card: ['<Card', 'CardContent', 'CardHeader', 'CardTitle', 'CardDescription'],
+  list: ['<List', '<ul', '<li', 'ListItem', '.map(('],
+  modal: ['<Modal', '<Dialog', 'DialogContent', 'isOpen', 'onClose', 'onOpenChange'],
+  dropdown: ['<Dropdown', '<Select', 'DropdownMenu', 'SelectContent', 'SelectTrigger'],
+  input: ['<Input', '<input', '<Textarea', '<textarea', 'onChange={'],
+  header: ['<Header', '<header', '<Navbar', '<Nav', 'navigation'],
+  sidebar: ['<Sidebar', '<aside', 'SidebarContent', 'NavigationMenu'],
+};
+
+/**
+ * Score a file based on whether it contains patterns for a specific element type
+ * Higher scores indicate the file is more likely to contain the target element
+ */
+function scoreFileByElementType(content: string, elementType: string): number {
+  const patterns = ELEMENT_PATTERNS[elementType.toLowerCase()] || [];
+  let score = 0;
+  let matchCount = 0;
+  
+  for (const pattern of patterns) {
+    if (content.includes(pattern)) {
+      score += 300; // High score per pattern match
+      matchCount++;
+    }
+  }
+  
+  // Bonus for multiple pattern matches (indicates primary component for this element type)
+  if (matchCount >= 3) {
+    score += 500;
+  }
+  
+  return score;
 }
 
 /**
@@ -212,15 +254,17 @@ Analyze this UI to help find the correct source file. Return:
 1. **visibleText**: Extract the EXACT text visible in UI elements (button labels, headings, tab names, etc.)
 2. **componentNames**: Deduce likely React component names based on what you see (e.g., "ProcessDetailPanel", "UserSettings", "DataTable"). Think about common React naming conventions.
 3. **codePatterns**: Suggest code identifiers that might exist (e.g., "handleEdit", "isLoading", "activeTab", "onDelete")
+4. **elementTypes**: What TYPE of UI element is the user's request about? Pick from: table, button, form, card, list, modal, dropdown, input, header, sidebar. List the most relevant first.
 
 Return ONLY valid JSON:
 {
   "visibleText": ["Assets", "Flowchart", "Edit", "Delete"],
   "componentNames": ["ProcessDetailPanel", "ProcessActions", "QuickActions"],
-  "codePatterns": ["handleEdit", "handleDelete", "activeTab", "setActiveTab"]
+  "codePatterns": ["handleEdit", "handleDelete", "activeTab", "setActiveTab"],
+  "elementTypes": ["table", "button"]
 }
 
-Be smart - use your knowledge of React patterns to make educated guesses about component and variable names.`,
+Be smart - use your knowledge of React patterns to identify what type of element the user wants to modify.`,
           },
         ],
       },
@@ -230,7 +274,7 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
   try {
     const textBlock = response.content.find((block) => block.type === "text");
     if (!textBlock || textBlock.type !== "text") {
-      return { visibleText: [], componentNames: [], codePatterns: [] };
+      return { visibleText: [], componentNames: [], codePatterns: [], elementTypes: [] };
     }
 
     let jsonText = textBlock.text.trim();
@@ -245,13 +289,14 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
       visibleText: parsed.visibleText || parsed.textStrings || [],
       componentNames: parsed.componentNames || [],
       codePatterns: parsed.codePatterns || [],
+      elementTypes: parsed.elementTypes || [],
     };
 
     debugLog("Phase 1: Analyzed screenshot for search", result);
     return result;
   } catch (e) {
     debugLog("Phase 1: Failed to parse screenshot analysis response", { error: String(e) });
-    return { visibleText: [], componentNames: [], codePatterns: [] };
+    return { visibleText: [], componentNames: [], codePatterns: [], elementTypes: [] };
   }
 }
 
@@ -543,12 +588,18 @@ function searchFilesSmart(
   projectRoot: string,
   maxFiles: number = 10
 ): { path: string; content: string; score: number; filenameMatch: boolean }[] {
-  const { visibleText, componentNames, codePatterns } = analysis;
+  const { visibleText, componentNames, codePatterns, elementTypes } = analysis;
   
   // Combine all search terms
   const allSearchTerms = [...visibleText, ...codePatterns];
   
-  if (allSearchTerms.length === 0 && componentNames.length === 0) return [];
+  // Get the primary element type for pattern-based scoring (Cursor-style)
+  const primaryElementType = elementTypes?.[0] || null;
+  if (primaryElementType) {
+    debugLog("Phase 2: Element type detected for pattern matching", { primaryElementType });
+  }
+  
+  if (allSearchTerms.length === 0 && componentNames.length === 0 && !primaryElementType) return [];
 
   const results: Map<string, { path: string; content: string; score: number; filenameMatch: boolean }> = new Map();
   const searchDirs = ["components", "src/components", "app", "src/app", "pages", "src/pages"];
@@ -615,23 +666,47 @@ function searchFilesSmart(
               }
             }
 
+            // Calculate content score based on text matches
+            let contentScore = 0;
             if (uniqueMatches > 0) {
               // Score: unique matches * 10 + total matches
-              const contentScore = (uniqueMatches * 10) + totalMatches;
-              
+              contentScore = (uniqueMatches * 10) + totalMatches;
+            }
+            
+            // CURSOR-STYLE: Add element type pattern scoring
+            // Files containing patterns for the detected element type get a big boost
+            let elementTypeScore = 0;
+            if (primaryElementType) {
+              elementTypeScore = scoreFileByElementType(content, primaryElementType);
+            }
+            
+            const totalScore = contentScore + elementTypeScore;
+            
+            if (totalScore > 0) {
               // Check if we already have this file (from component name search)
               const existing = results.get(entryPath);
               if (existing) {
-                // Add content score to existing filename match score
-                existing.score += contentScore;
+                // Add scores to existing entry
+                existing.score += totalScore;
               } else {
                 results.set(entryPath, { 
                   path: entryPath, 
                   content, 
-                  score: contentScore,
+                  score: totalScore,
                   filenameMatch: false 
                 });
               }
+              
+              // Log high-confidence element type matches
+              if (elementTypeScore >= 800) {
+                debugLog("Phase 2: High-confidence element type match", {
+                  file: entryPath,
+                  elementType: primaryElementType,
+                  elementScore: elementTypeScore,
+                  contentScore,
+                  totalScore
+                });
+              }
             }
           } catch {
             // Skip files that can't be read
@@ -927,7 +1002,7 @@ User Request: "${userPrompt}"
         
         // Search for element IDs in the file to enable precise targeting
         let idMatch: { lineNumber: number; matchedId: string; snippet: string } | null = null;
-        if (focusedElements && focusedElements.length > 0) {
+      if (focusedElements && focusedElements.length > 0) {
           for (const el of focusedElements) {
             idMatch = findElementIdInFile(content, el.elementId, el.childIds);
             if (idMatch) break;
@@ -1018,7 +1093,7 @@ ${linesWithNumbers}
           // Only include the variants/props section, not the whole file
           const variantsMatch = comp.content.match(/variants:\s*\{[\s\S]*?\n\s*\},\n\s*defaultVariants/);
           if (variantsMatch) {
-            textContent += `
+          textContent += `
 --- UI Component: ${comp.path} (variants only) ---
 ${variantsMatch[0]}
 ---
@@ -1092,7 +1167,7 @@ CRITICAL: Your "search" string MUST exist in the file. If you can't find the exa
 
       // Call Claude Vision API with retry mechanism
       const anthropic = new Anthropic({ apiKey });
-      
+
       // Build list of known file paths (for logging)
       const knownPaths = new Set<string>();
       if (pageContext.pageFile) {

package/package.json

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