sonance-brand-mcp 1.3.63 → 1.3.65

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

@@ -4,6 +4,7 @@ import * as path from "path";
 import Anthropic from "@anthropic-ai/sdk";
 import { randomUUID } from "crypto";
 import { discoverTheme } from "./theme-discovery";
+import * as babelParser from "@babel/parser";
 
 /**
  * Sonance DevTools API - Apply-First Vision Mode
@@ -29,6 +30,10 @@ interface VisionFocusedElement {
     height: number;
   };
   description?: string;
+  /** The actual text content of the element (e.g., "REFRESH", "ADD PROCESS") */
+  textContent?: string;
+  /** The className string of the element for pattern matching */
+  className?: string;
 }
 
 interface VisionFileModification {
@@ -82,6 +87,39 @@ function debugLog(message: string, data?: unknown) {
   }
 }
 
+/**
+ * AST-based syntax validation using Babel parser
+ * This catches actual syntax errors, not just tag counting
+ */
+function validateSyntaxWithAST(content: string, filePath: string): { valid: boolean; error?: string } {
+  // Only validate JSX/TSX files
+  if (!filePath.endsWith('.tsx') && !filePath.endsWith('.jsx') && !filePath.endsWith('.ts') && !filePath.endsWith('.js')) {
+    return { valid: true };
+  }
+  
+  try {
+    const isTypeScript = filePath.endsWith('.tsx') || filePath.endsWith('.ts');
+    const hasJsx = filePath.endsWith('.tsx') || filePath.endsWith('.jsx');
+    
+    const plugins: babelParser.ParserPlugin[] = [];
+    if (isTypeScript) plugins.push('typescript');
+    if (hasJsx) plugins.push('jsx');
+    
+    babelParser.parse(content, {
+      sourceType: 'module',
+      plugins,
+    });
+    return { valid: true };
+  } catch (e: unknown) {
+    const error = e as { message?: string; loc?: { line: number; column: number } };
+    const location = error.loc ? ` at line ${error.loc.line}, column ${error.loc.column}` : '';
+    return { 
+      valid: false, 
+      error: `Syntax error in ${filePath}${location}: ${error.message || 'Unknown parse error'}` 
+    };
+  }
+}
+
 /**
  * Result of LLM screenshot analysis for smart file discovery
  */
@@ -176,10 +214,14 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
  * This helps identify which file actually contains the element the user clicked on
  * 
  * CURSOR-STYLE: Search file CONTENTS for patterns, not just file names
