sonance-brand-mcp 1.3.24 → 1.3.25

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

@@ -55,69 +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.
 
 ═══════════════════════════════════════════════════════════════════════════════
-ABSOLUTE RULES - VIOLATION WILL BREAK THE APPLICATION
+PATCH FORMAT
 ═══════════════════════════════════════════════════════════════════════════════
 
-**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:**
-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.
+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 (MUST BE FULL CONTENT, NO TRUNCATION)
-  - "explanation": What changed in this file
-- "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`;
+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
@@ -296,13 +290,15 @@ CRITICAL: Your modified file should have approximately the same number of lines
         );
       }
 
-      // 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;
       };
@@ -344,10 +340,9 @@ CRITICAL: Your modified file should have approximately the same number of lines
         });
       }
 
-      // Read original content and prepare modifications
+      // Process modifications - apply patches to get modified content
       const modifications: VisionFileModification[] = [];
-      const validationErrors: string[] = [];
-      const validationWarnings: string[] = [];
+      const patchErrors: string[] = [];
       
       for (const mod of aiResponse.modifications) {
         const fullPath = path.join(projectRoot, mod.filePath);
@@ -356,42 +351,75 @@ CRITICAL: Your modified file should have approximately the same number of lines
           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}`));
+        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 validation, return error
-      if (validationErrors.length > 0 && modifications.length === 0) {
-        console.error("All AI modifications failed validation:", validationErrors);
+      // 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: validationErrors.join("\n\n"),
+            error: `Patch application failed:\n\n${patchErrors.join("\n\n")}`,
           },
           { status: 400 }
         );
       }
 
-      // Log warnings for review
-      if (validationWarnings.length > 0) {
-        console.warn("Vision apply validation warnings:", validationWarnings);
+      // 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
@@ -709,6 +737,76 @@ 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
  */

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

@@ -56,72 +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.
 
 ═══════════════════════════════════════════════════════════════════════════════
-ABSOLUTE RULES - VIOLATION WILL BREAK THE APPLICATION
+PATCH FORMAT
 ═══════════════════════════════════════════════════════════════════════════════
 
-**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:**
-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.
+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 (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
-
-**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`;
+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
@@ -310,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;
@@ -381,10 +376,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
+      // Process modifications - apply patches to get modified content
       const modificationsWithOriginals: VisionFileModification[] = [];
-      const validationErrors: string[] = [];
-      const validationWarnings: string[] = [];
+      const patchErrors: string[] = [];
       
       for (const mod of aiResponse.modifications || []) {
         const fullPath = path.join(projectRoot, mod.filePath);
@@ -393,43 +387,76 @@ 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}`));
+        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 validation, return error
-      if (validationErrors.length > 0 && modificationsWithOriginals.length === 0) {
-        console.error("All AI modifications failed validation:", validationErrors);
+      // 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: validationErrors.join("\n\n"),
+            error: `Patch application failed:\n\n${patchErrors.join("\n\n")}`,
           } as VisionEditResponse,
           { status: 400 }
         );
       }
 
-      // Log warnings for review
-      if (validationWarnings.length > 0) {
-        console.warn("Vision edit validation warnings:", validationWarnings);
+      // Log patch errors as warnings if some modifications succeeded
+      if (patchErrors.length > 0) {
+        console.warn("Some patches failed:", patchErrors);
       }
 
       // Aggregate preview CSS
@@ -701,6 +728,76 @@ 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
  */

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/package.json

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