sonance-brand-mcp 1.3.64 → 1.3.66

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

@@ -3,7 +3,8 @@ import * as fs from "fs";
 import * as path from "path";
 import Anthropic from "@anthropic-ai/sdk";
 import { randomUUID } from "crypto";
-import { discoverTheme } from "./theme-discovery";
+import { discoverTheme, formatThemeForPrompt } from "./theme-discovery";
+import * as babelParser from "@babel/parser";
 
 /**
  * Sonance DevTools API - Apply-First Vision Mode
@@ -86,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
  */
@@ -901,14 +935,18 @@ ${linesWithNumbers}
       // NOTE: We intentionally skip SUPPORTING COMPONENTS to reduce noise
       // The LLM only needs the TARGET file to make accurate edits
 
-      // ========== THEME DISCOVERY (REFERENCE ONLY) ==========
-      // Dynamically discover theme tokens (minimal - just for logging)
+      // ========== THEME DISCOVERY ==========
+      // Discover theme tokens and contrast analysis to help LLM make informed color decisions
       const discoveredTheme = await discoverTheme(projectRoot);
       
       if (discoveredTheme.discoveredFiles.length > 0) {
         debugLog("Theme discovery complete", {
           filesFound: discoveredTheme.discoveredFiles,
         });
+        
+        // Add theme context to the prompt so LLM knows actual color values and safe combinations
+        const themeContext = formatThemeForPrompt(discoveredTheme);
+        textContent += `\n${themeContext}\n`;
       }
 
       // ========== SIMPLIFIED INSTRUCTIONS ==========
@@ -1236,32 +1274,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

@@ -2,7 +2,8 @@ import { NextResponse } from "next/server";
 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 { discoverTheme, formatThemeForPrompt } from "../sonance-vision-apply/theme-discovery";
+import * as babelParser from "@babel/parser";
 
 /**
  * Sonance DevTools API - Vision Mode Editor
@@ -82,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
  */
@@ -870,13 +904,18 @@ ${linesWithNumbers}
       // NOTE: We intentionally skip SUPPORTING COMPONENTS to reduce noise
       // The LLM only needs the TARGET file to make accurate edits
 
-      // Dynamically discover theme tokens (minimal - just for logging)
+      // ========== THEME DISCOVERY ==========
+      // Discover theme tokens and contrast analysis to help LLM make informed color decisions
       const discoveredTheme = await discoverTheme(projectRoot);
       
       if (discoveredTheme.discoveredFiles.length > 0) {
         debugLog("Theme discovery complete", {
           filesFound: discoveredTheme.discoveredFiles,
         });
+        
+        // Add theme context to the prompt so LLM knows actual color values and safe combinations
+        const themeContext = formatThemeForPrompt(discoveredTheme);
+        textContent += `\n${themeContext}\n`;
       }
 
       // ========== SIMPLIFIED INSTRUCTIONS ==========
@@ -1209,6 +1248,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/package.json

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