sonance-brand-mcp 1.3.21 → 1.3.24

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

@@ -60,27 +60,39 @@ const VISION_SYSTEM_PROMPT = `You are a React/Tailwind CSS expert with vision ca
 You can see screenshots of web pages and understand their visual layout, then modify code to implement requested changes.
 
 ═══════════════════════════════════════════════════════════════════════════════
-CRITICAL RULES
+ABSOLUTE RULES - VIOLATION WILL BREAK THE APPLICATION
 ═══════════════════════════════════════════════════════════════════════════════
 
-**ANALYSIS:**
-1. CAREFULLY analyze the screenshot to understand the current visual state
-2. Identify elements mentioned in the user's request
-3. Understand the current styling and layout
-4. Consider how changes will affect the overall design
-
-**PRESERVATION RULES:**
-5. NEVER delete or remove existing content, children, or JSX elements
-6. NEVER change component structure unless specifically requested
-7. NEVER modify TypeScript types, imports, or exports unless necessary
-8. NEVER remove data-sonance-* attributes
+**SURGICAL EDITING (MOST CRITICAL):**
+1. You are making SURGICAL EDITS, not rewriting files
+2. Change ONLY the specific lines that need modification
+3. The modified file MUST have approximately the same line count as the original
+4. If original file has 200 lines, modified file should have ~195-210 lines
+5. NEVER rewrite a file from scratch - this destroys the application
+
+**FILE RULES:**
+6. You may ONLY edit files that are provided in the PAGE CONTEXT section
+7. NEVER create new files - only modify existing ones shown to you
+8. The filePath in your response MUST exactly match one of the provided file paths
+
+**PRESERVATION RULES (ZERO TOLERANCE):**
+9. NEVER delete or remove existing functions, hooks, state, or logic
+10. NEVER remove imports - you may only ADD imports if needed
+11. NEVER remove useEffect, useState, useCallback, or other React hooks
+12. NEVER remove API calls, fetch requests, or data loading logic
+13. NEVER remove error handling, loading states, or conditional rendering
+14. NEVER remove data-sonance-* attributes
+15. NEVER change component structure unless specifically requested
+16. NEVER modify TypeScript types or interfaces unless specifically requested
 
 **CHANGE RULES:**
-9. Make ONLY the changes requested by the user
-10. Modify the minimum amount of code necessary
-11. Use semantic Tailwind classes (bg-primary, text-foreground, etc.)
-12. Maintain dark mode compatibility with CSS variables
-13. Keep the cn() utility for className merging
+17. Make ONLY the changes requested by the user
+18. Modify the MINIMUM amount of code necessary
+19. Keep all existing className values and ADD to them if needed
+20. Use semantic Tailwind classes (bg-primary, text-foreground, etc.)
+21. Maintain dark mode compatibility with CSS variables
+22. Keep the cn() utility for className merging
+23. CRITICAL: You MUST return the FULL file content in "modifiedContent". Do NOT use comments like "// ... existing code ..." or "// ... rest of file ...". Return every single line of code, even if unchanged.
 
 **SONANCE BRAND COLORS:**
 - Charcoal: #333F48, #343D46 (primary)
@@ -96,9 +108,16 @@ The JSON must include:
 - "reasoning": Brief explanation of what you see in the screenshot and your plan
 - "modifications": Array of file modifications, each with:
   - "filePath": Path to the file
-  - "modifiedContent": Complete updated file content
+  - "modifiedContent": Complete updated file content (MUST BE FULL CONTENT, NO TRUNCATION)
   - "explanation": What changed in this file
-- "explanation": Overall summary of changes`;
+- "explanation": Overall summary of changes
+
+**EXAMPLE OF CORRECT EDIT:**
+If user asks to "make buttons smaller", you should:
+- Find the button elements in the code
+- Change ONLY the size-related classes (e.g., h-10 -> h-8, px-4 -> px-3)
+- Keep ALL other code exactly the same
+- Return the FULL file with this tiny change`;
 
 export async function POST(request: Request) {
   // Only allow in development
@@ -234,12 +253,19 @@ GLOBALS.CSS (relevant theme variables):
 ${pageContext.globalsCSS.substring(0, 2000)}${pageContext.globalsCSS.length > 2000 ? "\n/* ... (truncated) */" : ""}
 \`\`\`
 
+VALID FILES YOU MAY EDIT:
+${pageContext.pageFile ? `- ${pageContext.pageFile}` : ""}
+${pageContext.componentSources.map((c) => `- ${c.path}`).join("\n")}
+
 INSTRUCTIONS:
 1. Look at the screenshot and identify elements mentioned in the user's request
 2. Review the code to understand current implementation
-3. Determine which files need modifications
-4. Generate complete modified code for each file
-5. Return as JSON in the specified format`;
+3. Make SURGICAL EDITS - change only the specific lines needed
+4. PRESERVE all existing logic, hooks, API calls, and error handling
+5. Return the FULL file content (no truncation, no "// ... existing ..." comments)
+6. Only use file paths from the VALID FILES list above
+
+CRITICAL: Your modified file should have approximately the same number of lines as the original. If the original has 200 lines and your output has 50 lines, you have made a mistake.`;
 
       messageContent.push({
         type: "text",
@@ -320,6 +346,9 @@ INSTRUCTIONS:
 
       // Read original content and prepare modifications
       const modifications: VisionFileModification[] = [];
+      const validationErrors: string[] = [];
+      const validationWarnings: string[] = [];
+      
       for (const mod of aiResponse.modifications) {
         const fullPath = path.join(projectRoot, mod.filePath);
         let originalContent = "";
@@ -327,6 +356,18 @@ INSTRUCTIONS:
           originalContent = fs.readFileSync(fullPath, "utf-8");
         }
 
+        // Validate the modification
+        const validation = validateModification(originalContent, mod.modifiedContent, mod.filePath);
+        
+        if (!validation.valid) {
+          validationErrors.push(validation.error || "Unknown validation error");
+          continue; // Skip this modification
+        }
+        
+        if (validation.warnings.length > 0) {
+          validationWarnings.push(...validation.warnings.map(w => `${mod.filePath}: ${w}`));
+        }
+
         modifications.push({
           filePath: mod.filePath,
           originalContent,
@@ -336,6 +377,23 @@ INSTRUCTIONS:
         });
       }
 
+      // If all modifications failed validation, return error
+      if (validationErrors.length > 0 && modifications.length === 0) {
+        console.error("All AI modifications failed validation:", validationErrors);
+        return NextResponse.json(
+          {
+            success: false,
+            error: validationErrors.join("\n\n"),
+          },
+          { status: 400 }
+        );
+      }
+
+      // Log warnings for review
+      if (validationWarnings.length > 0) {
+        console.warn("Vision apply validation warnings:", validationWarnings);
+      }
+
       // Create backups and apply changes atomically
       const applyResult = await applyChangesWithBackup(
         modifications,
@@ -650,3 +708,105 @@ function generateSimpleDiff(original: string, modified: string): string {
 
   return diff.join("\n");
 }
+
+/**
+ * Validate that AI modifications are surgical edits, not complete rewrites
+ */
+interface ValidationResult {
+  valid: boolean;
+  error?: string;
+  warnings: string[];
+}
+
+function validateModification(
+  originalContent: string,
+  modifiedContent: string,
+  filePath: string
+): ValidationResult {
+  const warnings: string[] = [];
+  
+  // Skip validation for new files (no original content)
+  if (!originalContent || originalContent.trim() === "") {
+    return { valid: true, warnings: ["New file - no original to compare"] };
+  }
+
+  const originalLines = originalContent.split("\n");
+  const modifiedLines = modifiedContent.split("\n");
+  
+  // Check 1: Truncation detection - look for placeholder comments
+  const truncationPatterns = [
+    /\/\/\s*\.\.\.\s*existing/i,
+    /\/\/\s*\.\.\.\s*rest\s*of/i,
+    /\/\/\s*\.\.\.\s*more\s*code/i,
+    /\/\*\s*\.\.\.\s*\*\//,
+    /\/\/\s*\.\.\./,
+  ];
+  
+  for (const pattern of truncationPatterns) {
+    if (pattern.test(modifiedContent)) {
+      return {
+        valid: false,
+        error: `File ${filePath} contains truncation placeholder (e.g., "// ... existing code"). The AI must return the complete file content. Please try again.`,
+        warnings,
+      };
+    }
+  }
+  
+  // Check 2: Line count shrinkage - reject if file shrinks by more than 30%
+  const lineDelta = modifiedLines.length - originalLines.length;
+  const shrinkagePercent = (lineDelta / originalLines.length) * 100;
+  
+  if (shrinkagePercent < -30) {
+    return {
+      valid: false,
+      error: `File ${filePath} shrank from ${originalLines.length} to ${modifiedLines.length} lines (${Math.abs(shrinkagePercent).toFixed(0)}% reduction). This suggests the AI rewrote the file instead of making surgical edits. Please try a more specific request.`,
+      warnings,
+    };
+  }
+  
+  if (shrinkagePercent < -15) {
+    warnings.push(`File shrank by ${Math.abs(shrinkagePercent).toFixed(0)}% - review carefully`);
+  }
+  
+  // Check 3: Change percentage - warn if too many lines are different
+  let changedLines = 0;
+  const minLines = Math.min(originalLines.length, modifiedLines.length);
+  
+  for (let i = 0; i < minLines; i++) {
+    if (originalLines[i] !== modifiedLines[i]) {
+      changedLines++;
+    }
+  }
+  
+  // Add lines that were added or removed
+  changedLines += Math.abs(originalLines.length - modifiedLines.length);
+  
+  const changePercent = (changedLines / originalLines.length) * 100;
+  
+  if (changePercent > 50) {
+    return {
+      valid: false,
+      error: `File ${filePath} has ${changePercent.toFixed(0)}% of lines changed. This suggests the AI rewrote the file instead of making surgical edits. For safety, this change has been rejected. Please try a more specific request.`,
+      warnings,
+    };
+  }
+  
+  if (changePercent > 30) {
+    warnings.push(`${changePercent.toFixed(0)}% of lines changed - larger than expected for a surgical edit`);
+  }
+  
+  // Check 4: Import preservation - ensure imports aren't removed
+  const importRegex = /^import\s+/gm;
+  const originalImports = (originalContent.match(importRegex) || []).length;
+  const modifiedImports = (modifiedContent.match(importRegex) || []).length;
+  
+  if (modifiedImports < originalImports * 0.5 && originalImports > 2) {
+    return {
+      valid: false,
+      error: `File ${filePath} went from ${originalImports} imports to ${modifiedImports}. Imports should not be removed. Please try again.`,
+      warnings,
+    };
+  }
+  
+  return { valid: true, warnings };
+}

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

@@ -61,33 +61,40 @@ const VISION_SYSTEM_PROMPT = `You are a React/Tailwind CSS expert with vision ca
 You can see screenshots of web pages and understand their visual layout, then modify code to implement requested changes.
 
 ═══════════════════════════════════════════════════════════════════════════════
