sonance-brand-mcp 1.3.22 → 1.3.25

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

@@ -55,50 +55,63 @@ interface BackupManifest {
 
 const BACKUP_ROOT = ".sonance-backups";
 
-const VISION_SYSTEM_PROMPT = `You are a React/Tailwind CSS expert with vision capabilities for the Sonance brand system.
+const VISION_SYSTEM_PROMPT = `You are an expert React/TypeScript developer with vision capabilities. You can see screenshots and modify code.
 
-You can see screenshots of web pages and understand their visual layout, then modify code to implement requested changes.
+═══════════════════════════════════════════════════════════════════════════════
+UNDERSTAND THE USER'S REQUEST NATURALLY
+═══════════════════════════════════════════════════════════════════════════════
+
+Read the user's request and do exactly what they ask. You know React, TypeScript, Tailwind CSS, and JSX - use that knowledge naturally.
+
+- If they say "add X", ADD X to the code (don't replace or remove anything else)
+- If they say "change X to Y", find X and change it to Y
+- If they say "make X bigger/smaller/different color", adjust the relevant properties
+- If they say "remove X", remove X
+- If they say "wrap X with Y", add Y as a parent around X
+
+For any change:
+1. Read the code context provided
+2. Understand what the user wants
+3. Generate patches that accomplish exactly that
+4. If adding a component/icon requires an import, include a patch for the import too
+
+Don't overthink - just make the change the user requested.
 
 ═══════════════════════════════════════════════════════════════════════════════
-CRITICAL RULES
+PATCH FORMAT
 ═══════════════════════════════════════════════════════════════════════════════
 
-**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
-
-**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
+Return search/replace patches (NOT full files). The system applies your patches to the original.
+
+**Patch Rules:**
+- "search" must match the original code EXACTLY (including whitespace/indentation)
+- "replace" contains your modified version
+- Include 2-4 lines of context in "search" to make it unique
+- You may ONLY edit files provided in the PAGE CONTEXT section
 
 **SONANCE BRAND COLORS:**
-- Charcoal: #333F48, #343D46 (primary)
-- Silver: #E2E2E2, #D1D1D6 (secondary)
+- Charcoal: #333F48 (primary text)
 - IPORT Orange: #FC4C02
-- IPORT Dark: #0F161D
 - Blaze Blue: #00A3E1
-- Blaze Red: #C02B0A
 
 **RESPONSE FORMAT:**
-Return ONLY a valid JSON object. Do not include any conversational text before or after the JSON.
-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
-  - "explanation": What changed in this file
-- "explanation": Overall summary of changes`;
+Return ONLY valid JSON:
+{
+  "reasoning": "What you understood from the request and your plan",
+  "modifications": [
+    {
+      "filePath": "path/to/file.tsx",
+      "patches": [
+        {
+          "search": "exact code to find",
+          "replace": "the replacement code",
+          "explanation": "what this patch does"
+        }
+      ]
+    }
+  ],
+  "explanation": "summary of changes made"
+}`;
 
 export async function POST(request: Request) {
   // Only allow in development
@@ -234,12 +247,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",
@@ -270,13 +290,15 @@ INSTRUCTIONS:
         );
       }
 
-      // Parse AI response
+      // Parse AI response - now expecting patches instead of full file content
       let aiResponse: {
         reasoning?: string;
         modifications: Array<{
           filePath: string;
-          modifiedContent: string;
-          explanation: string;
+          patches?: Patch[];
+          // Legacy support for modifiedContent (will be deprecated)
+          modifiedContent?: string;
+          explanation?: string;
         }>;
         explanation?: string;
       };
@@ -318,8 +340,10 @@ INSTRUCTIONS:
         });
       }
 
-      // Read original content and prepare modifications
+      // Process modifications - apply patches to get modified content
       const modifications: VisionFileModification[] = [];
+      const patchErrors: string[] = [];
+      
       for (const mod of aiResponse.modifications) {
         const fullPath = path.join(projectRoot, mod.filePath);
         let originalContent = "";
@@ -327,15 +351,77 @@ INSTRUCTIONS:
           originalContent = fs.readFileSync(fullPath, "utf-8");
         }
 
