sonance-brand-mcp 1.3.91 → 1.3.92

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

@@ -500,6 +500,50 @@ function findElementLineInFile(
   return null;
 }
 
+/**
+ * Search imported component files for the focused element
+ * Reuses findElementLineInFile() for consistent detection
+ * 
+ * This is called when the element cannot be found in the main target file,
+ * allowing us to redirect to the actual file containing the element.
+ */
+function findElementInImportedFiles(
+  focusedElement: VisionFocusedElement,
+  importedFiles: { path: string; content: string }[]
+): { path: string; lineNumber: number; matchedBy: string; content: string; confidence: string } | null {
+  debugLog("Searching imported components for element", {
+    elementType: focusedElement.type,
+    textContent: focusedElement.textContent?.substring(0, 30),
+    filesCount: importedFiles.length
+  });
+  
+  for (const file of importedFiles) {
+    // Focus on component files (where UI elements live)
+    // Skip types, stores, utils, hooks - they don't contain JSX elements
+    if (!file.path.includes('components/') && !file.path.includes('/ui/')) continue;
+    
+    const result = findElementLineInFile(file.content, focusedElement);
+    if (result && result.confidence !== 'low') {
+      debugLog("Found element in imported component", {
+        path: file.path,
+        lineNumber: result.lineNumber,
+        matchedBy: result.matchedBy,
+        confidence: result.confidence
+      });
+      return {
+        path: file.path,
+        lineNumber: result.lineNumber,
+        matchedBy: result.matchedBy,
+        content: file.content,
+        confidence: result.confidence
+      };
+    }
+  }
+  
+  debugLog("Element not found in any imported component files");
+  return null;
+}
+
 /**
  * PHASE 0: Deterministic Element ID Search (Cursor-style)
  * Grep entire codebase for the element ID. If found in multiple files,
@@ -1604,6 +1648,8 @@ User Request: "${userPrompt}"
         // Search for focused element in the file using multiple strategies
         // Priority: DOM id > textContent > className patterns
         let elementLocation: { lineNumber: number; snippet: string; confidence: 'high' | 'medium' | 'low'; matchedBy: string } | null = null;
+        let actualTargetFile = recommendedFileContent; // May change if we redirect
+        
         if (focusedElements && focusedElements.length > 0) {
           for (const el of focusedElements) {
             elementLocation = findElementLineInFile(content, el);
@@ -1617,6 +1663,35 @@ User Request: "${userPrompt}"
               break;
             }
           }
+          
+          // DYNAMIC IMPORT SEARCH: If not found in main file, search imported components
+          if (!elementLocation) {
+            debugLog("Element not in main file, searching imported components...", {
+              mainFile: recommendedFileContent.path,
+              importedFilesCount: pageContext.componentSources.length
+            });
+            
+            const importedMatch = findElementInImportedFiles(
+              focusedElements[0],
+              pageContext.componentSources
+            );
+            
+            if (importedMatch) {
+              debugLog("REDIRECT: Element found in imported component", {
+                originalFile: recommendedFileContent.path,
+                redirectTo: importedMatch.path,
+                matchedBy: importedMatch.matchedBy,
+                lineNumber: importedMatch.lineNumber
+              });
+              
+              // Switch target file to where element actually is
+              actualTargetFile = {
+                path: importedMatch.path,
+                content: importedMatch.content
+              };
+              elementLocation = findElementLineInFile(importedMatch.content, focusedElements[0]);
+            }
+          }
         }
         
         // Build focused elements section with precise targeting info
@@ -1649,10 +1724,11 @@ ${elementLocation.snippet}
 
 `;
           } else {
-            textContent += `\n`;
-            debugLog("WARNING: Could not locate focused element in file", {
-              file: recommendedFileContent.path,
-              hint: "The clicked element may be rendered by a child component (e.g., DialogContent, Button component). Check the component's source file instead.",
+            // Element NOT found in main file OR any imported components
+            // BLOCK the LLM from guessing - require empty modifications
+            debugLog("BLOCK: Could not locate focused element anywhere", {
+              mainFile: recommendedFileContent.path,
+              searchedImports: pageContext.componentSources.length,
               focusedElements: focusedElements.map(el => ({
                 name: el.name,
                 type: el.type,
@@ -1662,27 +1738,38 @@ ${elementLocation.snippet}
               }))
             });
             
-            // Add a hint to the LLM that we couldn't precisely locate the element
+            // STRONG BLOCK instruction - tell LLM to NOT guess
             textContent += `
-⚠️  WARNING: Could not precisely locate the clicked element in this file.
+⛔ STOP: CANNOT LOCATE THE CLICKED ELEMENT
+
+The user clicked on a specific element, but it could NOT be found in:
+- ${recommendedFileContent.path} (main target file)
+- Any of the ${pageContext.componentSources.length} imported component files
+
 The element may be:
-  - Rendered by a child component (e.g., DialogContent, Button)
-  - Dynamically generated
-  - In a different file imported by this component
+- Deeply nested in a component not in the import tree
+- Dynamically generated at runtime
+- Part of a third-party library component
 
-Please proceed with caution and verify you're modifying the correct element.
+DO NOT GUESS. Return this exact response:
+{
+  "modifications": [],
+  "explanation": "Could not locate the clicked element in this file or any of its ${pageContext.componentSources.length} imported components. The element may be rendered by a deeply nested or third-party component."
+}
 
 `;
           }
         }
         
         // Add line numbers to make it easy for LLM to reference exact code
-        const linesWithNumbers = content.split('\n').map((line, i) => 
+        // Use actualTargetFile which may have been redirected to an imported component
+        const targetContent = actualTargetFile.content;
+        const linesWithNumbers = targetContent.split('\n').map((line, i) => 
           `${String(i + 1).padStart(4, ' ')}| ${line}`
         ).join('\n');
         
         textContent += `═══════════════════════════════════════════════════════════════════════════════
-FILE TO EDIT: ${recommendedFileContent.path}
+FILE TO EDIT: ${actualTargetFile.path}
 ═══════════════════════════════════════════════════════════════════════════════
 
 IMPORTANT: Copy code EXACTLY as shown below (including line numbers for reference).
@@ -1693,11 +1780,12 @@ ${linesWithNumbers}
 \`\`\`
 
 `;
-        usedContext += content.length;
+        usedContext += targetContent.length;
         debugLog("Added TARGET COMPONENT with line numbers", { 
-          path: recommendedFileContent.path, 
-          lines: content.split('\n').length,
-          size: content.length 
+          path: actualTargetFile.path, 
+          lines: targetContent.split('\n').length,
+          size: targetContent.length,
+          wasRedirected: actualTargetFile.path !== recommendedFileContent.path
         });
       } else if (pageContext.pageContent) {
         // Fallback: use page file if no recommended file

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

@@ -496,6 +496,50 @@ function findElementLineInFile(
   return null;
 }
 
+/**
+ * Search imported component files for the focused element
+ * Reuses findElementLineInFile() for consistent detection
+ * 
+ * This is called when the element cannot be found in the main target file,
+ * allowing us to redirect to the actual file containing the element.
+ */
+function findElementInImportedFiles(
+  focusedElement: VisionFocusedElement,
+  importedFiles: { path: string; content: string }[]
+): { path: string; lineNumber: number; matchedBy: string; content: string; confidence: string } | null {
+  debugLog("Searching imported components for element", {
+    elementType: focusedElement.type,
+    textContent: focusedElement.textContent?.substring(0, 30),
+    filesCount: importedFiles.length
+  });
+  
+  for (const file of importedFiles) {
+    // Focus on component files (where UI elements live)
+    // Skip types, stores, utils, hooks - they don't contain JSX elements
+    if (!file.path.includes('components/') && !file.path.includes('/ui/')) continue;
+    
+    const result = findElementLineInFile(file.content, focusedElement);
+    if (result && result.confidence !== 'low') {
+      debugLog("Found element in imported component", {
+        path: file.path,
+        lineNumber: result.lineNumber,
+        matchedBy: result.matchedBy,
+        confidence: result.confidence
+      });
+      return {
+        path: file.path,
+        lineNumber: result.lineNumber,
+        matchedBy: result.matchedBy,
+        content: file.content,
+        confidence: result.confidence
+      };
+    }
+  }
+  
+  debugLog("Element not found in any imported component files");
+  return null;
+}
+
 /**
  * PHASE 0: Deterministic Element ID Search (Cursor-style)
  * Grep entire codebase for the element ID. If found in multiple files,
@@ -1573,6 +1617,8 @@ User Request: "${userPrompt}"
         // Search for focused element in the file using multiple strategies
         // Priority: DOM id > textContent > className patterns
         let elementLocation: { lineNumber: number; snippet: string; confidence: 'high' | 'medium' | 'low'; matchedBy: string } | null = null;
+        let actualTargetFile = recommendedFileContent; // May change if we redirect
+        
         if (focusedElements && focusedElements.length > 0) {
           for (const el of focusedElements) {
             elementLocation = findElementLineInFile(content, el);
@@ -1586,6 +1632,35 @@ User Request: "${userPrompt}"
               break;
             }
           }
+          
+          // DYNAMIC IMPORT SEARCH: If not found in main file, search imported components
+          if (!elementLocation) {
+            debugLog("Element not in main file, searching imported components...", {
+              mainFile: recommendedFileContent.path,
+              importedFilesCount: pageContext.componentSources.length
+            });
+            
+            const importedMatch = findElementInImportedFiles(
+              focusedElements[0],
+              pageContext.componentSources
+            );
+            
+            if (importedMatch) {
+              debugLog("REDIRECT: Element found in imported component", {
+                originalFile: recommendedFileContent.path,
+                redirectTo: importedMatch.path,
+                matchedBy: importedMatch.matchedBy,
+                lineNumber: importedMatch.lineNumber
+              });
+              
+              // Switch target file to where element actually is
+              actualTargetFile = {
+                path: importedMatch.path,
+                content: importedMatch.content
+              };
+              elementLocation = findElementLineInFile(importedMatch.content, focusedElements[0]);
+            }
+          }
         }
         
         // Build focused elements section with precise targeting info
@@ -1618,10 +1693,11 @@ ${elementLocation.snippet}
 
 `;
           } else {
-            textContent += `\n`;
-            debugLog("WARNING: Could not locate focused element in file", {
-              file: recommendedFileContent.path,
-              hint: "The clicked element may be rendered by a child component (e.g., DialogContent, Button component). Check the component's source file instead.",
+            // Element NOT found in main file OR any imported components
+            // BLOCK the LLM from guessing - require empty modifications
+            debugLog("BLOCK: Could not locate focused element anywhere", {
+              mainFile: recommendedFileContent.path,
+              searchedImports: pageContext.componentSources.length,
               focusedElements: focusedElements.map(el => ({
                 name: el.name,
                 type: el.type,
@@ -1631,27 +1707,38 @@ ${elementLocation.snippet}
               }))
             });
             
-            // Add a hint to the LLM that we couldn't precisely locate the element
+            // STRONG BLOCK instruction - tell LLM to NOT guess
             textContent += `
-⚠️  WARNING: Could not precisely locate the clicked element in this file.
+⛔ STOP: CANNOT LOCATE THE CLICKED ELEMENT
+
+The user clicked on a specific element, but it could NOT be found in:
+- ${recommendedFileContent.path} (main target file)
+- Any of the ${pageContext.componentSources.length} imported component files
+
 The element may be:
-  - Rendered by a child component (e.g., DialogContent, Button)
-  - Dynamically generated
-  - In a different file imported by this component
+- Deeply nested in a component not in the import tree
+- Dynamically generated at runtime
+- Part of a third-party library component
 
-Please proceed with caution and verify you're modifying the correct element.
+DO NOT GUESS. Return this exact response:
+{
+  "modifications": [],
+  "explanation": "Could not locate the clicked element in this file or any of its ${pageContext.componentSources.length} imported components. The element may be rendered by a deeply nested or third-party component."
+}
 
 `;
           }
         }
         
         // Add line numbers to make it easy for LLM to reference exact code
-        const linesWithNumbers = content.split('\n').map((line, i) => 
+        // Use actualTargetFile which may have been redirected to an imported component
+        const targetContent = actualTargetFile.content;
+        const linesWithNumbers = targetContent.split('\n').map((line, i) => 
           `${String(i + 1).padStart(4, ' ')}| ${line}`
         ).join('\n');
         
         textContent += `═══════════════════════════════════════════════════════════════════════════════
-FILE TO EDIT: ${recommendedFileContent.path}
+FILE TO EDIT: ${actualTargetFile.path}
 ═══════════════════════════════════════════════════════════════════════════════
 
 IMPORTANT: Copy code EXACTLY as shown below (including line numbers for reference).
@@ -1662,11 +1749,12 @@ ${linesWithNumbers}
 \`\`\`
 
 `;
-        usedContext += content.length;
+        usedContext += targetContent.length;
         debugLog("Added TARGET COMPONENT with line numbers", { 
-          path: recommendedFileContent.path, 
-          lines: content.split('\n').length,
-          size: content.length 
+          path: actualTargetFile.path, 
+          lines: targetContent.split('\n').length,
+          size: targetContent.length,
+          wasRedirected: actualTargetFile.path !== recommendedFileContent.path 
         });
       } else if (pageContext.pageContent) {
         // Fallback: use page file if no recommended file

package/package.json

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