-CRITICAL RULES
+ABSOLUTE RULES - VIOLATION WILL BREAK THE APPLICATION
 ═══════════════════════════════════════════════════════════════════════════════
 
-**FILE RULES (MOST IMPORTANT):**
-1. You may ONLY edit files that are provided in the PAGE CONTEXT section
-2. NEVER create new files - only modify existing ones shown to you
-3. The filePath in your response MUST exactly match one of the provided file paths
-4. If you cannot find the right file to edit, explain this in your response instead of creating a new file
-
-**ANALYSIS:**
-5. CAREFULLY analyze the screenshot to understand the current visual state
-6. Identify elements mentioned in the user's request
-7. Understand the current styling and layout
-8. Consider how changes will affect the overall design
-
-**PRESERVATION RULES:**
-9. NEVER delete or remove existing content, children, or JSX elements
-10. NEVER change component structure unless specifically requested
-11. NEVER modify TypeScript types, imports, or exports unless necessary
-12. NEVER remove data-sonance-* attributes
+**SURGICAL EDITING (MOST CRITICAL):**
+1. You are making SURGICAL EDITS, not rewriting files
+2. Change ONLY the specific lines that need modification
+3. The modified file MUST have approximately the same line count as the original
+4. If original file has 200 lines, modified file should have ~195-210 lines
+5. NEVER rewrite a file from scratch - this destroys the application
+
+**FILE RULES:**
+6. You may ONLY edit files that are provided in the PAGE CONTEXT section
+7. NEVER create new files - only modify existing ones shown to you
+8. The filePath in your response MUST exactly match one of the provided file paths
+9. If you cannot find the right file to edit, explain this in your response instead of creating a new file
+
+**PRESERVATION RULES (ZERO TOLERANCE):**
+10. NEVER delete or remove existing functions, hooks, state, or logic
+11. NEVER remove imports - you may only ADD imports if needed
+12. NEVER remove useEffect, useState, useCallback, or other React hooks
+13. NEVER remove API calls, fetch requests, or data loading logic
+14. NEVER remove error handling, loading states, or conditional rendering
+15. NEVER remove data-sonance-* attributes
+16. NEVER change component structure unless specifically requested
+17. NEVER modify TypeScript types or interfaces unless specifically requested
 
 **CHANGE RULES:**