+ * 
+ * @param phase2aMatches - File paths that Phase 2a identified by component name matching visible text
+ *                         These get a MASSIVE bonus because they're contextually relevant
  */
 function findFilesContainingElement(
   focusedElements: VisionFocusedElement[] | undefined,
-  candidateFiles: { path: string; content: string }[]
+  candidateFiles: { path: string; content: string }[],
+  phase2aMatches: string[] = [] // Files that Phase 2a identified by component name
 ): { path: string; score: number; matches: string[] }[] {
   if (!focusedElements || focusedElements.length === 0) {
     return [];
@@ -191,7 +233,13 @@ function findFilesContainingElement(
     let score = 0;
     const matches: string[] = [];
     const content = file.content;
-    const contentLower = content.toLowerCase();
+
+    // HIGHEST VALUE: Phase 2a identified this file by matching component name to visible text
+    // This means the LLM saw "ProcessRow" in the screenshot and this file is ProcessRow.tsx
+    if (phase2aMatches.includes(file.path)) {
+      score += 200;
+      matches.push('Phase2a component match');
+    }
 
     for (const el of focusedElements) {
       // Extract element type from the name (e.g., "button #123" -> "button")
@@ -216,28 +264,42 @@ function findFilesContainingElement(
         matches.push(`defines ${capitalizedType}`);
       }
 
-      // MEDIUM VALUE: JSX usage of this element type (rendered in this file)
-      const jsxTagPattern = new RegExp(`<${capitalizedType}[\\s/>]`, 'g');
-      const jsxMatches = content.match(jsxTagPattern);
-      if (jsxMatches) {
-        score += 20 * jsxMatches.length;
-        matches.push(`<${capitalizedType}> x${jsxMatches.length}`);
-      }
-
-      // MEDIUM VALUE: HTML tag usage
-      const htmlTagPattern = new RegExp(`<${elementType}[\\s>]`, 'gi');
-      const htmlMatches = content.match(htmlTagPattern);
-      if (htmlMatches) {
-        score += 10 * htmlMatches.length;
-        matches.push(`<${elementType}> x${htmlMatches.length}`);
+      // NOTE: We intentionally DO NOT count buttons, onClick handlers, or JSX tags
+      // because files with MORE of these are often "kitchen sink" components,
+      // not the focused component the user is looking at.
+      // Instead, we rely on Phase 2a matches and textContent matching.
+
+      // 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) {
+        // Search for the text in JSX patterns like >REFRESH< or {`REFRESH`} or {"REFRESH"}
+        const textPatterns = [
+          `>${el.textContent}<`,           // JSX text content
+          `"${el.textContent}"`,           // String literal
+          `'${el.textContent}'`,           // Single-quoted string
+          `\`${el.textContent}\``,         // Template literal
+        ];
+        
+        for (const pattern of textPatterns) {
+          if (content.includes(pattern)) {
+            score += 150; // Very high - exact match!
+            matches.push(`contains "${el.textContent.substring(0, 20)}"`);
+            break; // Only add once per element
+          }
+        }
       }
 
-      // LOW VALUE: Event handlers (onClick, onPress, etc.)
-      if (elementType === "button" || componentType === "button") {
-        const clickHandlers = content.match(/onClick\s*=/gi);
-        if (clickHandlers) {
-          score += 5 * clickHandlers.length;
-          matches.push(`onClick x${clickHandlers.length}`);
+      // MEDIUM VALUE: className pattern match
+      // If the file contains the same className string, it likely defines this element
+      if (el.className && el.className.length >= 10) {
+        // Extract the first few unique class names (not all to avoid noise)
+        const classNames = el.className.split(/\s+/).filter(c => c.length > 3).slice(0, 5);
+        for (const cls of classNames) {
+          if (content.includes(cls)) {
+            score += 25;
+            matches.push(`has class "${cls.substring(0, 20)}"`);
+            break; // Only add once per element
+          }
         }
       }
 
@@ -412,7 +474,7 @@ function searchFilesSmart(
   analysis: ScreenshotAnalysis,
   projectRoot: string,
   maxFiles: number = 10
-): { path: string; content: string; score: number }[] {
+): { path: string; content: string; score: number; filenameMatch: boolean }[] {
   const { visibleText, componentNames, codePatterns } = analysis;
   
   // Combine all search terms
@@ -534,7 +596,7 @@ function searchFilesSmart(
     }))
   });
 
-  return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
+  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.
@@ -678,10 +740,19 @@ export async function POST(request: Request) {
           const searchResults = searchFilesSmart(analysis, projectRoot, 10);
           smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
           
+          // Extract Phase 2a matches - files identified by component name matching visible text
+          // These are contextually relevant (e.g., "ProcessRow" seen in screenshot -> ProcessRow.tsx)
+          const phase2aMatches = searchResults
+            .filter(r => r.filenameMatch)
+            .map(r => r.path);
+          
+          debugLog("Phase 2a component-name matches", { phase2aMatches });
+          
           // PHASE 2.5: Find which files contain the focused element
           const focusedElementHints = findFilesContainingElement(
             focusedElements,
-            searchResults.map(r => ({ path: r.path, content: r.content }))
+            searchResults.map(r => ({ path: r.path, content: r.content })),
+            phase2aMatches // Pass Phase 2a matches for massive bonus
           );
           
           if (focusedElementHints.length > 0) {
@@ -1199,32 +1270,17 @@ This is better than generating patches with made-up code.`,
             console.log(`[Apply-First] All ${mod.patches.length} patches applied successfully to ${mod.filePath}`);
           }
           
-          // SYNTAX VALIDATION: Check for common JSX/HTML tag mismatches
-          // This catches cases where the LLM changes opening tags but not closing tags
-          if (mod.filePath.endsWith('.tsx') || mod.filePath.endsWith('.jsx')) {
-            const openDivs = (modifiedContent.match(/<div[\s>]/g) || []).length;
-            const closeDivs = (modifiedContent.match(/<\/div>/g) || []).length;
-            const openSpans = (modifiedContent.match(/<span[\s>]/g) || []).length;
-            const closeSpans = (modifiedContent.match(/<\/span>/g) || []).length;
-            
-            if (openDivs !== closeDivs || openSpans !== closeSpans) {
-              debugLog("SYNTAX WARNING: Tag mismatch detected", {
-                filePath: mod.filePath,
-                divs: { open: openDivs, close: closeDivs },
-                spans: { open: openSpans, close: closeSpans },
-              });
-              console.warn(`[Apply-First] ⚠️ SYNTAX WARNING: Tag mismatch in ${mod.filePath}`);
-              console.warn(`[Apply-First]   divs: ${openDivs} open, ${closeDivs} close`);
-              console.warn(`[Apply-First]   spans: ${openSpans} open, ${closeSpans} close`);
-              
-              // If there's a significant mismatch, reject the change
-              const divDiff = Math.abs(openDivs - closeDivs);
-              const spanDiff = Math.abs(openSpans - closeSpans);
-              if (divDiff > 0 || spanDiff > 0) {
-                patchErrors.push(`${mod.filePath}: LLM introduced syntax error - tag mismatch detected (${divDiff} div, ${spanDiff} span). Change rejected.`);
-            continue;
-              }
-            }
+          // AST VALIDATION: Use Babel parser to catch actual syntax errors
+          // This is more accurate than tag counting and catches real issues
+          const syntaxValidation = validateSyntaxWithAST(modifiedContent, mod.filePath);
+          if (!syntaxValidation.valid) {
+            debugLog("SYNTAX ERROR: AST validation failed", {
+              filePath: mod.filePath,
+              error: syntaxValidation.error,
+            });
+            console.warn(`[Apply-First] ⚠️ SYNTAX ERROR: ${syntaxValidation.error}`);
+            patchErrors.push(`${mod.filePath}: ${syntaxValidation.error}`);
+            continue; // Skip this file, trigger retry
           }
         } else {
           // No patches - skip

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

@@ -3,6 +3,7 @@ import * as fs from "fs";
 import * as path from "path";
 import Anthropic from "@anthropic-ai/sdk";
 import { discoverTheme } from "../sonance-vision-apply/theme-discovery";
+import * as babelParser from "@babel/parser";
 
 /**
  * Sonance DevTools API - Vision Mode Editor
@@ -28,6 +29,10 @@ interface VisionFocusedElement {
     height: number;
   };
   description?: string;
+  /** The actual text content of the element (e.g., "REFRESH", "ADD PROCESS") */
+  textContent?: string;
+  /** The className string of the element for pattern matching */
+  className?: string;
 }
 
 interface VisionFileModification {
@@ -78,6 +83,39 @@ function debugLog(message: string, data?: unknown) {
   }
 }
 
+/**
+ * AST-based syntax validation using Babel parser
+ * This catches actual syntax errors, not just tag counting
+ */
+function validateSyntaxWithAST(content: string, filePath: string): { valid: boolean; error?: string } {
+  // Only validate JSX/TSX files
+  if (!filePath.endsWith('.tsx') && !filePath.endsWith('.jsx') && !filePath.endsWith('.ts') && !filePath.endsWith('.js')) {
+    return { valid: true };
+  }
+  
+  try {
+    const isTypeScript = filePath.endsWith('.tsx') || filePath.endsWith('.ts');
+    const hasJsx = filePath.endsWith('.tsx') || filePath.endsWith('.jsx');
+    
+    const plugins: babelParser.ParserPlugin[] = [];
+    if (isTypeScript) plugins.push('typescript');
+    if (hasJsx) plugins.push('jsx');
+    
+    babelParser.parse(content, {
+      sourceType: 'module',
+      plugins,
+    });
+    return { valid: true };
+  } catch (e: unknown) {
+    const error = e as { message?: string; loc?: { line: number; column: number } };
+    const location = error.loc ? ` at line ${error.loc.line}, column ${error.loc.column}` : '';
+    return { 
+      valid: false, 
+      error: `Syntax error in ${filePath}${location}: ${error.message || 'Unknown parse error'}` 
+    };
+  }
+}
+
 /**
  * Result of LLM screenshot analysis for smart file discovery
  */
@@ -172,10 +210,14 @@ Be smart - use your knowledge of React patterns to make educated guesses about c
  * This helps identify which file actually contains the element the user clicked on
  * 
  * CURSOR-STYLE: Search file CONTENTS for patterns, not just file names
+ * 
+ * @param phase2aMatches - File paths that Phase 2a identified by component name matching visible text
+ *                         These get a MASSIVE bonus because they're contextually relevant
  */
 function findFilesContainingElement(
   focusedElements: VisionFocusedElement[] | undefined,
-  candidateFiles: { path: string; content: string }[]
+  candidateFiles: { path: string; content: string }[],
+  phase2aMatches: string[] = [] // Files that Phase 2a identified by component name
 ): { path: string; score: number; matches: string[] }[] {
   if (!focusedElements || focusedElements.length === 0) {
     return [];
@@ -187,7 +229,13 @@ function findFilesContainingElement(
     let score = 0;
     const matches: string[] = [];
     const content = file.content;
-    const contentLower = content.toLowerCase();
+
+    // HIGHEST VALUE: Phase 2a identified this file by matching component name to visible text
+    // This means the LLM saw "ProcessRow" in the screenshot and this file is ProcessRow.tsx
+    if (phase2aMatches.includes(file.path)) {
+      score += 200;
+      matches.push('Phase2a component match');
+    }
 
     for (const el of focusedElements) {
       // Extract element type from the name (e.g., "button #123" -> "button")
@@ -212,28 +260,42 @@ function findFilesContainingElement(
         matches.push(`defines ${capitalizedType}`);
       }
 
-      // MEDIUM VALUE: JSX usage of this element type (rendered in this file)
-      const jsxTagPattern = new RegExp(`<${capitalizedType}[\\s/>]`, 'g');
-      const jsxMatches = content.match(jsxTagPattern);
-      if (jsxMatches) {
-        score += 20 * jsxMatches.length;
-        matches.push(`<${capitalizedType}> x${jsxMatches.length}`);
-      }
-
-      // MEDIUM VALUE: HTML tag usage
-      const htmlTagPattern = new RegExp(`<${elementType}[\\s>]`, 'gi');
-      const htmlMatches = content.match(htmlTagPattern);
-      if (htmlMatches) {
-        score += 10 * htmlMatches.length;
-        matches.push(`<${elementType}> x${htmlMatches.length}`);
+      // NOTE: We intentionally DO NOT count buttons, onClick handlers, or JSX tags
+      // because files with MORE of these are often "kitchen sink" components,
+      // not the focused component the user is looking at.
+      // Instead, we rely on Phase 2a matches and textContent matching.
+
+      // 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) {
+        // Search for the text in JSX patterns like >REFRESH< or {`REFRESH`} or {"REFRESH"}
+        const textPatterns = [
+          `>${el.textContent}<`,           // JSX text content
+          `"${el.textContent}"`,           // String literal
+          `'${el.textContent}'`,           // Single-quoted string
+          `\`${el.textContent}\``,         // Template literal
+        ];
+        
+        for (const pattern of textPatterns) {
+          if (content.includes(pattern)) {
+            score += 150; // Very high - exact match!
+            matches.push(`contains "${el.textContent.substring(0, 20)}"`);
+            break; // Only add once per element
+          }
+        }
       }
 
-      // LOW VALUE: Event handlers (onClick, onPress, etc.)
-      if (elementType === "button" || componentType === "button") {
-        const clickHandlers = content.match(/onClick\s*=/gi);
-        if (clickHandlers) {
-          score += 5 * clickHandlers.length;
-          matches.push(`onClick x${clickHandlers.length}`);
+      // MEDIUM VALUE: className pattern match
+      // If the file contains the same className string, it likely defines this element
+      if (el.className && el.className.length >= 10) {
+        // Extract the first few unique class names (not all to avoid noise)
+        const classNames = el.className.split(/\s+/).filter(c => c.length > 3).slice(0, 5);
+        for (const cls of classNames) {
+          if (content.includes(cls)) {
+            score += 25;
+            matches.push(`has class "${cls.substring(0, 20)}"`);
+            break; // Only add once per element
+          }
         }
       }
 
@@ -408,7 +470,7 @@ function searchFilesSmart(
   analysis: ScreenshotAnalysis,
   projectRoot: string,
   maxFiles: number = 10
-): { path: string; content: string; score: number }[] {
+): { path: string; content: string; score: number; filenameMatch: boolean }[] {
   const { visibleText, componentNames, codePatterns } = analysis;
   
   // Combine all search terms
@@ -530,7 +592,7 @@ function searchFilesSmart(
     }))
   });
 
-  return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score }));
+  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.
@@ -647,10 +709,19 @@ export async function POST(request: Request) {
           const searchResults = searchFilesSmart(analysis, projectRoot, 10);
           smartSearchFiles = searchResults.map(r => ({ path: r.path, content: r.content }));
           
+          // Extract Phase 2a matches - files identified by component name matching visible text
+          // These are contextually relevant (e.g., "ProcessRow" seen in screenshot -> ProcessRow.tsx)
+          const phase2aMatches = searchResults
+            .filter(r => r.filenameMatch)
+            .map(r => r.path);
+          
+          debugLog("Phase 2a component-name matches", { phase2aMatches });
+          
           // PHASE 2.5: Find which files contain the focused element
           const focusedElementHints = findFilesContainingElement(
             focusedElements,
-            searchResults.map(r => ({ path: r.path, content: r.content }))
+            searchResults.map(r => ({ path: r.path, content: r.content })),
+            phase2aMatches // Pass Phase 2a matches for massive bonus
           );
           
           if (focusedElementHints.length > 0) {
@@ -1172,6 +1243,18 @@ This is better than generating patches with made-up code.`,
             modifiedContent = patchResult.modifiedContent;
             console.log(`[Vision Mode] All ${mod.patches.length} patches applied successfully to ${mod.filePath}`);
           }
+          
+          // AST VALIDATION: Use Babel parser to catch actual syntax errors
+          const syntaxValidation = validateSyntaxWithAST(modifiedContent, mod.filePath);
+          if (!syntaxValidation.valid) {
+            debugLog("SYNTAX ERROR: AST validation failed", {
+              filePath: mod.filePath,
+              error: syntaxValidation.error,
+            });
+            console.warn(`[Vision Mode] ⚠️ SYNTAX ERROR: ${syntaxValidation.error}`);
+            patchErrors.push(`${mod.filePath}: ${syntaxValidation.error}`);
+            continue; // Skip this file, trigger retry
+          }
         } else {
           // No patches - skip
           console.warn(`[Vision Mode] No patches for ${mod.filePath}`);

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

@@ -787,7 +787,11 @@ export function SonanceDevTools() {
                 el.setAttribute("data-sonance-variant", variantId);
               }
 
-              newTagged.push({ name, rect, type: "component", variantId });
+              // Capture textContent and className for dynamic element matching
+              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 });
             }
           }
         });
@@ -826,7 +830,11 @@ export function SonanceDevTools() {
                 el.setAttribute("data-sonance-name", genericName);
               }
 
-              newTagged.push({ name: genericName, rect, type: "component", variantId });
+              // Capture textContent and className for dynamic element matching
+              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 });
             }
           });
         });
@@ -1017,6 +1025,9 @@ export function SonanceDevTools() {
         width: element.rect.width,
         height: element.rect.height,
       },
+      // NEW: Capture text and className for dynamic file matching
+      textContent: element.textContent,
+      className: element.className,
     };
 
     setVisionFocusedElements((prev) => {

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

@@ -22,8 +22,10 @@ export interface DetectedElement {
   logoId?: string;
   /** Unique ID for text elements (for selection/editing) */
   textId?: string;
-  /** The actual text content (for text elements) */
+  /** The actual text content (for all elements - button text, link text, etc.) */
   textContent?: string;
+  /** The className string for pattern matching in code */
+  className?: string;
   /** Component variant ID (hash of styles/classes) to distinguish visual styles */
   variantId?: string;
 }
@@ -220,6 +222,10 @@ export interface VisionFocusedElement {
     height: number;
   };
   description?: string;
+  /** The actual text content of the element (e.g., "REFRESH", "ADD PROCESS") */
+  textContent?: string;
+  /** The className string of the element for pattern matching */
+  className?: string;
 }
 
 export interface VisionEditRequest {

package/package.json

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