+        let modifiedContent: string;
+        let explanation = mod.explanation || "";
+
+        // Check if AI returned patches (new format) or modifiedContent (legacy)
+        if (mod.patches && mod.patches.length > 0) {
+          // New patch-based approach
+          console.log(`[Apply-First] Applying ${mod.patches.length} patches to ${mod.filePath}`);
+          
+          const patchResult = applyPatches(originalContent, mod.patches);
+          
+          if (!patchResult.success) {
+            const failedMessages = patchResult.failedPatches.map(
+              (f) => `Patch failed: ${f.error}`
+            ).join("\n");
+            patchErrors.push(`${mod.filePath}:\n${failedMessages}`);
+            
+            // If some patches succeeded, use partial result
+            if (patchResult.appliedPatches > 0) {
+              console.warn(`[Apply-First] ${patchResult.appliedPatches}/${mod.patches.length} patches applied to ${mod.filePath}`);
+              modifiedContent = patchResult.modifiedContent;
+              explanation += ` (${patchResult.appliedPatches}/${mod.patches.length} patches applied)`;
+            } else {
+              continue; // Skip this file entirely if no patches worked
+            }
+          } else {
+            modifiedContent = patchResult.modifiedContent;
+            console.log(`[Apply-First] All ${mod.patches.length} patches applied successfully to ${mod.filePath}`);
+          }
+        } else if (mod.modifiedContent) {
+          // Legacy: AI returned full file content
+          console.warn(`[Apply-First] Legacy modifiedContent received for ${mod.filePath} - patch-based format preferred`);
+          modifiedContent = mod.modifiedContent;
+          
+          // Validate the modification using legacy validation
+          const validation = validateModification(originalContent, modifiedContent, mod.filePath);
+          if (!validation.valid) {
+            patchErrors.push(`${mod.filePath}: ${validation.error}`);
+            continue;
+          }
+        } else {
+          // No patches and no modifiedContent - skip
+          console.warn(`[Apply-First] No patches or modifiedContent for ${mod.filePath}`);
+          continue;
+        }
+
         modifications.push({
           filePath: mod.filePath,
           originalContent,
-          modifiedContent: mod.modifiedContent,
-          diff: generateSimpleDiff(originalContent, mod.modifiedContent),
-          explanation: mod.explanation,
+          modifiedContent,
+          diff: generateSimpleDiff(originalContent, modifiedContent),
+          explanation,
         });
       }
 