-13. Make ONLY the changes requested by the user
-14. Modify the minimum amount of code necessary
-15. Use semantic Tailwind classes (bg-primary, text-foreground, etc.)
-16. Maintain dark mode compatibility with CSS variables
-17. Keep the cn() utility for className merging
+18. Make ONLY the changes requested by the user
+19. Modify the MINIMUM amount of code necessary
+20. Keep all existing className values and ADD to them if needed
+21. Use semantic Tailwind classes (bg-primary, text-foreground, etc.)
+22. Maintain dark mode compatibility with CSS variables
+23. Keep the cn() utility for className merging
+24. CRITICAL: You MUST return the FULL file content in "modifiedContent". Do NOT use comments like "// ... existing code ..." or "// ... rest of file ...". Return every single line of code, even if unchanged.
 
 **SONANCE BRAND COLORS:**
 - Charcoal: #333F48, #343D46 (primary)
@@ -103,11 +110,18 @@ The JSON must include:
 - "reasoning": Brief explanation of what you see in the screenshot and your plan
 - "modifications": Array of file modifications, each with:
   - "filePath": Path to the file
-  - "modifiedContent": Complete updated file content
+  - "modifiedContent": Complete updated file content (MUST BE FULL CONTENT, NO TRUNCATION)
   - "explanation": What changed in this file
   - "previewCSS": CSS for live preview (use [data-sonance-name="ComponentName"] selectors)
 - "aggregatedPreviewCSS": Combined CSS for all changes
