sonance-brand-mcp 1.3.71 → 1.3.73

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

@@ -34,6 +34,10 @@ interface VisionFocusedElement {
   textContent?: string;
   /** The className string of the element for pattern matching */
   className?: string;
+  /** The element's DOM id attribute for precise code targeting */
+  elementId?: string;
+  /** IDs of child elements for more precise targeting */
+  childIds?: string[];
 }
 
 interface VisionFileModification {
@@ -120,6 +124,52 @@ function validateSyntaxWithAST(content: string, filePath: string): { valid: bool
   }
 }
 
+/**
+ * Search for element ID in file content and return line number
+ * This enables precise targeting of the exact element the user clicked
+ */
+function findElementIdInFile(
+  fileContent: string,
+  elementId: string | undefined,
+  childIds: string[] | undefined
+): { lineNumber: number; matchedId: string; snippet: string } | null {
+  if (!fileContent) return null;
+  
+  const lines = fileContent.split('\n');
+  
+  // Try the element's own ID first
+  if (elementId) {
+    const pattern = new RegExp(`id=["'\`]${elementId}["'\`]`);
+    for (let i = 0; i < lines.length; i++) {
+      if (pattern.test(lines[i])) {
+        return {
+          lineNumber: i + 1,
+          matchedId: elementId,
+          snippet: lines.slice(Math.max(0, i - 2), i + 5).join('\n'),
+        };
+      }
+    }
+  }
+  
+  // Try child IDs
+  if (childIds && childIds.length > 0) {
+    for (const childId of childIds) {
+      const pattern = new RegExp(`id=["'\`]${childId}["'\`]`);
+      for (let i = 0; i < lines.length; i++) {
+        if (pattern.test(lines[i])) {
+          return {
+            lineNumber: i + 1,
+            matchedId: childId,
+            snippet: lines.slice(Math.max(0, i - 2), i + 5).join('\n'),
+          };
+        }
+      }
+    }
+  }
+  
+  return null;
+}
+
 /**
  * Result of LLM screenshot analysis for smart file discovery
  */
