sonance-brand-mcp 1.3.99 → 1.3.101

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

@@ -84,6 +84,40 @@ interface VisionEditResponse {
 
 const DEBUG_LOG_FILE = "sonance-debug.log";
 
+/**
+ * TWO-PHASE DESIGN ANALYSIS TYPES
+ * Phase 1 identifies problems, Phase 2 generates patches that reference those problems
+ */
+
+/** Categories of visual/UX problems that can be identified */
+type DesignProblemCategory = 'hierarchy' | 'spacing' | 'alignment' | 'feedback' | 'grouping';
+
+/** A specific visual problem identified in Phase 1 analysis */
+interface DesignProblem {
+  /** Unique identifier (e.g., "hierarchy-1", "spacing-2") */
+  id: string;
+  /** Problem category */
+  category: DesignProblemCategory;
+  /** Specific description of the issue */
+  description: string;
+  /** Visual impact severity */
+  severity: 'high' | 'medium' | 'low';
+  /** Hint for what to look for in the code */
+  codeHint?: string;
+}
+
+/** Extended patch that references a specific problem from Phase 1 */
+interface DesignPatch {
+  /** Reference to the problem this patch fixes */
+  problemId: string;
+  /** Exact code to find */
+  search: string;
+  /** Replacement code */
+  replace: string;
+  /** Explanation of how this fixes the problem */
+  rationale: string;
+}
+
 /**
  * Debug logging utility - writes to sonance-debug.log in project root
  * This helps diagnose issues with file discovery, validation, and revert
@@ -885,6 +919,139 @@ Be smart - use your knowledge of React patterns to identify what type of element
   }
 }
 
+/**
+ * PHASE 1: Design Problem Analysis
+ * 
+ * Analyzes the screenshot to identify specific visual/UX problems.
+ * This is a SEPARATE LLM call that ONLY identifies problems - no code changes.
+ * The problems are then passed to Phase 2 to generate targeted patches.
+ */
+async function analyzeDesignProblems(
+  screenshot: string,
+  fileContent: string,
+  userPrompt: string,
+  apiKey: string
+): Promise<DesignProblem[]> {
+  const anthropic = new Anthropic({ apiKey });
+  const base64Data = screenshot.split(",")[1] || screenshot;
+
+  debugLog("Phase 1 Design Analysis: Starting visual problem identification", {
+    promptPreview: userPrompt?.substring(0, 50),
+    fileContentLength: fileContent.length
+  });
+
+  try {
+    const response = await anthropic.messages.create({
+      model: "claude-sonnet-4-20250514",
+      max_tokens: 2048,
+      messages: [
+        {
+          role: "user",
+          content: [
+            {
+              type: "image",
+              source: {
+                type: "base64",
+                media_type: "image/png",
+                data: base64Data,
+              },
+            },
+            {
+              type: "text",
+              text: `You are a senior UI/UX designer. Analyze this screenshot and identify SPECIFIC visual problems.
+
+User's request: "${userPrompt}"
+
+Examine the UI for issues in these categories:
+
+1. HIERARCHY: Is there a clear visual focus? Are elements competing for attention?
+   - Look for: competing headings, unclear primary actions, visual clutter
+
+2. SPACING: Are related elements grouped? Is there awkward empty space?
+   - Look for: disconnected labels/values, uneven gaps, cramped or overly spread content
+
+3. ALIGNMENT: Do elements align naturally? Are there visual disconnects?
+   - Look for: misaligned text, floating elements, broken visual flow
+
+4. FEEDBACK: Are progress indicators, states, and actions clear?
+   - Look for: weak progress visualization, unclear states, orphaned status indicators
+
+5. GROUPING: Are related items visually connected? Do containers make sense?
+   - Look for: related content that appears separate, missing visual boundaries
+
+For each problem found, provide:
+- id: unique identifier (e.g., "hierarchy-1", "spacing-2")
+- category: one of [hierarchy, spacing, alignment, feedback, grouping]
+- description: specific description of what's wrong
+- severity: high/medium/low based on visual impact
+- codeHint: what to look for in the code to fix it
+
+Return ONLY a JSON array of problems. Example:
+[
+  {
+    "id": "grouping-1",
+    "category": "grouping",
+    "description": "The 'Essence Quality' label and '0% COMPLETE' badge appear visually disconnected - they should be grouped together",
+    "severity": "high",
+    "codeHint": "Check if label and badge are in separate containers or using absolute positioning"
+  },
+  {
+    "id": "spacing-1",
+    "category": "spacing",
+    "description": "Too much vertical gap between the header section and the quality indicator",
+    "severity": "medium",
+    "codeHint": "Look for large margin or padding values like mt-6, mb-8, py-6"
+  }
+]
+
+IMPORTANT:
+- Only identify problems that are actually visible in the screenshot
+- Be specific - vague problems lead to vague fixes
+- Maximum 5 problems - focus on the most impactful ones
+- If no significant problems are found, return an empty array []
+- Do NOT suggest code changes - only identify problems
+
+Return ONLY the JSON array, no other text.`,
+            },
+          ],
+        },
+      ],
+    });
+
+    const textBlock = response.content.find((block) => block.type === "text");
+    if (!textBlock || textBlock.type !== "text") {
+      debugLog("Phase 1 Design Analysis: No text response from LLM");
+      return [];
+    }
+
+    let jsonText = textBlock.text.trim();
+    
+    // Extract JSON from code fences if present
+    const jsonMatch = jsonText.match(/```(?:json)?\n?([\s\S]*?)\n?```/) ||
+                     jsonText.match(/\[[\s\S]*\]/);
+    if (jsonMatch) {
+      jsonText = jsonMatch[1] || jsonMatch[0];
+    }
+
+    const problems: DesignProblem[] = JSON.parse(jsonText);
+    
+    // Validate the structure
+    const validatedProblems = problems.filter(p => 
+      p.id && p.category && p.description && p.severity
+    ).slice(0, 5); // Maximum 5 problems
+
+    debugLog("Phase 1 Design Analysis: Identified problems", {
+      count: validatedProblems.length,
+      problems: validatedProblems.map(p => ({ id: p.id, category: p.category, severity: p.severity }))
+    });
+
+    return validatedProblems;
+  } catch (e) {
+    debugLog("Phase 1 Design Analysis: Failed to analyze", { error: String(e) });
+    return [];
+  }
+}
+
 /**
  * Search candidate files for JSX code matching the focused element
  * This helps identify which file actually contains the element the user clicked on
@@ -1338,91 +1505,166 @@ Output format:
 The "search" field must match the file EXACTLY (copy-paste from the code provided).`;
 
 /**
- * DESIGNER ANALYSIS PROTOCOL
- * Forces the LLM to analyze the UI like a senior designer before making changes.
- * Identifies specific visual problems, maps them to code, then makes targeted fixes.
+ * PHASE 2: Targeted Patch Generation Prompt
+ * 
+ * This prompt is used AFTER Phase 1 has identified specific problems.
+ * It requires each patch to reference a problem ID from Phase 1.
  */
-const DESIGN_REASONING_PROMPT = `
+function buildPhase2DesignPrompt(problems: DesignProblem[]): string {
+  if (problems.length === 0) {
+    return ''; // No problems identified, skip design protocol
+  }
+
+  const problemsJson = JSON.stringify(problems, null, 2);
+  
+  return `
 ═══════════════════════════════════════════════════════════════════════════════
-DESIGNER ANALYSIS PROTOCOL
+PHASE 2: TARGETED PATCH GENERATION
 ═══════════════════════════════════════════════════════════════════════════════
 
-You are a senior UI/UX designer reviewing this component. Before generating any code changes, you MUST complete this analysis:
+A visual analysis identified these specific problems in the UI:
 
-STEP 1 - VISUAL AUDIT (analyze the screenshot)
-Examine the UI and identify specific issues in these categories:
+${problemsJson}
 
-• HIERARCHY: Is there a clear visual focus? Are elements competing for attention?
-  - Look for: competing headings, unclear primary actions, visual clutter
-  
-• SPACING: Are related elements grouped? Is there awkward empty space?
-  - Look for: disconnected labels/values, uneven gaps, cramped or overly spread content
-  
-• ALIGNMENT: Do elements align naturally? Are there visual disconnects?
-  - Look for: misaligned text, floating elements, broken visual flow
-  
-• FEEDBACK: Are progress indicators, states, and actions clear?
-  - Look for: weak progress visualization, unclear states, orphaned status indicators
-  
-• GROUPING: Are related items visually connected? Do containers make sense?
-  - Look for: related content that appears separate, missing visual boundaries
+YOUR TASK: Generate patches that fix ONLY these specific problems.
 
-List each problem you find with a specific description.
+STRICT RULES:
+1. Each patch MUST include a "problemId" field referencing one of the problems above
+2. Do NOT make changes unrelated to the identified problems
+3. Make the SMALLEST change that fixes each problem
+4. Do NOT change layout systems (flex→grid) unless absolutely necessary to fix a problem
+5. Preserve existing structure - adjust properties, don't restructure
 
-STEP 2 - CODE MAPPING
-For each problem identified in Step 1, find the EXACT code in the file that causes it:
+For each problem, find the exact code that causes it and create a targeted fix.
 
-Example format:
-- Problem: "Badge disconnected from its label"
-- Code: Line 45 shows \`<Badge className="absolute right-0">\` positioned separately from label at Line 42
-- Fix needed: Move Badge inside the same flex container as the label
-
-Do this for EACH problem you identified.
-
-STEP 3 - PRIORITIZED FIXES
-Rank your fixes by visual impact. Address the most impactful issues first.
-Each fix should:
-• Target a specific identified problem from Step 1
-• Reference the exact code location from Step 2
-• Make focused changes that fix THAT specific problem
+OUTPUT FORMAT (note the problemId and rationale fields):
+{
+  "modifications": [{
+    "filePath": "components/Example.tsx",
+    "patches": [
+      {
+        "problemId": "grouping-1",
+        "search": "<Badge className=\"absolute right-4\">",
+        "replace": "<Badge className=\"ml-2\">",
+        "rationale": "Removes absolute positioning to group badge with label"
+      },
+      {
+        "problemId": "spacing-1",
+        "search": "className=\"mt-8\"",
+        "replace": "className=\"mt-4\"",
+        "rationale": "Reduces excessive vertical gap"
+      }
+    ]
+  }]
+}
 
-STEP 4 - GENERATE PATCHES
-Now generate patches that implement your fixes.
-• Each patch should be traceable to a specific problem from Step 1
-• Multiple small patches are better than one large rewrite
-• Every change must have a clear reason tied to your analysis
+VALIDATION:
+- Patches without a valid problemId will be REJECTED
+- Patches that don't trace to an identified problem will be REJECTED
+- Each patch must have search, replace, problemId, and rationale fields
 `;
+}
 
 /**
- * DESIGN DECISION RULES
- * Informed decision rules that allow fixing real problems while preventing unnecessary rewrites.
+ * DESIGN DECISION RULES for Phase 2
  */
 const DESIGN_GUARDRAILS = `
 ═══════════════════════════════════════════════════════════════════════════════
-DESIGN DECISION RULES
+DESIGN CONSTRAINTS
 ═══════════════════════════════════════════════════════════════════════════════
 
 ✓ ALLOWED when fixing identified problems:
-• Adjust spacing, padding, margins to fix grouping issues
-• Reposition elements to improve visual hierarchy (move badge next to its label, etc.)
-• Add containers/wrappers to group related content that appears disconnected
-• Change flex direction or alignment to fix layout issues
-• Adjust typography for better hierarchy (size, weight, line-height)
-• Improve progress indicators or status displays for clarity
-
-✗ STILL AVOID:
-• Complete rewrites when targeted fixes would work
-• Changing functionality or interactive behavior
-• Removing content or features the user didn't ask to remove
-• Changing color schemes unless specifically identified as a problem
-• Making changes that aren't traceable to a specific visual problem you identified
+• Adjust spacing (margin, padding) - e.g., mt-4 → mt-2
+• Adjust alignment within containers - e.g., items-start → items-center
+• Move elements within the same container to improve grouping
+• Adjust typography - font size, weight, line-height
+• Add/remove whitespace classes
+
+✗ FORBIDDEN (will cause rejection):
+• Changing layout system (flex → grid, grid → flex)
+• Restructuring component hierarchy
+• Wrapping elements in new containers (unless specifically needed for a grouping problem)
+• Removing or changing functionality
+• Changes without a problemId reference
 
-═══════════════════════════════════════════════════════════════════════════════
-PRINCIPLE: Every change must trace back to a specific visual problem you identified in Step 1.
-If you can't explain WHY a change fixes a specific problem, don't make that change.
 ═══════════════════════════════════════════════════════════════════════════════
 `;
 
