sonance-brand-mcp 1.3.58 → 1.3.59

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

@@ -171,6 +171,73 @@ 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
+ */
+function findFilesContainingElement(
+  focusedElements: VisionFocusedElement[] | undefined,
+  candidateFiles: { path: string; content: string }[]
+): { path: string; score: number; matches: string[] }[] {
+  if (!focusedElements || focusedElements.length === 0) {
+    return [];
+  }
+
+  const results: { path: string; score: number; matches: string[] }[] = [];
+
+  for (const file of candidateFiles) {
+    let score = 0;
+    const matches: string[] = [];
+    const content = file.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();
+
+      // Search for JSX patterns
+      // Check for HTML tags like <button, <div, etc.
+      if (content.includes(`<${elementType}`)) {
+        score += 10;
+        matches.push(`<${elementType}>`);
+      }
+
+      // 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}>`);
+      }
+
+      // Check for component imports
+      if (content.includes(`import`) && content.includes(componentType)) {
+        score += 5;
+      }
+
+      // Check for event handlers commonly associated with buttons
+      if (elementType === "button" || componentType === "button") {
+        if (content.includes("onclick") || content.includes("onpress")) {
+          score += 3;
+        }
+      }
+
+      // 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}`);
+      }
+    }
+
+    if (score > 0) {
+      results.push({ path: file.path, score, matches });
+    }
+  }
+
+  // Sort by score descending
+  return results.sort((a, b) => b.score - a.score);
+}
+
 /**
  * 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
@@ -179,7 +246,8 @@ async function selectBestFileFromList(
   screenshot: string,
   userPrompt: string,
   candidateFiles: string[],
-  apiKey: string
+  apiKey: string,
+  focusedElementHints?: { path: string; score: number; matches: string[] }[]
 ): Promise<string | null> {
   if (candidateFiles.length === 0) return null;
   
@@ -203,7 +271,12 @@ async function selectBestFileFromList(
 
 Here are the actual component files found in this codebase:
 ${candidateFiles.map((f, i) => `${i + 1}. ${f}`).join('\n')}
+${focusedElementHints && focusedElementHints.length > 0 ? `
+FOCUSED ELEMENT ANALYSIS - Files that contain the element the user clicked on:
+${focusedElementHints.slice(0, 3).map(h => `- ${h.path} (confidence: ${h.score}, found: ${h.matches.join(", ")})`).join('\n')}
 
+IMPORTANT: Prefer files from the FOCUSED ELEMENT ANALYSIS above, as they contain the actual element the user wants to modify.
+` : ''}
 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").
@@ -451,6 +524,13 @@ RULES:
 8. NEVER change data mappings (icon names, keys, enum values) unless user explicitly provides the new values
 9. If you don't know what values exist in a database or data source, DO NOT guess - ask for clarification
 
+CRITICAL - ELEMENT VERIFICATION:
+- When a focused element is mentioned, SEARCH the provided file content for that EXACT element
+- Look for the actual JSX/HTML code: <button, <Button, <div, className, onClick, etc.
+- If you cannot find the element in the TARGET COMPONENT section, it may be in a child component
+- NEVER guess what element code looks like - find it in the file or report "element not found"
+- If the element is not in the provided file, return: {"modifications": [], "explanation": "The focused element appears to be in a child component, not in [filename]"}
+
 CRITICAL - DATA INTEGRITY:
 - If code references database values (like icon_name, type, status), DO NOT change the mapping keys
 - You cannot see database content - only change STRUCTURE, not DATA MAPPINGS
@@ -604,6 +684,22 @@ export async function POST(request: Request) {
           const searchResults = searchFilesSmart(analysis, projectRoot, 10);
           smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
           
+          // PHASE 2.5: Find which files contain the focused element
+          const focusedElementHints = findFilesContainingElement(
+            focusedElements,
+            searchResults.map(r => ({ path: r.path, content: r.content }))
+          );
+          
+          if (focusedElementHints.length > 0) {
+            debugLog("Focused element search results", {
+              topMatches: focusedElementHints.slice(0, 3).map(h => ({
+                path: h.path,
+                score: h.score,
+                matches: h.matches
+              }))
+            });
+          }
+          
           // PHASE 3: Ask LLM to pick the best file from actual file list
           if (searchResults.length > 0) {
             const candidateFiles = searchResults.slice(0, 10).map(r => r.path);
@@ -611,7 +707,8 @@ export async function POST(request: Request) {
               screenshot,
               userPrompt,
               candidateFiles,
-              apiKey
+              apiKey,
+              focusedElementHints
             );
             
             if (selectedFile) {

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

@@ -167,6 +167,73 @@ 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
+ */
+function findFilesContainingElement(
+  focusedElements: VisionFocusedElement[] | undefined,
+  candidateFiles: { path: string; content: string }[]
+): { path: string; score: number; matches: string[] }[] {
+  if (!focusedElements || focusedElements.length === 0) {
+    return [];
+  }
+
+  const results: { path: string; score: number; matches: string[] }[] = [];
+
+  for (const file of candidateFiles) {
+    let score = 0;
+    const matches: string[] = [];
+    const content = file.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();
+
+      // Search for JSX patterns
+      // Check for HTML tags like <button, <div, etc.
+      if (content.includes(`<${elementType}`)) {
+        score += 10;
+        matches.push(`<${elementType}>`);
+      }
+
+      // 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}>`);
+      }
+
+      // Check for component imports
+      if (content.includes(`import`) && content.includes(componentType)) {
+        score += 5;
+      }
+
+      // Check for event handlers commonly associated with buttons
+      if (elementType === "button" || componentType === "button") {
+        if (content.includes("onclick") || content.includes("onpress")) {
+          score += 3;
+        }
+      }
+
+      // 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}`);
+      }
+    }
+
+    if (score > 0) {
+      results.push({ path: file.path, score, matches });
+    }
+  }
+
+  // Sort by score descending
+  return results.sort((a, b) => b.score - a.score);
+}
+
 /**
  * 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
@@ -175,7 +242,8 @@ async function selectBestFileFromList(
   screenshot: string,
   userPrompt: string,
   candidateFiles: string[],
-  apiKey: string
+  apiKey: string,
+  focusedElementHints?: { path: string; score: number; matches: string[] }[]
 ): Promise<string | null> {
   if (candidateFiles.length === 0) return null;
   
@@ -199,7 +267,12 @@ async function selectBestFileFromList(
 
 Here are the actual component files found in this codebase:
 ${candidateFiles.map((f, i) => `${i + 1}. ${f}`).join('\n')}
+${focusedElementHints && focusedElementHints.length > 0 ? `
+FOCUSED ELEMENT ANALYSIS - Files that contain the element the user clicked on:
+${focusedElementHints.slice(0, 3).map(h => `- ${h.path} (confidence: ${h.score}, found: ${h.matches.join(", ")})`).join('\n')}
 
+IMPORTANT: Prefer files from the FOCUSED ELEMENT ANALYSIS above, as they contain the actual element the user wants to modify.
+` : ''}
 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").
@@ -447,6 +520,13 @@ RULES:
 8. NEVER change data mappings (icon names, keys, enum values) unless user explicitly provides the new values
 9. If you don't know what values exist in a database or data source, DO NOT guess - ask for clarification
 
+CRITICAL - ELEMENT VERIFICATION:
+- When a focused element is mentioned, SEARCH the provided file content for that EXACT element
+- Look for the actual JSX/HTML code: <button, <Button, <div, className, onClick, etc.
+- If you cannot find the element in the TARGET COMPONENT section, it may be in a child component
+- NEVER guess what element code looks like - find it in the file or report "element not found"
+- If the element is not in the provided file, return: {"modifications": [], "explanation": "The focused element appears to be in a child component, not in [filename]"}
+
 CRITICAL - DATA INTEGRITY:
 - If code references database values (like icon_name, type, status), DO NOT change the mapping keys
 - You cannot see database content - only change STRUCTURE, not DATA MAPPINGS
@@ -575,6 +655,22 @@ export async function POST(request: Request) {
           const searchResults = searchFilesSmart(analysis, projectRoot, 10);
           smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
           
+          // PHASE 2.5: Find which files contain the focused element
+          const focusedElementHints = findFilesContainingElement(
+            focusedElements,
+            searchResults.map(r => ({ path: r.path, content: r.content }))
+          );
+          
+          if (focusedElementHints.length > 0) {
+            debugLog("Focused element search results", {
+              topMatches: focusedElementHints.slice(0, 3).map(h => ({
+                path: h.path,
+                score: h.score,
+                matches: h.matches
+              }))
+            });
+          }
+          
           // PHASE 3: Ask LLM to pick the best file from actual file list
           if (searchResults.length > 0) {
             const candidateFiles = searchResults.slice(0, 10).map(r => r.path);
@@ -582,7 +678,8 @@ export async function POST(request: Request) {
               screenshot,
               userPrompt,
               candidateFiles,
-              apiKey
+              apiKey,
+              focusedElementHints
             );
             
             if (selectedFile) {

package/package.json

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