@@ -269,6 +319,28 @@ function findFilesContainingElement(
       // not the focused component the user is looking at.
       // Instead, we rely on Phase 2a matches and textContent matching.
 
+      // HIGHEST VALUE: Element ID match - this is THE file if it contains the exact ID
+      // IDs are unique identifiers and provide the most reliable targeting
+      if (el.elementId) {
+        const idPattern = new RegExp(`id=["'\`]${el.elementId}["'\`]`);
+        if (idPattern.test(content)) {
+          score += 500; // VERY HIGH - exact ID match is definitive!
+          matches.push(`contains id="${el.elementId}"`);
+        }
+      }
+      
+      // Also check child IDs
+      if (el.childIds && el.childIds.length > 0) {
+        for (const childId of el.childIds) {
+          const idPattern = new RegExp(`id=["'\`]${childId}["'\`]`);
+          if (idPattern.test(content)) {
+            score += 400; // Very high - child ID match is also definitive
+            matches.push(`contains child id="${childId}"`);
+            break; // Only count once
+          }
+        }
+      }
+
       // 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) {
@@ -497,7 +569,7 @@ function searchFilesSmart(
         results.set(foundPath, { 
           path: foundPath, 
           content, 
-          score: 50, // High base score for filename match
+          score: 1500, // HIGHEST priority - component name matched visible text
           filenameMatch: true 
         });
         debugLog("Phase 2a: Found file by component name", { componentName, foundPath });
@@ -599,17 +671,12 @@ function searchFilesSmart(
   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.
+const VISION_SYSTEM_PROMPT = `You are an expert frontend developer. Edit the code to fulfill the user's request.
 
-RULES:
-1. Make ONLY the exact change the user requested. Do not modify unrelated properties.
-2. Copy code EXACTLY from the file - character for character
-3. Make the SMALLEST possible change
-4. For color changes, just change the className
-5. Do not restructure or reorganize code
+Output ONLY this JSON (no other text):
+{"modifications":[{"filePath":"path","patches":[{"search":"exact original code","replace":"modified code"}]}]}
 
-RESPOND WITH ONLY THIS JSON FORMAT (nothing else):
-{"modifications":[{"filePath":"path","patches":[{"search":"exact code","replace":"changed code"}]}]}`;
+The "search" field must match the file EXACTLY (copy-paste from the code provided).`;
 
 export async function POST(request: Request) {
   // Only allow in development
@@ -864,10 +931,15 @@ export async function POST(request: Request) {
       // Extract recommended file from component sources (to show first, avoid duplication)
       let recommendedFileContent: { path: string; content: string } | null = null;
       if (recommendedFile) {
+        // Check componentSources first
         const idx = pageContext.componentSources.findIndex(c => c.path === recommendedFile.path);
         if (idx !== -1) {
           recommendedFileContent = pageContext.componentSources[idx];
           pageContext.componentSources.splice(idx, 1); // Remove to avoid duplication
+        } 
+        // Fallback: Check if it's the page file itself
+        else if (pageContext.pageFile === recommendedFile.path && pageContext.pageContent) {
+          recommendedFileContent = { path: pageContext.pageFile, content: pageContext.pageContent };
         }
       }
 
@@ -879,18 +951,50 @@ User Request: "${userPrompt}"
 
 `;
 
-      if (focusedElements && focusedElements.length > 0) {
-        textContent += `FOCUSED ELEMENTS (user clicked on these):
-${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}, ${el.coordinates.y})`).join("\n")}
-
-`;
-      }
-
       // ========== TARGET COMPONENT ONLY (with line numbers) ==========
       // CRITICAL: Only include the TARGET file to avoid overwhelming the LLM with noise
       if (recommendedFileContent) {
         const content = recommendedFileContent.content;
         
+        // 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) {
+          for (const el of focusedElements) {
+            idMatch = findElementIdInFile(content, el.elementId, el.childIds);
+            if (idMatch) break;
+          }
+        }
+        
+        // Build focused elements section with precise targeting info
+        if (focusedElements && focusedElements.length > 0) {
+          textContent += `FOCUSED ELEMENTS (user clicked on these):\n`;
+          for (const el of focusedElements) {
+            textContent += `- ${el.name} (${el.type})`;
+            if (el.textContent) {
+              textContent += ` with text "${el.textContent.substring(0, 30)}"`;
+            }
+            textContent += `\n`;
+          }
+          
+          // Add precise targeting if we found an ID match
+          if (idMatch) {
+            textContent += `
+PRECISE TARGET (found by element ID):
+  → ID: "${idMatch.matchedId}"
+  → Line: ${idMatch.lineNumber}
+  → Look for this ID in the code and modify the element that contains it.
+
+`;
+            debugLog("Found element ID in file", {
+              matchedId: idMatch.matchedId,
+              lineNumber: idMatch.lineNumber,
+              file: recommendedFileContent.path,
+            });
+          } else {
+            textContent += `\n`;
+          }
+        }
+        
         // Add line numbers to make it easy for LLM to reference exact code
         const linesWithNumbers = content.split('\n').map((line, i) => 
           `${String(i + 1).padStart(4, ' ')}| ${line}`
@@ -933,8 +1037,33 @@ ${linesWithNumbers}
         usedContext += content.length;
       }
       
-      // NOTE: We intentionally skip SUPPORTING COMPONENTS to reduce noise
-      // The LLM only needs the TARGET file to make accurate edits
+      // ========== KEY UI COMPONENTS ==========
+      // Include UI component definitions (Button, Card, etc.) so LLM knows available variants/props
+      const uiComponentPaths = ['components/ui/button', 'components/ui/card', 'components/ui/input'];
+      const includedUIComponents: string[] = [];
+      
+      for (const comp of pageContext.componentSources) {
+        // Check if this is a UI component we should include
+        const isUIComponent = uiComponentPaths.some(uiPath => comp.path.includes(uiPath));
+        if (isUIComponent && usedContext + comp.content.length < TOTAL_CONTEXT_BUDGET) {
+          // 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 += `
+--- UI Component: ${comp.path} (variants only) ---
+${variantsMatch[0]}
+---
+
+`;
+            includedUIComponents.push(comp.path);
+            usedContext += variantsMatch[0].length + 100;
+          }
+        }
+      }
+      
+      if (includedUIComponents.length > 0) {
+        debugLog("Included UI component definitions", { components: includedUIComponents });
+      }
 
       // ========== THEME DISCOVERY ==========
       // Discover theme tokens and contrast analysis to help LLM make informed color decisions

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

@@ -33,6 +33,10 @@ interface VisionFocusedElement {
   textContent?: string;
   /** The className string of the element for pattern matching */
   className?: string;
+  /** The element's DOM id attribute for precise code targeting */
+  elementId?: string;
+  /** IDs of child elements for more precise targeting */
+  childIds?: string[];
 }
 
 interface VisionFileModification {
@@ -116,6 +120,52 @@ function validateSyntaxWithAST(content: string, filePath: string): { valid: bool
   }
 }
 
+/**
+ * Search for element ID in file content and return line number
+ * This enables precise targeting of the exact element the user clicked
+ */
+function findElementIdInFile(
+  fileContent: string,
+  elementId: string | undefined,
+  childIds: string[] | undefined
+): { lineNumber: number; matchedId: string; snippet: string } | null {
+  if (!fileContent) return null;
+  
+  const lines = fileContent.split('\n');
+  
+  // Try the element's own ID first
+  if (elementId) {
+    const pattern = new RegExp(`id=["'\`]${elementId}["'\`]`);
+    for (let i = 0; i < lines.length; i++) {
+      if (pattern.test(lines[i])) {
+        return {
+          lineNumber: i + 1,
+          matchedId: elementId,
+          snippet: lines.slice(Math.max(0, i - 2), i + 5).join('\n'),
+        };
+      }
+    }
+  }
+  
+  // Try child IDs
+  if (childIds && childIds.length > 0) {
+    for (const childId of childIds) {
+      const pattern = new RegExp(`id=["'\`]${childId}["'\`]`);
+      for (let i = 0; i < lines.length; i++) {
+        if (pattern.test(lines[i])) {
+          return {
+            lineNumber: i + 1,
+            matchedId: childId,
+            snippet: lines.slice(Math.max(0, i - 2), i + 5).join('\n'),
+          };
+        }
+      }
+    }
+  }
+  
+  return null;
+}
+
 /**
  * Result of LLM screenshot analysis for smart file discovery
  */
@@ -265,6 +315,28 @@ function findFilesContainingElement(
       // not the focused component the user is looking at.
       // Instead, we rely on Phase 2a matches and textContent matching.
 
+      // HIGHEST VALUE: Element ID match - this is THE file if it contains the exact ID
+      // IDs are unique identifiers and provide the most reliable targeting
+      if (el.elementId) {
+        const idPattern = new RegExp(`id=["'\`]${el.elementId}["'\`]`);
+        if (idPattern.test(content)) {
+          score += 500; // VERY HIGH - exact ID match is definitive!
+          matches.push(`contains id="${el.elementId}"`);
+        }
+      }
+      
+      // Also check child IDs
+      if (el.childIds && el.childIds.length > 0) {
+        for (const childId of el.childIds) {
+          const idPattern = new RegExp(`id=["'\`]${childId}["'\`]`);
+          if (idPattern.test(content)) {
+            score += 400; // Very high - child ID match is also definitive
+            matches.push(`contains child id="${childId}"`);
+            break; // Only count once
+          }
+        }
+      }
+
       // 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) {
@@ -493,7 +565,7 @@ function searchFilesSmart(
         results.set(foundPath, { 
           path: foundPath, 
           content, 
-          score: 50, // High base score for filename match
+          score: 1500, // HIGHEST priority - component name matched visible text
           filenameMatch: true 
         });
         debugLog("Phase 2a: Found file by component name", { componentName, foundPath });
@@ -595,17 +667,12 @@ function searchFilesSmart(
   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.
+const VISION_SYSTEM_PROMPT = `You are an expert frontend developer. Edit the code to fulfill the user's request.
 
-RULES:
-1. Make ONLY the exact change the user requested. Do not modify unrelated properties.
-2. Copy code EXACTLY from the file - character for character
-3. Make the SMALLEST possible change
-4. For color changes, just change the className
-5. Do not restructure or reorganize code
+Output ONLY this JSON (no other text):
+{"modifications":[{"filePath":"path","patches":[{"search":"exact original code","replace":"modified code"}]}]}
 
-RESPOND WITH ONLY THIS JSON FORMAT (nothing else):
-{"modifications":[{"filePath":"path","patches":[{"search":"exact code","replace":"changed code"}]}]}`;
+The "search" field must match the file EXACTLY (copy-paste from the code provided).`;
 
 export async function POST(request: Request) {
   // Only allow in development
@@ -833,10 +900,15 @@ export async function POST(request: Request) {
       // Extract recommended file from component sources (to show first, avoid duplication)
       let recommendedFileContent: { path: string; content: string } | null = null;
       if (recommendedFile) {
+        // Check componentSources first
         const idx = pageContext.componentSources.findIndex(c => c.path === recommendedFile.path);
         if (idx !== -1) {
           recommendedFileContent = pageContext.componentSources[idx];
           pageContext.componentSources.splice(idx, 1); // Remove to avoid duplication
+        } 
+        // Fallback: Check if it's the page file itself
+        else if (pageContext.pageFile === recommendedFile.path && pageContext.pageContent) {
+          recommendedFileContent = { path: pageContext.pageFile, content: pageContext.pageContent };
         }
       }
 
@@ -848,18 +920,50 @@ User Request: "${userPrompt}"
 
 `;
 
-      if (focusedElements && focusedElements.length > 0) {
-        textContent += `FOCUSED ELEMENTS (user clicked on these):
-${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}, ${el.coordinates.y})`).join("\n")}
-
-`;
-      }
-
       // ========== TARGET COMPONENT ONLY (with line numbers) ==========
       // CRITICAL: Only include the TARGET file to avoid overwhelming the LLM with noise
       if (recommendedFileContent) {
         const content = recommendedFileContent.content;
         
+        // 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) {
+          for (const el of focusedElements) {
+            idMatch = findElementIdInFile(content, el.elementId, el.childIds);
+            if (idMatch) break;
+          }
+        }
+        
+        // Build focused elements section with precise targeting info
+        if (focusedElements && focusedElements.length > 0) {
+          textContent += `FOCUSED ELEMENTS (user clicked on these):\n`;
+          for (const el of focusedElements) {
+            textContent += `- ${el.name} (${el.type})`;
+            if (el.textContent) {
+              textContent += ` with text "${el.textContent.substring(0, 30)}"`;
+            }
+            textContent += `\n`;
+          }
+          
+          // Add precise targeting if we found an ID match
+          if (idMatch) {
+            textContent += `
+PRECISE TARGET (found by element ID):
+  → ID: "${idMatch.matchedId}"
+  → Line: ${idMatch.lineNumber}
+  → Look for this ID in the code and modify the element that contains it.
+
+`;
+            debugLog("Found element ID in file", {
+              matchedId: idMatch.matchedId,
+              lineNumber: idMatch.lineNumber,
+              file: recommendedFileContent.path,
+            });
+          } else {
+            textContent += `\n`;
+          }
+        }
+        
         // Add line numbers to make it easy for LLM to reference exact code
         const linesWithNumbers = content.split('\n').map((line, i) => 
           `${String(i + 1).padStart(4, ' ')}| ${line}`
@@ -902,8 +1006,33 @@ ${linesWithNumbers}
         usedContext += content.length;
       }
       
-      // NOTE: We intentionally skip SUPPORTING COMPONENTS to reduce noise
-      // The LLM only needs the TARGET file to make accurate edits
+      // ========== KEY UI COMPONENTS ==========
+      // Include UI component definitions (Button, Card, etc.) so LLM knows available variants/props
+      const uiComponentPaths = ['components/ui/button', 'components/ui/card', 'components/ui/input'];
+      const includedUIComponents: string[] = [];
+      
+      for (const comp of pageContext.componentSources) {
+        // Check if this is a UI component we should include
+        const isUIComponent = uiComponentPaths.some(uiPath => comp.path.includes(uiPath));
+        if (isUIComponent && usedContext + comp.content.length < TOTAL_CONTEXT_BUDGET) {
+          // 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 += `
+--- UI Component: ${comp.path} (variants only) ---
+${variantsMatch[0]}
+---
+
+`;
+            includedUIComponents.push(comp.path);
+            usedContext += variantsMatch[0].length + 100;
+          }
+        }
+      }
+      
+      if (includedUIComponents.length > 0) {
+        debugLog("Included UI component definitions", { components: includedUIComponents });
+      }
 
       // ========== THEME DISCOVERY ==========
       // Discover theme tokens and contrast analysis to help LLM make informed color decisions

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

@@ -791,7 +791,13 @@ export function SonanceDevTools() {
               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 });
+              // Capture element ID and child IDs for precise code targeting
+              const elementId = el.id || undefined;
+              const childIds = Array.from(el.querySelectorAll('[id]'))
+                .map(child => child.id)
+                .filter(id => id) as string[];
+              
+              newTagged.push({ name, rect, type: "component", variantId, textContent, className, elementId, childIds: childIds.length > 0 ? childIds : undefined });
             }
           }
         });
@@ -834,7 +840,13 @@ export function SonanceDevTools() {
               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 });
+              // Capture element ID and child IDs for precise code targeting
+              const elementId = el.id || undefined;
+              const childIds = Array.from(el.querySelectorAll('[id]'))
+                .map(child => child.id)
+                .filter(id => id) as string[];
+
+              newTagged.push({ name: genericName, rect, type: "component", variantId, textContent, className: elClassName, elementId, childIds: childIds.length > 0 ? childIds : undefined });
             }
           });
         });
@@ -1025,9 +1037,12 @@ export function SonanceDevTools() {
         width: element.rect.width,
         height: element.rect.height,
       },
-      // NEW: Capture text and className for dynamic file matching
+      // Capture text and className for dynamic file matching
       textContent: element.textContent,
       className: element.className,
+      // Capture element ID and child IDs for precise code targeting
+      elementId: element.elementId,
+      childIds: element.childIds,
     };
 
     setVisionFocusedElements((prev) => {
@@ -2393,6 +2408,11 @@ export function SonanceDevTools() {
         colorScheme: "light",
         transform: `translate(${dragPosition.x}px, ${dragPosition.y}px)`,
       }}
+      // Event isolation - prevent clicks from closing popups in the main app
+      onMouseDown={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+      onFocus={(e) => e.stopPropagation()}
+      onBlur={(e) => e.stopPropagation()}
     >
       {/* Header - Draggable */}
       <div 

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

@@ -28,6 +28,10 @@ export interface DetectedElement {
   className?: string;
   /** Component variant ID (hash of styles/classes) to distinguish visual styles */
   variantId?: string;
+  /** The element's DOM id attribute for precise code targeting */
+  elementId?: string;
+  /** IDs of child elements for more precise targeting */
+  childIds?: string[];
 }
 
 // Logo asset from the API
@@ -226,6 +230,10 @@ export interface VisionFocusedElement {
   textContent?: string;
   /** The className string of the element for pattern matching */
   className?: string;
+  /** The element's DOM id attribute for precise code targeting */
+  elementId?: string;
+  /** IDs of child elements for more precise targeting */
+  childIds?: string[];
 }
 
 export interface VisionEditRequest {

package/package.json

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