+/**
+ * Validate patches against identified problems
+ * Rejects patches that don't reference a valid problem ID
+ */
+function validateDesignPatches(
+  patches: Array<{ search: string; replace: string; problemId?: string; rationale?: string }>,
+  problems: DesignProblem[]
+): { valid: Array<{ search: string; replace: string; problemId: string; rationale: string }>; rejected: Array<{ patch: unknown; reason: string }> } {
+  const validProblemIds = new Set(problems.map(p => p.id));
+  const valid: Array<{ search: string; replace: string; problemId: string; rationale: string }> = [];
+  const rejected: Array<{ patch: unknown; reason: string }> = [];
+
+  for (const patch of patches) {
+    // Check for required fields
+    if (!patch.search || !patch.replace) {
+      rejected.push({ patch, reason: "Missing search or replace field" });
+      continue;
+    }
+
+    // For design-heavy requests, require problemId
+    if (!patch.problemId) {
+      rejected.push({ patch, reason: "Missing problemId - patch doesn't reference an identified problem" });
+      continue;
+    }
+
+    // Validate problemId exists in the problems list
+    if (!validProblemIds.has(patch.problemId)) {
+      rejected.push({ patch, reason: `Invalid problemId "${patch.problemId}" - not in identified problems list` });
+      continue;
+    }
+
+    // Check for forbidden structural changes
+    const searchLower = patch.search.toLowerCase();
+    const replaceLower = patch.replace.toLowerCase();
+    
+    // Detect flex → grid or grid → flex conversions
+    const hadFlex = searchLower.includes('flex') || searchLower.includes('items-') || searchLower.includes('justify-');
+    const hasGrid = replaceLower.includes('grid') && !searchLower.includes('grid');
+    const hadGrid = searchLower.includes('grid');
+    const hasFlex = (replaceLower.includes('flex') || replaceLower.includes('items-') || replaceLower.includes('justify-')) && !hadFlex;
+    
+    if ((hadFlex && hasGrid) || (hadGrid && hasFlex)) {
+      rejected.push({ patch, reason: "Forbidden: Changing layout system (flex ↔ grid)" });
+      continue;
+    }
+
+    // Detect space-y/space-x additions that fundamentally change layout
+    const addedSpaceY = replaceLower.includes('space-y') && !searchLower.includes('space-y');
+    const addedSpaceX = replaceLower.includes('space-x') && !searchLower.includes('space-x');
+    const hadJustifyBetween = searchLower.includes('justify-between');
+    
+    if ((addedSpaceY || addedSpaceX) && hadJustifyBetween) {
+      rejected.push({ patch, reason: "Forbidden: Converting flex layout to stack layout" });
+      continue;
+    }
+
+    valid.push({
+      search: patch.search,
+      replace: patch.replace,
+      problemId: patch.problemId,
+      rationale: patch.rationale || 'No rationale provided'
+    });
+  }
+
+  if (rejected.length > 0) {
+    debugLog("Design patch validation: Some patches rejected", {
+      validCount: valid.length,
+      rejectedCount: rejected.length,
+      rejected: rejected.map(r => ({ reason: r.reason, searchPreview: String(r.patch).substring(0, 50) }))
+    });
+  }
+
+  return { valid, rejected };
+}
+
 /**
  * Detect if a user request is design-heavy and needs the reasoning protocol.
  * Simple requests like "change button color to blue" don't need it.
@@ -1814,151 +2056,175 @@ export async function POST(request: Request) {
         }
       }
 
-      // Build text content
-      let textContent = `VISION MODE EDIT REQUEST
-
-Page Route: ${pageRoute}
-User Request: "${userPrompt}"
-
-`;
-
-      // ========== DESIGN REASONING PROTOCOL ==========
-      // For design-heavy requests, add structured reasoning and guardrails
-      // This prevents over-engineering and ensures thoughtful changes
-      const isDesignRequest = isDesignHeavyRequest(userPrompt || '');
+      // ========== FILE REDIRECT LOGIC (runs BEFORE building instructions) ==========
+      // This determines the ACTUAL target file by checking for text matches in imported components
+      // Must run first so that all subsequent code uses the correct file path
+      let actualTargetFile = recommendedFileContent || (pageContext.pageContent ? { path: pageContext.pageFile, content: pageContext.pageContent } : null);
+      let elementLocation: { lineNumber: number; snippet: string; confidence: 'high' | 'medium' | 'low'; matchedBy: string } | null = null;
       
-      if (isDesignRequest) {
-        debugLog("Design-heavy request detected, adding reasoning protocol", {
-          prompt: userPrompt?.substring(0, 50),
-          triggerKeywords: ['redesign', 'better', 'improve', 'cleaner', 'layout', 'modernize']
-            .filter(k => userPrompt?.toLowerCase().includes(k))
-        });
-        
-        textContent += DESIGN_REASONING_PROMPT;
-        textContent += DESIGN_GUARDRAILS;
-        textContent += '\n';
-      }
-
-      // ========== TARGET COMPONENT ONLY (with line numbers) ==========
-      // CRITICAL: Only include the TARGET file to avoid overwhelming the LLM with noise
-      if (recommendedFileContent) {
-        const content = recommendedFileContent.content;
+      if (actualTargetFile && focusedElements && focusedElements.length > 0) {
+        const content = actualTargetFile.content;
         
         // Search for focused element in the file using multiple strategies
         // Priority: DOM id > textContent > className patterns
-        let elementLocation: { lineNumber: number; snippet: string; confidence: 'high' | 'medium' | 'low'; matchedBy: string } | null = null;
-        let actualTargetFile = recommendedFileContent; // May change if we redirect
-        
-      if (focusedElements && focusedElements.length > 0) {
-          for (const el of focusedElements) {
-            elementLocation = findElementLineInFile(content, el);
-            if (elementLocation) {
-              debugLog("Found focused element in file", {
-                matchedBy: elementLocation.matchedBy,
-                lineNumber: elementLocation.lineNumber,
-                confidence: elementLocation.confidence,
-                file: recommendedFileContent.path,
-              });
-              break;
-            }
-          }
-          
-          // TEXT SCORING REDIRECT: Score ALL imported files by how many discovered
-          // text strings they contain. The file with the highest score is the TRUE target.
-          // This handles parent/child component cases accurately.
-          if (elementLocation && elementLocation.confidence !== 'high') {
-            // Collect ALL text content from focused elements
-            const allTextContent = focusedElements
-              .filter(e => e.textContent && e.textContent.length > 5)
-              .map(e => e.textContent!);
-            
-            if (allTextContent.length > 0) {
-              debugLog("Medium/low confidence match - scoring imports for all text", {
-                currentFile: recommendedFileContent.path,
-                currentConfidence: elementLocation.confidence,
-                textCount: allTextContent.length,
-                texts: allTextContent.slice(0, 5).map(t => t.substring(0, 25))
-              });
-              
-              // Score all imported files
-              const bestMatch = scoreFilesForTextContent(
-                allTextContent,
-                pageContext.componentSources
-              );
-              
-              // Also score the current file for comparison
-              const currentFileScore = allTextContent.filter(text => 
-                recommendedFileContent.content.includes(text.substring(0, 20))
-              ).length;
-              
-              debugLog("Text scoring comparison", {
-                currentFile: recommendedFileContent.path,
-                currentScore: currentFileScore,
-                bestImport: bestMatch?.path || 'none',
-                bestImportScore: bestMatch?.score || 0
-              });
-              
-              // Redirect only if imported file has MORE matches than current file
-              if (bestMatch && bestMatch.score > currentFileScore) {
-                debugLog("TEXT REDIRECT: Imported file has more text matches", {
-                  originalFile: recommendedFileContent.path,
-                  originalScore: currentFileScore,
-                  redirectTo: bestMatch.path,
-                  redirectScore: bestMatch.score,
-                  matchedTexts: bestMatch.matchedTexts
-                });
-                
-                // Switch target file to where most text content lives
-                actualTargetFile = {
-                  path: bestMatch.path,
-                  content: bestMatch.content
-                };
-                
-                // Find a line with matched text for element location
-                const lines = bestMatch.content.split('\n');
-                const snippetStart = Math.max(0, bestMatch.firstMatchLine - 4);
-                const snippetEnd = Math.min(lines.length, bestMatch.firstMatchLine + 5);
-                
-                elementLocation = {
-                  lineNumber: bestMatch.firstMatchLine,
-                  snippet: lines.slice(snippetStart, snippetEnd).join('\n'),
-                  confidence: 'high',
-                  matchedBy: `text scoring: ${bestMatch.score} matches in imported file`
-                };
-              }
-            }
+        for (const el of focusedElements) {
+          elementLocation = findElementLineInFile(content, el);
+          if (elementLocation) {
+            debugLog("Found focused element in file", {
+              matchedBy: elementLocation.matchedBy,
+              lineNumber: elementLocation.lineNumber,
+              confidence: elementLocation.confidence,
+              file: actualTargetFile.path,
+            });
+            break;
           }
+        }
+        
+        // TEXT SCORING REDIRECT: Score ALL imported files by how many discovered
+        // text strings they contain. The file with the highest score is the TRUE target.
+        if (elementLocation && elementLocation.confidence !== 'high') {
+          const allTextContent = focusedElements
+            .filter(e => e.textContent && e.textContent.length > 5)
+            .map(e => e.textContent!);
           
-          // DYNAMIC IMPORT SEARCH: If not found in main file, search imported components
-          if (!elementLocation) {
-            debugLog("Element not in main file, searching imported components...", {
-              mainFile: recommendedFileContent.path,
-              importedFilesCount: pageContext.componentSources.length
+          if (allTextContent.length > 0) {
+            debugLog("Medium/low confidence match - scoring imports for all text", {
+              currentFile: actualTargetFile.path,
+              currentConfidence: elementLocation.confidence,
+              textCount: allTextContent.length,
+              texts: allTextContent.slice(0, 5).map(t => t.substring(0, 25))
             });
             
-            const importedMatch = findElementInImportedFiles(
-              focusedElements[0],
+            const bestMatch = scoreFilesForTextContent(
+              allTextContent,
               pageContext.componentSources
             );
             
-            if (importedMatch) {
-              debugLog("REDIRECT: Element found in imported component", {
-                originalFile: recommendedFileContent.path,
-                redirectTo: importedMatch.path,
-                matchedBy: importedMatch.matchedBy,
-                lineNumber: importedMatch.lineNumber
+            const currentFileScore = allTextContent.filter(text => 
+              actualTargetFile!.content.includes(text.substring(0, 20))
+            ).length;
+            
+            debugLog("Text scoring comparison", {
+              currentFile: actualTargetFile.path,
+              currentScore: currentFileScore,
+              bestImport: bestMatch?.path || 'none',
+              bestImportScore: bestMatch?.score || 0
+            });
+            
+            if (bestMatch && bestMatch.score > currentFileScore) {
+              debugLog("TEXT REDIRECT: Imported file has more text matches", {
+                originalFile: actualTargetFile.path,
+                originalScore: currentFileScore,
+                redirectTo: bestMatch.path,
+                redirectScore: bestMatch.score,
+                matchedTexts: bestMatch.matchedTexts
               });
               
-              // Switch target file to where element actually is
               actualTargetFile = {
-                path: importedMatch.path,
-                content: importedMatch.content
+                path: bestMatch.path,
+                content: bestMatch.content
+              };
+              
+              const lines = bestMatch.content.split('\n');
+              const snippetStart = Math.max(0, bestMatch.firstMatchLine - 4);
+              const snippetEnd = Math.min(lines.length, bestMatch.firstMatchLine + 5);
+              
+              elementLocation = {
+                lineNumber: bestMatch.firstMatchLine,
+                snippet: lines.slice(snippetStart, snippetEnd).join('\n'),
+                confidence: 'high',
+                matchedBy: `text scoring: ${bestMatch.score} matches in imported file`
               };
-              elementLocation = findElementLineInFile(importedMatch.content, focusedElements[0]);
             }
           }
         }
         
+        // DYNAMIC IMPORT SEARCH: If not found in main file, search imported components
+        if (!elementLocation) {
+          debugLog("Element not in main file, searching imported components...", {
+            mainFile: actualTargetFile.path,
+            importedFilesCount: pageContext.componentSources.length
+          });
+          
+          const importedMatch = findElementInImportedFiles(
+            focusedElements[0],
+            pageContext.componentSources
+          );
+          
+          if (importedMatch) {
+            debugLog("REDIRECT: Element found in imported component", {
+              originalFile: actualTargetFile.path,
+              redirectTo: importedMatch.path,
+              matchedBy: importedMatch.matchedBy,
+              lineNumber: importedMatch.lineNumber
+            });
+            
+            actualTargetFile = {
+              path: importedMatch.path,
+              content: importedMatch.content
+            };
+            elementLocation = findElementLineInFile(importedMatch.content, focusedElements[0]);
+          }
+        }
+      }
+      
+      debugLog("File redirect complete", {
+        originalRecommended: recommendedFileContent?.path || 'none',
+        actualTarget: actualTargetFile?.path || 'none',
+        wasRedirected: actualTargetFile?.path !== recommendedFileContent?.path
+      });
+
+      // Build text content
+      let textContent = `VISION MODE EDIT REQUEST
+
+Page Route: ${pageRoute}
+User Request: "${userPrompt}"
+
+`;
+
+      // ========== TWO-PHASE DESIGN ANALYSIS ==========
+      // Phase 1: Identify specific visual problems (separate LLM call)
+      // Phase 2: Generate patches that reference those problems
+      const isDesignRequest = isDesignHeavyRequest(userPrompt || '');
+      let identifiedProblems: DesignProblem[] = [];
+      
+      if (isDesignRequest && screenshot) {
+        debugLog("Design-heavy request detected, running Phase 1 analysis", {
+          prompt: userPrompt?.substring(0, 50),
+          triggerKeywords: ['redesign', 'better', 'improve', 'cleaner', 'layout', 'modernize']
+            .filter(k => userPrompt?.toLowerCase().includes(k))
+        });
+        
+        // Phase 1: Analyze the screenshot to identify specific problems
+        // This is a SEPARATE LLM call that only identifies problems
+        // Use actualTargetFile since redirect has already happened
+        const fileContentForAnalysis = actualTargetFile?.content || pageContext.pageContent || '';
+        identifiedProblems = await analyzeDesignProblems(
+          screenshot,
+          fileContentForAnalysis,
+          userPrompt || '',
+          apiKey
+        );
+        
+        debugLog("Phase 1 complete: Problems identified", {
+          problemCount: identifiedProblems.length,
+          problems: identifiedProblems.map(p => `${p.id}: ${p.description.substring(0, 50)}`)
+        });
+        
+        // Add Phase 2 prompt with the identified problems
+        if (identifiedProblems.length > 0) {
+          textContent += buildPhase2DesignPrompt(identifiedProblems);
+          textContent += DESIGN_GUARDRAILS;
+          textContent += '\n';
+        } else {
+          debugLog("No problems identified - proceeding with standard edit");
+        }
+      }
+
+      // ========== TARGET COMPONENT ONLY (with line numbers) ==========
+      // CRITICAL: Only include the TARGET file to avoid overwhelming the LLM with noise
+      // Note: Redirect logic already ran above, so actualTargetFile is the correct file
+      if (actualTargetFile) {
         // Build focused elements section with precise targeting info
         if (focusedElements && focusedElements.length > 0) {
           textContent += `FOCUSED ELEMENTS (user clicked on these):\n`;
@@ -2022,7 +2288,7 @@ ${elementLocation.snippet}
             // Element NOT found in main file OR any imported components
             // BLOCK the LLM from guessing - require empty modifications
             debugLog("BLOCK: Could not locate focused element anywhere", {
-              mainFile: recommendedFileContent.path,
+              mainFile: actualTargetFile.path,
               searchedImports: pageContext.componentSources.length,
               focusedElements: focusedElements.map(el => ({
                 name: el.name,
@@ -2038,7 +2304,7 @@ ${elementLocation.snippet}
 ⛔ STOP: CANNOT LOCATE THE CLICKED ELEMENT
 
 The user clicked on a specific element, but it could NOT be found in:
-- ${recommendedFileContent.path} (main target file)
+- ${actualTargetFile.path} (main target file)
 - Any of the ${pageContext.componentSources.length} imported component files
 
 The element may be:
@@ -2080,7 +2346,7 @@ ${linesWithNumbers}
           path: actualTargetFile.path, 
           lines: targetContent.split('\n').length,
           size: targetContent.length,
-          wasRedirected: actualTargetFile.path !== recommendedFileContent.path 
+          wasRedirected: actualTargetFile.path !== recommendedFileContent?.path 
         });
       } else if (pageContext.pageContent) {
         // Fallback: use page file if no recommended file
@@ -2153,7 +2419,8 @@ ${variantsMatch[0]}
       }
 
       // ========== SIMPLIFIED INSTRUCTIONS ==========
-      const targetPath = recommendedFileContent?.path || pageContext.pageFile || "unknown";
+      // Use actualTargetFile which may have been redirected to an imported component
+      const targetPath = actualTargetFile?.path || pageContext.pageFile || "unknown";
       
       textContent += `═══════════════════════════════════════════════════════════════════════════════
 HOW TO MAKE YOUR EDIT
@@ -2365,9 +2632,46 @@ This is better than generating patches with made-up code.`,
           // New patch-based approach
           console.log(`[Vision Mode] Applying ${mod.patches.length} patches to ${mod.filePath}`);
           
+          // DESIGN VALIDATION: For design-heavy requests, validate patches have problemIds
+          let patchesToApply = mod.patches;
+          if (isDesignRequest && identifiedProblems.length > 0) {
+            const validationResult = validateDesignPatches(mod.patches, identifiedProblems);
+            
+            if (validationResult.rejected.length > 0) {
+              debugLog("Design patch validation rejected some patches", {
+                filePath: mod.filePath,
+                validCount: validationResult.valid.length,
+                rejectedCount: validationResult.rejected.length,
+                rejectedReasons: validationResult.rejected.map(r => r.reason)
+              });
+              console.warn(`[Vision Mode] ${validationResult.rejected.length} patches rejected for missing/invalid problemId`);
+            }
+            
+            // Only use validated patches
+            if (validationResult.valid.length === 0) {
+              patchErrors.push(`${mod.filePath}: All patches were rejected - they don't reference identified problems`);
+              continue;
+            }
+            
+            // Log which problems are being fixed
+            const problemsBeingFixed = [...new Set(validationResult.valid.map(p => p.problemId))];
+            debugLog("Design patches validated", {
+              filePath: mod.filePath,
+              problemsBeingFixed,
+              patchCount: validationResult.valid.length
+            });
+            
+            // Map validated patches to Patch interface (rationale -> explanation)
+            patchesToApply = validationResult.valid.map(p => ({
+              search: p.search,
+              replace: p.replace,
+              explanation: `[${p.problemId}] ${p.rationale}`
+            }));
+          }
+          
           // PRE-VALIDATION: Check if all search strings exist in the file BEFORE applying
           const preValidationErrors: string[] = [];
-          for (const patch of mod.patches) {
+          for (const patch of patchesToApply) {
             const normalizedSearch = patch.search.replace(/\\n/g, "\n");
             if (!originalContent.includes(normalizedSearch)) {
               // Try fuzzy match as fallback
@@ -2406,7 +2710,7 @@ This is better than generating patches with made-up code.`,
             continue;
           }
           
-          const patchResult = applyPatches(originalContent, mod.patches);
+          const patchResult = applyPatches(originalContent, patchesToApply);
           
           if (!patchResult.success) {
             const failedMessages = patchResult.failedPatches.map(
@@ -2416,15 +2720,15 @@ This is better than generating patches with made-up code.`,
             
             // 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}`);
+              console.warn(`[Vision Mode] ${patchResult.appliedPatches}/${patchesToApply.length} patches applied to ${mod.filePath}`);
               modifiedContent = patchResult.modifiedContent;
-              explanation += ` (${patchResult.appliedPatches}/${mod.patches.length} patches applied)`;
+              explanation += ` (${patchResult.appliedPatches}/${patchesToApply.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}`);
+            console.log(`[Vision Mode] All ${patchesToApply.length} patches applied successfully to ${mod.filePath}`);
           }
           
           // AST VALIDATION: Use Babel parser to catch actual syntax errors