-- "explanation": Overall summary of changes`;
+- "explanation": Overall summary of changes
+
+**EXAMPLE OF CORRECT EDIT:**
+If user asks to "make buttons smaller", you should:
+- Find the button elements in the code
+- Change ONLY the size-related classes (e.g., h-10 -> h-8, px-4 -> px-3)
+- Keep ALL other code exactly the same
+- Return the FULL file with this tiny change`;
 
 export async function POST(request: Request) {
   // Only allow in development
@@ -369,6 +383,9 @@ CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new
 
       // Read original content and generate diffs for each modification
       const modificationsWithOriginals: VisionFileModification[] = [];
+      const validationErrors: string[] = [];
+      const validationWarnings: string[] = [];
+      
       for (const mod of aiResponse.modifications || []) {
         const fullPath = path.join(projectRoot, mod.filePath);
         let originalContent = "";
@@ -376,6 +393,18 @@ CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new
           originalContent = fs.readFileSync(fullPath, "utf-8");
         }
 
+        // Validate the modification
+        const validation = validateModification(originalContent, mod.modifiedContent, mod.filePath);
+        
+        if (!validation.valid) {
+          validationErrors.push(validation.error || "Unknown validation error");
+          continue; // Skip this modification
+        }
+        
+        if (validation.warnings.length > 0) {
+          validationWarnings.push(...validation.warnings.map(w => `${mod.filePath}: ${w}`));
+        }
+
         modificationsWithOriginals.push({
           filePath: mod.filePath,
           originalContent,
@@ -386,6 +415,23 @@ CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new
         });
       }
 
+      // If all modifications failed validation, return error
+      if (validationErrors.length > 0 && modificationsWithOriginals.length === 0) {
+        console.error("All AI modifications failed validation:", validationErrors);
+        return NextResponse.json(
+          {
+            success: false,
+            error: validationErrors.join("\n\n"),
+          } as VisionEditResponse,
+          { status: 400 }
+        );
+      }
+
+      // Log warnings for review
+      if (validationWarnings.length > 0) {
+        console.warn("Vision edit validation warnings:", validationWarnings);
+      }
+
       // Aggregate preview CSS
       const aggregatedCSS = modificationsWithOriginals
         .filter((m) => m.previewCSS)
@@ -654,3 +700,105 @@ function generateSimpleDiff(original: string, modified: string): string {
 
   return diff.join("\n");
 }
