sonance-brand-mcp 1.3.96 → 1.3.98

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

@@ -524,14 +524,23 @@ function findElementLineInFile(
  * Example: "What's the essence of this process?" might be in EssenceTab.tsx
  * but the parent QuickAddProcessModal.tsx was selected by Phase 2a.
  */
-function findTextInImportedFiles(
-  textContent: string,
+/**
+ * Score imported files by how many discovered text strings they contain.
+ * This finds the TRUE file by matching ALL visible text, not just one substring.
+ * 
+ * Example: If annotation discovers ["What's the essence?", "Essence Quality", "Show Example"]
+ * and EssenceTab.tsx contains 2 of them while QuickAddProcessModal.tsx contains 1,
+ * EssenceTab.tsx wins with the higher score.
+ */
+function scoreFilesForTextContent(
+  textContents: string[],
   importedFiles: { path: string; content: string }[]
-): { path: string; lineNumber: number; snippet: string; content: string } | null {
-  if (!textContent || textContent.length < 5) return null;
+): { path: string; content: string; score: number; matchedTexts: string[]; firstMatchLine: number } | null {
+  if (!textContents || textContents.length === 0) return null;
   
-  debugLog("Searching imported files for text content", {
-    textContent: textContent.substring(0, 40),
+  debugLog("Scoring imported files for text content", {
+    textCount: textContents.length,
+    texts: textContents.slice(0, 5).map(t => t.substring(0, 30)),
     filesCount: importedFiles.length
   });
   
@@ -540,35 +549,63 @@ function findTextInImportedFiles(
     f.path.includes('components/') || f.path.includes('/ui/')
   );
   
-  // Use first 20 chars for matching (handles dynamic suffixes)
-  const searchText = textContent.substring(0, 20);
+  const results: { path: string; content: string; score: number; matchedTexts: string[]; firstMatchLine: number }[] = [];
   
   for (const file of componentFiles) {
-    const lines = file.content.split('\n');
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      // Look for the text in JSX patterns: >Text<, "Text", 'Text', `Text`
-      if (line.includes(`>${searchText}`) ||
-          line.includes(`"${searchText}`) ||
-          line.includes(`'${searchText}`) ||
-          line.includes(`\`${searchText}`)) {
-        debugLog("Found text in imported file", {
-          path: file.path,
-          lineNumber: i + 1,
-          matchedText: searchText
-        });
-        return {
-          path: file.path,
-          lineNumber: i + 1,
-          snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
-          content: file.content
-        };
+    let score = 0;
+    const matchedTexts: string[] = [];
+    let firstMatchLine = 0;
+    
+    for (const text of textContents) {
+      if (!text || text.length < 5) continue;
+      
+      // Use first 20 chars for matching (handles dynamic suffixes)
+      const searchText = text.substring(0, 20);
+      
+      // Check if this text exists in the file
+      if (file.content.includes(searchText)) {
+        score++;
+        matchedTexts.push(text.substring(0, 30) + (text.length > 30 ? '...' : ''));
+        
+        // Find line number for first match (for element location)
+        if (firstMatchLine === 0) {
+          const lines = file.content.split('\n');
+          for (let i = 0; i < lines.length; i++) {
+            if (lines[i].includes(searchText)) {
+              firstMatchLine = i + 1;
+              break;
+            }
+          }
+        }
       }
     }
+    
+    if (score > 0) {
+      results.push({ 
+        path: file.path, 
+        content: file.content, 
+        score, 
+        matchedTexts,
+        firstMatchLine 
+      });
+    }
   }
   
-  debugLog("Text not found in any imported component files");
-  return null;
+  // Sort by score descending (highest match count wins)
+  results.sort((a, b) => b.score - a.score);
+  
+  if (results.length > 0) {
+    debugLog("Text scoring results", {
+      topFile: results[0].path,
+      topScore: results[0].score,
+      topMatches: results[0].matchedTexts,
+      allResults: results.slice(0, 3).map(r => ({ path: r.path, score: r.score }))
+    });
+  } else {
+    debugLog("No text matches found in any imported component files");
+  }
+  
+  return results.length > 0 ? results[0] : null;
 }
 
 /**
@@ -1304,6 +1341,85 @@ Output format:
 
 The "search" field must match the file EXACTLY (copy-paste from the code provided).`;
 
+/**
+ * DESIGN REASONING PROMPT
+ * Forces the LLM through a structured analysis before making design changes.
+ * This prevents over-engineering and ensures thoughtful, targeted modifications.
+ */
+const DESIGN_REASONING_PROMPT = `
+═══════════════════════════════════════════════════════════════════════════════
+DESIGN REASONING PROTOCOL (Follow BEFORE generating patches)
+═══════════════════════════════════════════════════════════════════════════════
+
+STEP 1 - VISUAL ANALYSIS:
+Before making any changes, analyze the current UI in the screenshot:
+• What type of component is this? (form wizard, modal, card, data table, sidebar, etc.)
+• What is currently working well that should be PRESERVED?
+• What specific visual issues exist? (inconsistent spacing, unclear hierarchy, alignment problems, clutter)
+
+STEP 2 - MINIMAL CHANGE PLAN:
+Identify the MINIMUM changes needed to address the user's request:
+• What 1-3 targeted fixes would solve the issue?
+• What should you explicitly NOT change?
+• Will these changes break existing functionality or visual balance?
+
+STEP 3 - GUARDRAILS CHECK:
+Before implementing, verify you are following these rules:
+• Am I preserving the existing layout structure? (flex stays flex, grid stays grid)
+• Am I keeping the existing color palette unless specifically asked to change it?
+• Am I making incremental improvements, NOT a complete restructure?
+• Am I keeping the same visual hierarchy and element positions?
+
+STEP 4 - IMPLEMENT:
+Only now generate patches for the targeted changes from Step 2.
+Each patch should be small and focused - prefer multiple small patches over one large rewrite.
+`;
+
+/**
+ * DESIGN GUARDRAILS
+ * Explicit constraints to prevent the LLM from over-engineering design changes.
+ */
+const DESIGN_GUARDRAILS = `
+═══════════════════════════════════════════════════════════════════════════════
+DESIGN GUARDRAILS (MUST FOLLOW)
+═══════════════════════════════════════════════════════════════════════════════
+
+❌ DO NOT:
+• Convert layout systems (do NOT change flex to grid or vice versa)
+• Restructure component hierarchy unless explicitly asked
+• Change color schemes unless specifically requested
+• Move elements to different positions unless asked
+• Rewrite entire sections - make targeted changes only
+• Add new wrapper elements or change semantic structure
+
+✓ DO:
+• Focus on spacing, padding, and margins for "cleaner" requests
+• Improve typography (font size, weight, line-height) for readability
+• Fix alignment issues within the existing structure
+• Adjust visual hierarchy through subtle styling, not restructuring
+• Make the smallest change that addresses the user's request
+• Preserve what is already working well
+`;
+
+/**
+ * Detect if a user request is design-heavy and needs the reasoning protocol.
+ * Simple requests like "change button color to blue" don't need it.
+ */
+function isDesignHeavyRequest(userPrompt: string): boolean {
+  const designKeywords = [
+    'redesign', 'design', 'layout', 'improve', 'better', 'modernize', 'modern',
+    'cleaner', 'clean', 'messy', 'cluttered', 'update look', 'looks bad',
+    'ugly', 'prettier', 'beautiful', 'professional', 'polish', 'refine',
+    'restructure', 'reorganize', 'rearrange', 'simplify', 'streamline',
+    'compact', 'spacious', 'breathing room', 'visual', 'aesthetic',
+    'ux', 'user experience', 'ui', 'user interface', 'make it look',
+    'looks weird', 'not right', 'fix the look', 'appearance'
+  ];
+  
+  const lowerPrompt = userPrompt.toLowerCase();
+  return designKeywords.some(keyword => lowerPrompt.includes(keyword));
+}
+
 export async function POST(request: Request) {
   // Only allow in development
   if (process.env.NODE_ENV !== "development") {
@@ -1711,6 +1827,23 @@ User Request: "${userPrompt}"
 
 `;
 
+      // ========== DESIGN REASONING PROTOCOL ==========
+      // For design-heavy requests, add structured reasoning and guardrails
+      // This prevents over-engineering and ensures thoughtful changes
+      const isDesignRequest = isDesignHeavyRequest(userPrompt || '');
+      
+      if (isDesignRequest) {
+        debugLog("Design-heavy request detected, adding reasoning protocol", {
+          prompt: userPrompt?.substring(0, 50),
+          triggerKeywords: ['redesign', 'better', 'improve', 'cleaner', 'layout', 'modernize']
+            .filter(k => userPrompt?.toLowerCase().includes(k))
+        });
+        
+        textContent += DESIGN_REASONING_PROMPT;
+        textContent += DESIGN_GUARDRAILS;
+        textContent += '\n';
+      }
+
       // ========== TARGET COMPONENT ONLY (with line numbers) ==========
       // CRITICAL: Only include the TARGET file to avoid overwhelming the LLM with noise
       if (recommendedFileContent) {
@@ -1735,43 +1868,67 @@ User Request: "${userPrompt}"
             }
           }
           
-          // TEXT-FIRST REDIRECT: Before accepting medium/low confidence match,
-          // search imported files for the actual TEXT CONTENT.
-          // This handles cases where parent component is selected but text lives in child.
+          // TEXT SCORING REDIRECT: Score ALL imported files by how many discovered
+          // text strings they contain. The file with the highest score is the TRUE target.
+          // This handles parent/child component cases accurately.
           if (elementLocation && elementLocation.confidence !== 'high') {
-            // Find the first focused element with meaningful text content
-            const textToFind = focusedElements.find(e => e.textContent && e.textContent.length > 5)?.textContent;
+            // Collect ALL text content from focused elements
+            const allTextContent = focusedElements
+              .filter(e => e.textContent && e.textContent.length > 5)
+              .map(e => e.textContent!);
             
-            if (textToFind) {
-              debugLog("Medium/low confidence match - checking imports for text", {
+            if (allTextContent.length > 0) {
+              debugLog("Medium/low confidence match - scoring imports for all text", {
                 currentFile: recommendedFileContent.path,
                 currentConfidence: elementLocation.confidence,
-                searchingFor: textToFind.substring(0, 40)
+                textCount: allTextContent.length,
+                texts: allTextContent.slice(0, 5).map(t => t.substring(0, 25))
               });
               
-              const textMatch = findTextInImportedFiles(
-                textToFind,
+              // Score all imported files
+              const bestMatch = scoreFilesForTextContent(
+                allTextContent,
                 pageContext.componentSources
               );
               
-              if (textMatch) {
-                debugLog("TEXT REDIRECT: Found text in imported component", {
+              // Also score the current file for comparison
+              const currentFileScore = allTextContent.filter(text => 
+                recommendedFileContent.content.includes(text.substring(0, 20))
+              ).length;
+              
+              debugLog("Text scoring comparison", {
+                currentFile: recommendedFileContent.path,
+                currentScore: currentFileScore,
+                bestImport: bestMatch?.path || 'none',
+                bestImportScore: bestMatch?.score || 0
+              });
+              
+              // Redirect only if imported file has MORE matches than current file
+              if (bestMatch && bestMatch.score > currentFileScore) {
+                debugLog("TEXT REDIRECT: Imported file has more text matches", {
                   originalFile: recommendedFileContent.path,
-                  originalConfidence: elementLocation.confidence,
-                  redirectTo: textMatch.path,
-                  lineNumber: textMatch.lineNumber
+                  originalScore: currentFileScore,
+                  redirectTo: bestMatch.path,
+                  redirectScore: bestMatch.score,
+                  matchedTexts: bestMatch.matchedTexts
                 });
                 
-                // Switch target file to where the text actually is
+                // Switch target file to where most text content lives
                 actualTargetFile = {
-                  path: textMatch.path,
-                  content: textMatch.content
+                  path: bestMatch.path,
+                  content: bestMatch.content
                 };
+                
+                // Find a line with matched text for element location
+                const lines = bestMatch.content.split('\n');
+                const snippetStart = Math.max(0, bestMatch.firstMatchLine - 4);
+                const snippetEnd = Math.min(lines.length, bestMatch.firstMatchLine + 5);
+                
                 elementLocation = {
-                  lineNumber: textMatch.lineNumber,
-                  snippet: textMatch.snippet,
+                  lineNumber: bestMatch.firstMatchLine,
+                  snippet: lines.slice(snippetStart, snippetEnd).join('\n'),
                   confidence: 'high',
-                  matchedBy: `textContent in imported file "${textToFind.substring(0, 30)}..."`
+                  matchedBy: `text scoring: ${bestMatch.score} matches in imported file`
                 };
               }
             }

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

@@ -520,14 +520,23 @@ function findElementLineInFile(
  * Example: "What's the essence of this process?" might be in EssenceTab.tsx
  * but the parent QuickAddProcessModal.tsx was selected by Phase 2a.
  */
-function findTextInImportedFiles(
-  textContent: string,
+/**
+ * Score imported files by how many discovered text strings they contain.
+ * This finds the TRUE file by matching ALL visible text, not just one substring.
+ * 
+ * Example: If annotation discovers ["What's the essence?", "Essence Quality", "Show Example"]
+ * and EssenceTab.tsx contains 2 of them while QuickAddProcessModal.tsx contains 1,
+ * EssenceTab.tsx wins with the higher score.
+ */
+function scoreFilesForTextContent(
+  textContents: string[],
   importedFiles: { path: string; content: string }[]
-): { path: string; lineNumber: number; snippet: string; content: string } | null {
-  if (!textContent || textContent.length < 5) return null;
+): { path: string; content: string; score: number; matchedTexts: string[]; firstMatchLine: number } | null {
+  if (!textContents || textContents.length === 0) return null;
   
-  debugLog("Searching imported files for text content", {
-    textContent: textContent.substring(0, 40),
+  debugLog("Scoring imported files for text content", {
+    textCount: textContents.length,
+    texts: textContents.slice(0, 5).map(t => t.substring(0, 30)),
     filesCount: importedFiles.length
   });
   
@@ -536,35 +545,63 @@ function findTextInImportedFiles(
     f.path.includes('components/') || f.path.includes('/ui/')
   );
   
-  // Use first 20 chars for matching (handles dynamic suffixes)
-  const searchText = textContent.substring(0, 20);
+  const results: { path: string; content: string; score: number; matchedTexts: string[]; firstMatchLine: number }[] = [];
   
   for (const file of componentFiles) {
-    const lines = file.content.split('\n');
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      // Look for the text in JSX patterns: >Text<, "Text", 'Text', `Text`
-      if (line.includes(`>${searchText}`) ||
-          line.includes(`"${searchText}`) ||
-          line.includes(`'${searchText}`) ||
-          line.includes(`\`${searchText}`)) {
-        debugLog("Found text in imported file", {
-          path: file.path,
-          lineNumber: i + 1,
-          matchedText: searchText
-        });
-        return {
-          path: file.path,
-          lineNumber: i + 1,
-          snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
-          content: file.content
-        };
+    let score = 0;
+    const matchedTexts: string[] = [];
+    let firstMatchLine = 0;
+    
+    for (const text of textContents) {
+      if (!text || text.length < 5) continue;
+      
+      // Use first 20 chars for matching (handles dynamic suffixes)
+      const searchText = text.substring(0, 20);
+      
+      // Check if this text exists in the file
+      if (file.content.includes(searchText)) {
+        score++;
+        matchedTexts.push(text.substring(0, 30) + (text.length > 30 ? '...' : ''));
+        
+        // Find line number for first match (for element location)
+        if (firstMatchLine === 0) {
+          const lines = file.content.split('\n');
+          for (let i = 0; i < lines.length; i++) {
+            if (lines[i].includes(searchText)) {
+              firstMatchLine = i + 1;
+              break;
+            }
+          }
+        }
       }
     }
+    
+    if (score > 0) {
+      results.push({ 
+        path: file.path, 
+        content: file.content, 
+        score, 
+        matchedTexts,
+        firstMatchLine 
+      });
+    }
   }
   
-  debugLog("Text not found in any imported component files");
-  return null;
+  // Sort by score descending (highest match count wins)
+  results.sort((a, b) => b.score - a.score);
+  
+  if (results.length > 0) {
+    debugLog("Text scoring results", {
+      topFile: results[0].path,
+      topScore: results[0].score,
+      topMatches: results[0].matchedTexts,
+      allResults: results.slice(0, 3).map(r => ({ path: r.path, score: r.score }))
+    });
+  } else {
+    debugLog("No text matches found in any imported component files");
+  }
+  
+  return results.length > 0 ? results[0] : null;
 }
 
 /**
@@ -1300,6 +1337,85 @@ Output format:
 
 The "search" field must match the file EXACTLY (copy-paste from the code provided).`;
 
+/**
+ * DESIGN REASONING PROMPT
+ * Forces the LLM through a structured analysis before making design changes.
+ * This prevents over-engineering and ensures thoughtful, targeted modifications.
+ */
+const DESIGN_REASONING_PROMPT = `
+═══════════════════════════════════════════════════════════════════════════════
+DESIGN REASONING PROTOCOL (Follow BEFORE generating patches)
+═══════════════════════════════════════════════════════════════════════════════
+
+STEP 1 - VISUAL ANALYSIS:
+Before making any changes, analyze the current UI in the screenshot:
+• What type of component is this? (form wizard, modal, card, data table, sidebar, etc.)
+• What is currently working well that should be PRESERVED?
+• What specific visual issues exist? (inconsistent spacing, unclear hierarchy, alignment problems, clutter)
+
+STEP 2 - MINIMAL CHANGE PLAN:
+Identify the MINIMUM changes needed to address the user's request:
+• What 1-3 targeted fixes would solve the issue?
+• What should you explicitly NOT change?
+• Will these changes break existing functionality or visual balance?
+
+STEP 3 - GUARDRAILS CHECK:
+Before implementing, verify you are following these rules:
+• Am I preserving the existing layout structure? (flex stays flex, grid stays grid)
+• Am I keeping the existing color palette unless specifically asked to change it?
+• Am I making incremental improvements, NOT a complete restructure?
+• Am I keeping the same visual hierarchy and element positions?
+
+STEP 4 - IMPLEMENT:
+Only now generate patches for the targeted changes from Step 2.
+Each patch should be small and focused - prefer multiple small patches over one large rewrite.
+`;
+
+/**
+ * DESIGN GUARDRAILS
+ * Explicit constraints to prevent the LLM from over-engineering design changes.
+ */
+const DESIGN_GUARDRAILS = `
+═══════════════════════════════════════════════════════════════════════════════
+DESIGN GUARDRAILS (MUST FOLLOW)
+═══════════════════════════════════════════════════════════════════════════════
+
+❌ DO NOT:
+• Convert layout systems (do NOT change flex to grid or vice versa)
+• Restructure component hierarchy unless explicitly asked
+• Change color schemes unless specifically requested
+• Move elements to different positions unless asked
+• Rewrite entire sections - make targeted changes only
+• Add new wrapper elements or change semantic structure
+
+✓ DO:
+• Focus on spacing, padding, and margins for "cleaner" requests
+• Improve typography (font size, weight, line-height) for readability
+• Fix alignment issues within the existing structure
+• Adjust visual hierarchy through subtle styling, not restructuring
+• Make the smallest change that addresses the user's request
+• Preserve what is already working well
+`;
+
+/**
+ * Detect if a user request is design-heavy and needs the reasoning protocol.
+ * Simple requests like "change button color to blue" don't need it.
+ */
+function isDesignHeavyRequest(userPrompt: string): boolean {
+  const designKeywords = [
+    'redesign', 'design', 'layout', 'improve', 'better', 'modernize', 'modern',
+    'cleaner', 'clean', 'messy', 'cluttered', 'update look', 'looks bad',
+    'ugly', 'prettier', 'beautiful', 'professional', 'polish', 'refine',
+    'restructure', 'reorganize', 'rearrange', 'simplify', 'streamline',
+    'compact', 'spacious', 'breathing room', 'visual', 'aesthetic',
+    'ux', 'user experience', 'ui', 'user interface', 'make it look',
+    'looks weird', 'not right', 'fix the look', 'appearance'
+  ];
+  
+  const lowerPrompt = userPrompt.toLowerCase();
+  return designKeywords.some(keyword => lowerPrompt.includes(keyword));
+}
+
 export async function POST(request: Request) {
   // Only allow in development
   if (process.env.NODE_ENV !== "development") {
@@ -1680,6 +1796,23 @@ User Request: "${userPrompt}"
 
 `;
 
+      // ========== DESIGN REASONING PROTOCOL ==========
+      // For design-heavy requests, add structured reasoning and guardrails
+      // This prevents over-engineering and ensures thoughtful changes
+      const isDesignRequest = isDesignHeavyRequest(userPrompt || '');
+      
+      if (isDesignRequest) {
+        debugLog("Design-heavy request detected, adding reasoning protocol", {
+          prompt: userPrompt?.substring(0, 50),
+          triggerKeywords: ['redesign', 'better', 'improve', 'cleaner', 'layout', 'modernize']
+            .filter(k => userPrompt?.toLowerCase().includes(k))
+        });
+        
+        textContent += DESIGN_REASONING_PROMPT;
+        textContent += DESIGN_GUARDRAILS;
+        textContent += '\n';
+      }
+
       // ========== TARGET COMPONENT ONLY (with line numbers) ==========
       // CRITICAL: Only include the TARGET file to avoid overwhelming the LLM with noise
       if (recommendedFileContent) {
@@ -1704,43 +1837,67 @@ User Request: "${userPrompt}"
             }
           }
           
-          // TEXT-FIRST REDIRECT: Before accepting medium/low confidence match,
-          // search imported files for the actual TEXT CONTENT.
-          // This handles cases where parent component is selected but text lives in child.
+          // TEXT SCORING REDIRECT: Score ALL imported files by how many discovered
+          // text strings they contain. The file with the highest score is the TRUE target.
+          // This handles parent/child component cases accurately.
           if (elementLocation && elementLocation.confidence !== 'high') {
-            // Find the first focused element with meaningful text content
-            const textToFind = focusedElements.find(e => e.textContent && e.textContent.length > 5)?.textContent;
+            // Collect ALL text content from focused elements
+            const allTextContent = focusedElements
+              .filter(e => e.textContent && e.textContent.length > 5)
+              .map(e => e.textContent!);
             
-            if (textToFind) {
-              debugLog("Medium/low confidence match - checking imports for text", {
+            if (allTextContent.length > 0) {
+              debugLog("Medium/low confidence match - scoring imports for all text", {
                 currentFile: recommendedFileContent.path,
                 currentConfidence: elementLocation.confidence,
-                searchingFor: textToFind.substring(0, 40)
+                textCount: allTextContent.length,
+                texts: allTextContent.slice(0, 5).map(t => t.substring(0, 25))
               });
               
-              const textMatch = findTextInImportedFiles(
-                textToFind,
+              // Score all imported files
+              const bestMatch = scoreFilesForTextContent(
+                allTextContent,
                 pageContext.componentSources
               );
               
-              if (textMatch) {
-                debugLog("TEXT REDIRECT: Found text in imported component", {
+              // Also score the current file for comparison
+              const currentFileScore = allTextContent.filter(text => 
+                recommendedFileContent.content.includes(text.substring(0, 20))
+              ).length;
+              
+              debugLog("Text scoring comparison", {
+                currentFile: recommendedFileContent.path,
+                currentScore: currentFileScore,
+                bestImport: bestMatch?.path || 'none',
+                bestImportScore: bestMatch?.score || 0
+              });
+              
+              // Redirect only if imported file has MORE matches than current file
+              if (bestMatch && bestMatch.score > currentFileScore) {
+                debugLog("TEXT REDIRECT: Imported file has more text matches", {
                   originalFile: recommendedFileContent.path,
-                  originalConfidence: elementLocation.confidence,
-                  redirectTo: textMatch.path,
-                  lineNumber: textMatch.lineNumber
+                  originalScore: currentFileScore,
+                  redirectTo: bestMatch.path,
+                  redirectScore: bestMatch.score,
+                  matchedTexts: bestMatch.matchedTexts
                 });
                 
-                // Switch target file to where the text actually is
+                // Switch target file to where most text content lives
                 actualTargetFile = {
-                  path: textMatch.path,
-                  content: textMatch.content
+                  path: bestMatch.path,
+                  content: bestMatch.content
                 };
+                
+                // Find a line with matched text for element location
+                const lines = bestMatch.content.split('\n');
+                const snippetStart = Math.max(0, bestMatch.firstMatchLine - 4);
+                const snippetEnd = Math.min(lines.length, bestMatch.firstMatchLine + 5);
+                
                 elementLocation = {
-                  lineNumber: textMatch.lineNumber,
-                  snippet: textMatch.snippet,
+                  lineNumber: bestMatch.firstMatchLine,
+                  snippet: lines.slice(snippetStart, snippetEnd).join('\n'),
                   confidence: 'high',
-                  matchedBy: `textContent in imported file "${textToFind.substring(0, 30)}..."`
+                  matchedBy: `text scoring: ${bestMatch.score} matches in imported file`
                 };
               }
             }

package/package.json

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