+      // If all modifications failed, return error
+      if (patchErrors.length > 0 && modifications.length === 0) {
+        console.error("All AI patches failed:", patchErrors);
+        return NextResponse.json(
+          {
+            success: false,
+            error: `Patch application failed:\n\n${patchErrors.join("\n\n")}`,
+          },
+          { status: 400 }
+        );
+      }
+
+      // Log patch errors as warnings if some modifications succeeded
+      if (patchErrors.length > 0) {
+        console.warn("Some patches failed:", patchErrors);
+      }
+
       // Create backups and apply changes atomically
       const applyResult = await applyChangesWithBackup(
         modifications,
@@ -650,3 +736,175 @@ function generateSimpleDiff(original: string, modified: string): string {
 
   return diff.join("\n");
 }
+
+/**
+ * Patch interface for search/replace operations
+ */
+interface Patch {
+  search: string;
+  replace: string;
+  explanation: string;
+}
+
+/**
+ * Result of applying patches to a file
+ */
+interface ApplyPatchesResult {
+  success: boolean;
+  modifiedContent: string;
+  appliedPatches: number;
+  failedPatches: { patch: Patch; error: string }[];
+}
+
+/**
+ * Apply search/replace patches to file content
+ * This is the core of the patch-based editing system
+ */
+function applyPatches(originalContent: string, patches: Patch[]): ApplyPatchesResult {
+  let content = originalContent;
+  let appliedPatches = 0;
+  const failedPatches: { patch: Patch; error: string }[] = [];
+
+  for (const patch of patches) {
+    // Normalize line endings for matching
+    const normalizedSearch = patch.search.replace(/\\n/g, "\n");
+    const normalizedReplace = patch.replace.replace(/\\n/g, "\n");
+
+    // Check if search string exists in content
+    if (!content.includes(normalizedSearch)) {
+      // Try with different whitespace normalization
+      const flexibleSearch = normalizedSearch.replace(/\s+/g, "\\s+");
+      const regex = new RegExp(flexibleSearch.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\\s\+/g, "\\s+"));
+      
+      if (!regex.test(content)) {
+        failedPatches.push({
+          patch,
+          error: `Search string not found in file. First 50 chars of search: "${normalizedSearch.substring(0, 50)}..."`,
+        });
+        continue;
+      }
+      
+      // If regex matched, use regex replace
+      content = content.replace(regex, normalizedReplace);
+      appliedPatches++;
+    } else {
+      // Exact match found - apply the replacement
+      // Only replace the first occurrence to be safe
+      const index = content.indexOf(normalizedSearch);
+      content = 
+        content.substring(0, index) + 
+        normalizedReplace + 
+        content.substring(index + normalizedSearch.length);
+      appliedPatches++;
+    }
+  }
+
+  return {
+    success: failedPatches.length === 0,
+    modifiedContent: content,
+    appliedPatches,
+    failedPatches,
+  };
+}
+
+/**
+ * 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

@@ -56,59 +56,65 @@ interface VisionEditResponse {
   error?: string;
 }
 
-const VISION_SYSTEM_PROMPT = `You are a React/Tailwind CSS expert with vision capabilities for the Sonance brand system.
+const VISION_SYSTEM_PROMPT = `You are an expert React/TypeScript developer with vision capabilities. You can see screenshots and modify code.
 
-You can see screenshots of web pages and understand their visual layout, then modify code to implement requested changes.
+═══════════════════════════════════════════════════════════════════════════════
+UNDERSTAND THE USER'S REQUEST NATURALLY
+═══════════════════════════════════════════════════════════════════════════════
+
+Read the user's request and do exactly what they ask. You know React, TypeScript, Tailwind CSS, and JSX - use that knowledge naturally.
+
+- If they say "add X", ADD X to the code (don't replace or remove anything else)
+- If they say "change X to Y", find X and change it to Y
+- If they say "make X bigger/smaller/different color", adjust the relevant properties
+- If they say "remove X", remove X
+- If they say "wrap X with Y", add Y as a parent around X
+
+For any change:
+1. Read the code context provided
+2. Understand what the user wants
+3. Generate patches that accomplish exactly that
+4. If adding a component/icon requires an import, include a patch for the import too
+
+Don't overthink - just make the change the user requested.
 
 ═══════════════════════════════════════════════════════════════════════════════
-CRITICAL RULES
+PATCH FORMAT
 ═══════════════════════════════════════════════════════════════════════════════
 
-**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
-
-**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. 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)
-- Silver: #E2E2E2, #D1D1D6 (secondary)
+Return search/replace patches (NOT full files). The system applies your patches to the original.
+
+**Patch Rules:**
+- "search" must match the original code EXACTLY (including whitespace/indentation)
+- "replace" contains your modified version
+- Include 2-4 lines of context in "search" to make it unique
+- You may ONLY edit files provided in the PAGE CONTEXT section
+
+**SONANCE BRAND COLORS:**
+- Charcoal: #333F48 (primary text)
 - IPORT Orange: #FC4C02
-- IPORT Dark: #0F161D
 - Blaze Blue: #00A3E1
-- Blaze Red: #C02B0A
 
 **RESPONSE FORMAT:**
-Return ONLY a valid JSON object. Do not include any conversational text before or after the JSON.
-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 (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`;
+Return ONLY valid JSON:
+{
+  "reasoning": "What you understood from the request and your plan",
+  "modifications": [
+    {
+      "filePath": "path/to/file.tsx",
+      "patches": [
+        {
+          "search": "exact code to find",
+          "replace": "the replacement code",
+          "explanation": "what this patch does"
+        }
+      ],
+      "previewCSS": "optional CSS for live preview"
+    }
+  ],
+  "aggregatedPreviewCSS": "combined CSS for all changes",
+  "explanation": "summary of changes made"
+}`;
 
 export async function POST(request: Request) {
   // Only allow in development
@@ -297,13 +303,15 @@ CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new
         );
       }
 
-      // Parse AI response
+      // Parse AI response - now expecting patches instead of full file content
       let aiResponse: {
         reasoning?: string;
         modifications: Array<{
           filePath: string;
-          modifiedContent: string;
-          explanation: string;
+          patches?: Patch[];
+          // Legacy support for modifiedContent (will be deprecated)
+          modifiedContent?: string;
+          explanation?: string;
           previewCSS?: string;
         }>;
         aggregatedPreviewCSS?: string;
@@ -368,8 +376,10 @@ CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new
         );
       }
 
-      // Read original content and generate diffs for each modification
+      // Process modifications - apply patches to get modified content
       const modificationsWithOriginals: VisionFileModification[] = [];
+      const patchErrors: string[] = [];
+      
       for (const mod of aiResponse.modifications || []) {
         const fullPath = path.join(projectRoot, mod.filePath);
         let originalContent = "";
@@ -377,16 +387,78 @@ CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new
           originalContent = fs.readFileSync(fullPath, "utf-8");
         }
 
+        let modifiedContent: string;
+        let explanation = mod.explanation || "";
+
+        // Check if AI returned patches (new format) or modifiedContent (legacy)
+        if (mod.patches && mod.patches.length > 0) {
+          // New patch-based approach
+          console.log(`[Vision Mode] Applying ${mod.patches.length} patches to ${mod.filePath}`);
+          
+          const patchResult = applyPatches(originalContent, mod.patches);
+          
+          if (!patchResult.success) {
+            const failedMessages = patchResult.failedPatches.map(
+              (f) => `Patch failed: ${f.error}`
+            ).join("\n");
+            patchErrors.push(`${mod.filePath}:\n${failedMessages}`);
+            
+            // If some patches succeeded, use partial result
+            if (patchResult.appliedPatches > 0) {
+              console.warn(`[Vision Mode] ${patchResult.appliedPatches}/${mod.patches.length} patches applied to ${mod.filePath}`);
+              modifiedContent = patchResult.modifiedContent;
+              explanation += ` (${patchResult.appliedPatches}/${mod.patches.length} patches applied)`;
+            } else {
+              continue; // Skip this file entirely if no patches worked
+            }
+          } else {
+            modifiedContent = patchResult.modifiedContent;
+            console.log(`[Vision Mode] All ${mod.patches.length} patches applied successfully to ${mod.filePath}`);
+          }
+        } else if (mod.modifiedContent) {
+          // Legacy: AI returned full file content
+          console.warn(`[Vision Mode] Legacy modifiedContent received for ${mod.filePath} - patch-based format preferred`);
+          modifiedContent = mod.modifiedContent;
+          
+          // Validate the modification using legacy validation
+          const validation = validateModification(originalContent, modifiedContent, mod.filePath);
+          if (!validation.valid) {
+            patchErrors.push(`${mod.filePath}: ${validation.error}`);
+            continue;
+          }
+        } else {
+          // No patches and no modifiedContent - skip
+          console.warn(`[Vision Mode] No patches or modifiedContent for ${mod.filePath}`);
+          continue;
+        }
+
         modificationsWithOriginals.push({
           filePath: mod.filePath,
           originalContent,
-          modifiedContent: mod.modifiedContent,
-          diff: generateSimpleDiff(originalContent, mod.modifiedContent),
-          explanation: mod.explanation,
+          modifiedContent,
+          diff: generateSimpleDiff(originalContent, modifiedContent),
+          explanation,
           previewCSS: mod.previewCSS,
         });
       }
 
+      // If all modifications failed, return error
+      if (patchErrors.length > 0 && modificationsWithOriginals.length === 0) {
+        console.error("All AI patches failed:", patchErrors);
+        return NextResponse.json(
+          {
+            success: false,
+            error: `Patch application failed:\n\n${patchErrors.join("\n\n")}`,
+          } as VisionEditResponse,
+          { status: 400 }
+        );
+      }
+
+      // Log patch errors as warnings if some modifications succeeded
+      if (patchErrors.length > 0) {
+        console.warn("Some patches failed:", patchErrors);
+      }
+
       // Aggregate preview CSS
       const aggregatedCSS = modificationsWithOriginals
         .filter((m) => m.previewCSS)
@@ -655,3 +727,175 @@ function generateSimpleDiff(original: string, modified: string): string {
 
   return diff.join("\n");
 }
+
+/**
+ * Patch interface for search/replace operations
+ */
+interface Patch {
+  search: string;
+  replace: string;
+  explanation: string;
+}
+
+/**
+ * Result of applying patches to a file
+ */
+interface ApplyPatchesResult {
+  success: boolean;
+  modifiedContent: string;
+  appliedPatches: number;
+  failedPatches: { patch: Patch; error: string }[];
+}
+
+/**
+ * Apply search/replace patches to file content
+ * This is the core of the patch-based editing system
+ */
+function applyPatches(originalContent: string, patches: Patch[]): ApplyPatchesResult {
+  let content = originalContent;
+  let appliedPatches = 0;
+  const failedPatches: { patch: Patch; error: string }[] = [];
+
+  for (const patch of patches) {
+    // Normalize line endings for matching
+    const normalizedSearch = patch.search.replace(/\\n/g, "\n");
+    const normalizedReplace = patch.replace.replace(/\\n/g, "\n");
+
+    // Check if search string exists in content
+    if (!content.includes(normalizedSearch)) {
+      // Try with different whitespace normalization
+      const flexibleSearch = normalizedSearch.replace(/\s+/g, "\\s+");
+      const regex = new RegExp(flexibleSearch.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\\s\+/g, "\\s+"));
+      
+      if (!regex.test(content)) {
+        failedPatches.push({
+          patch,
+          error: `Search string not found in file. First 50 chars of search: "${normalizedSearch.substring(0, 50)}..."`,
+        });
+        continue;
+      }
+      
+      // If regex matched, use regex replace
+      content = content.replace(regex, normalizedReplace);
+      appliedPatches++;
+    } else {
+      // Exact match found - apply the replacement
+      // Only replace the first occurrence to be safe
+      const index = content.indexOf(normalizedSearch);
+      content = 
+        content.substring(0, index) + 
+        normalizedReplace + 
+        content.substring(index + normalizedSearch.length);
+      appliedPatches++;
+    }
+  }
+
+  return {
+    success: failedPatches.length === 0,
+    modifiedContent: content,
+    appliedPatches,
+    failedPatches,
+  };
+}
+
+/**
+ * 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/components/ChatInterface.tsx

@@ -57,6 +57,7 @@ export function ChatInterface({
   const [input, setInput] = useState("");
   const [isProcessing, setIsProcessing] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   // Scroll to bottom when messages change
   useEffect(() => {
@@ -126,6 +127,7 @@ export function ChatInterface({
 
     setMessages((prev) => [...prev, userMessage]);
     setInput("");
+    if (inputRef.current) inputRef.current.value = "";
     setIsProcessing(true);
 
     try {
@@ -216,11 +218,14 @@ export function ChatInterface({
   };
 
   const handleSend = async (prompt: string) => {
-    if (!prompt.trim() || isProcessing) return;
+    // Fallback: read from DOM if React state is empty (browser automation compatibility)
+    const actualPrompt = prompt || inputRef.current?.value || "";
+    
+    if (!actualPrompt.trim() || isProcessing) return;
 
     // Use vision mode handler if vision mode is active
     if (visionMode) {
-      return handleVisionEdit(prompt);
+      return handleVisionEdit(actualPrompt);
     }
 
     // If no component is selected, intercept the request
@@ -228,11 +233,12 @@ export function ChatInterface({
       const userMessage: ChatMessage = {
         id: `msg-${Date.now()}`,
         role: "user",
-        content: prompt,
+        content: actualPrompt,
         timestamp: new Date(),
       };
       setMessages((prev) => [...prev, userMessage]);
       setInput("");
+      if (inputRef.current) inputRef.current.value = "";
       
       setTimeout(() => {
         const assistantMessage: ChatMessage = {
@@ -249,12 +255,13 @@ export function ChatInterface({
     const userMessage: ChatMessage = {
       id: `msg-${Date.now()}`,
       role: "user",
-      content: prompt,
+      content: actualPrompt,
       timestamp: new Date(),
     };
 
     setMessages((prev) => [...prev, userMessage]);
     setInput("");
+    if (inputRef.current) inputRef.current.value = "";
     setIsProcessing(true);
 
     try {
@@ -285,7 +292,7 @@ export function ChatInterface({
           componentType,
           filePath,
           currentCode: sourceData.content,
-          userRequest: prompt,
+          userRequest: actualPrompt,
           // Variant-scoped editing context
           editScope,
           variantId: editScope === "variant" ? variantId : undefined,
@@ -390,13 +397,14 @@ export function ChatInterface({
       {/* Input */}
       <div className="flex gap-2">
         <input
+          ref={inputRef}
           type="text"
           value={input}
           onChange={(e) => setInput(e.target.value)}
           onKeyDown={(e) => {
             if (e.key === "Enter" && !e.shiftKey) {
               e.preventDefault();
-              handleSend(input);
+              handleSend(input || inputRef.current?.value || "");
             }
           }}
           placeholder={
@@ -418,8 +426,8 @@ export function ChatInterface({
           )}
         />
         <button
-          onClick={() => handleSend(input)}
-          disabled={isProcessing || !input.trim()}
+          onClick={() => handleSend(input || inputRef.current?.value || "")}
+          disabled={isProcessing}
           className={cn(
             "px-3 py-2 rounded transition-colors",
             visionMode

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.22",
+  "version": "1.3.25",
   "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",