+
+/**
+ * Validate that AI modifications are surgical edits, not complete rewrites
+ */
+interface ValidationResult {
+  valid: boolean;
+  error?: string;
+  warnings: string[];
+}
+
+function validateModification(
+  originalContent: string,
+  modifiedContent: string,
+  filePath: string
+): ValidationResult {
+  const warnings: string[] = [];
+  
+  // Skip validation for new files (no original content)
+  if (!originalContent || originalContent.trim() === "") {
+    return { valid: true, warnings: ["New file - no original to compare"] };
+  }
+
+  const originalLines = originalContent.split("\n");
+  const modifiedLines = modifiedContent.split("\n");
+  
+  // Check 1: Truncation detection - look for placeholder comments
+  const truncationPatterns = [
+    /\/\/\s*\.\.\.\s*existing/i,
+    /\/\/\s*\.\.\.\s*rest\s*of/i,
+    /\/\/\s*\.\.\.\s*more\s*code/i,
+    /\/\*\s*\.\.\.\s*\*\//,
+    /\/\/\s*\.\.\./,
+  ];
+  
+  for (const pattern of truncationPatterns) {
+    if (pattern.test(modifiedContent)) {
+      return {
+        valid: false,
+        error: `File ${filePath} contains truncation placeholder (e.g., "// ... existing code"). The AI must return the complete file content. Please try again.`,
+        warnings,
+      };
+    }
+  }
+  
+  // Check 2: Line count shrinkage - reject if file shrinks by more than 30%
+  const lineDelta = modifiedLines.length - originalLines.length;
+  const shrinkagePercent = (lineDelta / originalLines.length) * 100;
+  
+  if (shrinkagePercent < -30) {
+    return {
+      valid: false,
+      error: `File ${filePath} shrank from ${originalLines.length} to ${modifiedLines.length} lines (${Math.abs(shrinkagePercent).toFixed(0)}% reduction). This suggests the AI rewrote the file instead of making surgical edits. Please try a more specific request.`,
+      warnings,
+    };
+  }
+  
+  if (shrinkagePercent < -15) {
+    warnings.push(`File shrank by ${Math.abs(shrinkagePercent).toFixed(0)}% - review carefully`);
+  }
+  
+  // Check 3: Change percentage - warn if too many lines are different
+  let changedLines = 0;
+  const minLines = Math.min(originalLines.length, modifiedLines.length);
+  
+  for (let i = 0; i < minLines; i++) {
+    if (originalLines[i] !== modifiedLines[i]) {
+      changedLines++;
+    }
+  }
+  
+  // Add lines that were added or removed
+  changedLines += Math.abs(originalLines.length - modifiedLines.length);
+  
+  const changePercent = (changedLines / originalLines.length) * 100;
+  
+  if (changePercent > 50) {
+    return {
+      valid: false,
+      error: `File ${filePath} has ${changePercent.toFixed(0)}% of lines changed. This suggests the AI rewrote the file instead of making surgical edits. For safety, this change has been rejected. Please try a more specific request.`,
+      warnings,
+    };
+  }
+  
+  if (changePercent > 30) {
+    warnings.push(`${changePercent.toFixed(0)}% of lines changed - larger than expected for a surgical edit`);
+  }
+  
+  // Check 4: Import preservation - ensure imports aren't removed
+  const importRegex = /^import\s+/gm;
+  const originalImports = (originalContent.match(importRegex) || []).length;
+  const modifiedImports = (modifiedContent.match(importRegex) || []).length;
+  
+  if (modifiedImports < originalImports * 0.5 && originalImports > 2) {
+    return {
+      valid: false,
+      error: `File ${filePath} went from ${originalImports} imports to ${modifiedImports}. Imports should not be removed. Please try again.`,
+      warnings,
+    };
+  }
+  
+  return { valid: true, warnings };
+}

package/dist/assets/dev-tools/panels/ComponentsPanel.tsx

@@ -582,6 +582,9 @@ export function ComponentsPanel({
             )}
 
             {/* AI Chat Interface - hide when any pending edit is present */}
+            {/* Apply-First mode: Files written immediately with backups for instant HMR preview
+                User sees structural + CSS changes live, then clicks Accept or Revert
+                Original files are always backed up and can be restored */}
             {!pendingEdit && !visionPendingEdit && !applyFirstSession && (
               <ChatInterface
                 componentType={selectedComponentType}

package/package.json

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