sonance-brand-mcp 1.3.111 → 1.3.112

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

@@ -4,6 +4,7 @@ import * as path from "path";
 import Anthropic from "@anthropic-ai/sdk";
 import { randomUUID } from "crypto";
 import { discoverTheme, formatThemeForPrompt } from "./theme-discovery";
+import { detectStylingSystem, generateStylingGuidance, type StylingAnalysis } from "./styling-detection";
 import * as babelParser from "@babel/parser";
 
 /**
@@ -54,6 +55,8 @@ interface VisionFocusedElement {
   childIds?: string[];
   /** Parent section context for section-level changes */
   parentSection?: ParentSectionInfo;
+  /** The src attribute for image elements (for tracing to source code) */
+  imageSrc?: string;
 }
 
 interface VisionFileModification {
@@ -80,6 +83,27 @@ interface ApplyFirstRequest {
   previewedModifications?: VisionFileModification[];
   /** Conversation history for multi-turn context */
   chatHistory?: ChatHistoryMessage[];
+  /** Current theme mode (light/dark) for theme-specific color changes */
+  currentTheme?: "light" | "dark";
+  /** Property edits from the PropertiesPanel (includes colorLight/colorDark) */
+  propertyEdits?: {
+    textContent?: string;
+    width?: string;
+    height?: string;
+    opacity?: string;
+    borderRadius?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    lineHeight?: string;
+    letterSpacing?: string;
+    color?: string;
+    colorLight?: string;
+    colorDark?: string;
+    backgroundColor?: string;
+    padding?: string;
+    margin?: string;
+    gap?: string;
+  };
 }
 
 interface BackupManifest {
@@ -151,9 +175,10 @@ function debugLog(message: string, data?: unknown) {
 /**
  * Sanitize a JSON string by finding the correct end point using bracket balancing.
  * Handles cases where LLM outputs trailing garbage like extra ]} characters.
+ * Also handles leading conversational text before the JSON payload.
  */
 function sanitizeJsonString(text: string): string {
-  const trimmed = text.trim();
+  let trimmed = text.trim();
   
   debugLog("[sanitizeJsonString] Starting", {
     inputLength: trimmed.length,
@@ -161,6 +186,21 @@ function sanitizeJsonString(text: string): string {
     last100: trimmed.substring(trimmed.length - 100)
   });
   
+  // Skip leading conversational preamble by finding the first '{'
+  // This handles cases like "Looking at line 76... { ... }"
+  const firstBrace = trimmed.indexOf('{');
+  if (firstBrace > 0) {
+    const preamble = trimmed.substring(0, firstBrace);
+    debugLog("[sanitizeJsonString] Found preamble, skipping", {
+      preambleLength: firstBrace,
+      preamblePreview: preamble.substring(0, 100)
+    });
+    trimmed = trimmed.substring(firstBrace);
+  } else if (firstBrace === -1) {
+    debugLog("[sanitizeJsonString] No JSON object found in text");
+    return trimmed; // Return as-is if no { found
+  }
+  
   // Try parsing as-is first
   try {
     JSON.parse(trimmed);
@@ -516,26 +556,31 @@ function findElementLineInFile(
     
     // PRIORITY 2c: Word-based matching for text with special characters (bullets, etc.)
     // Extract significant words and find lines containing multiple of them
-    if (normalizedText.length > 10) {
-      const commonWords = ['the', 'this', 'that', 'with', 'from', 'have', 'will', 'your', 'for', 'and', 'use'];
+    // IMPROVED: Lower threshold to 3-char words and flexible match requirements
+    if (normalizedText.length > 8) {
+      const commonWords = ['the', 'this', 'that', 'with', 'from', 'have', 'will', 'your', 'for', 'and', 'use', 'are', 'you', 'can', 'its', 'not', 'but', 'all', 'was', 'has', 'any'];
       const significantWords = normalizedText.split(' ')
-        .filter(word => word.length >= 4 && !commonWords.includes(word.toLowerCase()))
-        .slice(0, 5); // Take up to 5 significant words
-      
-      if (significantWords.length >= 2) {
+        .filter(word => word.length >= 3 && !commonWords.includes(word.toLowerCase()))
+        .slice(0, 8); // Take up to 8 significant words for longer text
+
+      // Flexible threshold: require fewer matches for longer text
+      const minSignificantWords = normalizedText.length > 50 ? 1 : 2;
+      const minMatches = normalizedText.length > 50 ? 1 : 2;
+
+      if (significantWords.length >= minSignificantWords) {
         for (let i = 0; i < lines.length; i++) {
           const lineLower = lines[i].toLowerCase();
-          const matchCount = significantWords.filter(word => 
+          const matchCount = significantWords.filter(word =>
             lineLower.includes(word.toLowerCase())
           ).length;
-          
-          // Require at least 2 word matches for confidence
-          if (matchCount >= 2) {
+
+          // Flexible matching: longer text can match with fewer words
+          if (matchCount >= minMatches) {
             return {
               lineNumber: i + 1,
               snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
-              confidence: 'medium',
-              matchedBy: `word match: ${significantWords.slice(0, 3).join(', ')}... (${matchCount} words)`
+              confidence: matchCount >= 3 ? 'medium' : 'low',
+              matchedBy: `word match: ${significantWords.slice(0, 3).join(', ')}... (${matchCount}/${significantWords.length} words)`
             };
           }
         }
@@ -561,6 +606,70 @@ function findElementLineInFile(
     }
   }
   
+  // PRIORITY 2c: Image source matching (for logo/image elements)
+  if (focusedElement.type === 'logo') {
+    // If we have imageSrc, try to match it
+    if (focusedElement.imageSrc) {
+      // Clean the image src - remove Next.js image optimization params
+      let cleanSrc = focusedElement.imageSrc;
+      if (cleanSrc.includes("/_next/image")) {
+        const urlMatch = cleanSrc.match(/url=([^&]+)/);
+        if (urlMatch) {
+          cleanSrc = decodeURIComponent(urlMatch[1]);
+        }
+      }
+      
+      // Extract just the filename for flexible matching
+      const filename = cleanSrc.split('/').pop()?.replace(/\.[^.]+$/, '') || '';
+      const fullPath = cleanSrc.startsWith('/') ? cleanSrc : `/${cleanSrc}`;
+      
+      // Try exact path match first
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes(fullPath) || lines[i].includes(cleanSrc)) {
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+            confidence: 'high',
+            matchedBy: `image src="${cleanSrc}"`
+          };
+        }
+      }
+      
+      // Try filename match (handles dynamic sources like brandLogos)
+      if (filename && filename.length > 5) {
+        for (let i = 0; i < lines.length; i++) {
+          if (lines[i].includes(filename)) {
+            return {
+              lineNumber: i + 1,
+              snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+              confidence: 'medium',
+              matchedBy: `image filename="${filename}"`
+            };
+          }
+        }
+      }
+    }
+    
+    // Always try to match the element name (which is usually derived from the image filename)
+    // This works even without imageSrc since the name is captured from alt text or data attributes
+    if (focusedElement.name && focusedElement.name.length > 5) {
+      // Skip generic names
+      const genericNames = ['Logo', 'Image', 'Img', 'Picture', 'Photo', 'Icon'];
+      if (!genericNames.includes(focusedElement.name)) {
+        for (let i = 0; i < lines.length; i++) {
+          if (lines[i].includes(focusedElement.name)) {
+            return {
+              lineNumber: i + 1,
+              snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+              confidence: 'medium',
+              matchedBy: `image name="${focusedElement.name}"`
+            };
+          }
+        }
+      }
+    }
+  }
+  
   // PRIORITY 3: Distinctive className patterns (semantic classes from design system)
   if (focusedElement.className) {
     // SEMANTIC CLASS DETECTION: Instead of filtering OUT utilities, filter IN semantics
@@ -676,10 +785,224 @@ function findElementLineInFile(
       }
     }
   }
-  
+
+  // FALLBACK 3: Multi-line JSX text parsing
+  // This handles cases where text spans multiple lines in JSX
+  if (focusedElement.textContent && focusedElement.textContent.trim().length > 5) {
+    debugLog("Trying multi-line JSX parsing", { text: focusedElement.textContent.substring(0, 50) });
+    const multilineMatch = findTextInMultilineJSX(fileContent, focusedElement.textContent);
+    if (multilineMatch) {
+      debugLog("Multi-line JSX match found", multilineMatch);
+      return multilineMatch;
+    }
+  }
+
   return null;
 }
 
+/**
+ * Multi-line JSX text parser
+ *
+ * Handles text that spans multiple lines in JSX:
+ * ```jsx
+ * <p className="text-base">
+ *   A list of selectable items displayed in a dropdown menu
+ * </p>
+ * ```
+ *
+ * Returns the starting line number of the element if found.
+ */
+function findTextInMultilineJSX(
+  fileContent: string,
+  searchText: string,
+  tagName?: string
+): { lineNumber: number; snippet: string; confidence: 'high' | 'medium'; matchedBy: string } | null {
+  if (!fileContent || !searchText) return null;
+
+  const lines = fileContent.split('\n');
+  const normalizedSearch = searchText.trim().replace(/\s+/g, ' ').toLowerCase();
+
+  // Skip if text is too short
+  if (normalizedSearch.length < 5) return null;
+
+  // Look for JSX elements that might contain this text
+  // Strategy: Find opening tags and then look at subsequent lines for text content
+  const textTags = tagName ? [tagName] : ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'div', 'label', 'a', 'li', 'blockquote', 'figcaption'];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // Check if this line opens a text element
+    for (const tag of textTags) {
+      const tagPattern = new RegExp(`<${tag}(?:\\s|>|$)`, 'i');
+      if (!tagPattern.test(line)) continue;
+
+      // Found a potential opening tag - collect text until closing tag
+      let collectedText = '';
+      let endLineIndex = i;
+      const closingTag = `</${tag}>`;
+
+      // Collect text from this line and subsequent lines
+      for (let j = i; j < Math.min(i + 10, lines.length); j++) {
+        const currentLine = lines[j];
+
+        // Add text content (strip JSX tags and props)
+        const textOnly = currentLine
+          .replace(/<[^>]+>/g, ' ')  // Remove all tags
+          .replace(/\{[^}]*\}/g, '') // Remove JSX expressions
+          .replace(/className=["'][^"']*["']/g, '')
+          .trim();
+
+        if (textOnly) {
+          collectedText += ' ' + textOnly;
+        }
+
+        // Check if we found the closing tag
+        if (currentLine.includes(closingTag) || (j > i && /<\/\w+>/.test(currentLine))) {
+          endLineIndex = j;
+          break;
+        }
+      }
+
+      // Normalize collected text and compare
+      const normalizedCollected = collectedText.trim().replace(/\s+/g, ' ').toLowerCase();
+
+      // Check for match - allow partial matching for long text
+      if (normalizedCollected.includes(normalizedSearch) || normalizedSearch.includes(normalizedCollected)) {
+        return {
+          lineNumber: i + 1,
+          snippet: lines.slice(Math.max(0, i - 2), endLineIndex + 3).join('\n'),
+          confidence: normalizedCollected === normalizedSearch ? 'high' : 'medium',
+          matchedBy: `multi-line JSX <${tag}> text content`
+        };
+      }
+
+      // Also check word overlap for fuzzy matching
+      const searchWords = normalizedSearch.split(' ').filter(w => w.length >= 3);
+      const collectedWords = normalizedCollected.split(' ').filter(w => w.length >= 3);
+
+      if (searchWords.length >= 3 && collectedWords.length >= 3) {
+        const matchingWords = searchWords.filter(w => collectedWords.some(cw => cw.includes(w) || w.includes(cw)));
+        const matchRatio = matchingWords.length / searchWords.length;
+
+        // Require at least 60% word match
+        if (matchRatio >= 0.6) {
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 2), endLineIndex + 3).join('\n'),
+            confidence: 'medium',
+            matchedBy: `multi-line JSX fuzzy match (${Math.round(matchRatio * 100)}% word overlap)`
+          };
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * AI-assisted element location
+ *
+ * When regex-based matching fails, use a focused AI call to locate the element.
+ * This works for ANY codebase structure since it understands code semantics.
+ */
+async function aiAssistedElementLocation(
+  fileContent: string,
+  element: VisionFocusedElement,
+  filePath: string,
+  apiKey: string
+): Promise<{ lineNumber: number; snippet: string; confidence: 'high' | 'medium'; matchedBy: string } | null> {
+  debugLog("Trying AI-assisted element location", {
+    elementType: element.type,
+    textContent: element.textContent?.substring(0, 50),
+    file: filePath
+  });
+
+  // Build a focused prompt for element location
+  const elementInfo = [
+    element.textContent ? `Text content: "${element.textContent}"` : null,
+    element.type ? `Element type: ${element.type}` : null,
+    element.className ? `CSS classes: ${element.className.substring(0, 100)}` : null,
+    element.elementId ? `DOM id: ${element.elementId}` : null,
+    element.name ? `Name: ${element.name}` : null,
+  ].filter(Boolean).join('\n');
+
+  // Add line numbers to file content for reference
+  const lines = fileContent.split('\n');
+  const numberedContent = lines.map((line, i) => `${i + 1}| ${line}`).join('\n');
+
+  // Keep file content reasonable (first 500 lines or 20KB)
+  const maxLines = 500;
+  const maxChars = 20000;
+  let truncatedContent = numberedContent;
+  if (lines.length > maxLines || numberedContent.length > maxChars) {
+    truncatedContent = lines.slice(0, maxLines).map((line, i) => `${i + 1}| ${line}`).join('\n');
+    truncatedContent += '\n... (file truncated for analysis)';
+  }
+
+  const prompt = `You are a code analyzer. Find the LINE NUMBER where a specific UI element is defined in this React/JSX file.
+
+ELEMENT TO FIND:
+${elementInfo}
+
+FILE CONTENT (with line numbers):
+\`\`\`tsx
+${truncatedContent}
+\`\`\`
+
+INSTRUCTIONS:
+1. Find where this element is defined in the JSX
+2. Look for matching text content, className, or element type
+3. Return ONLY a JSON object with the line number
+
+Respond with ONLY valid JSON, no explanation:
+{"lineNumber": <number>, "confidence": "high" | "medium"}
+
+If you cannot find the element, respond with:
+{"lineNumber": null}`;
+
+  try {
+    const anthropic = new Anthropic({ apiKey });
+    const response = await anthropic.messages.create({
+      model: "claude-sonnet-4-20250514",
+      max_tokens: 100,
+      messages: [{ role: "user", content: prompt }]
+    });
+
+    const responseText = response.content[0].type === 'text' ? response.content[0].text : '';
+    debugLog("AI element location response", { raw: responseText });
+
+    // Parse the JSON response
+    const jsonMatch = responseText.match(/\{[^}]+\}/);
+    if (!jsonMatch) {
+      debugLog("AI response not valid JSON");
+      return null;
+    }
+
+    const result = JSON.parse(jsonMatch[0]);
+    if (!result.lineNumber || typeof result.lineNumber !== 'number') {
+      debugLog("AI could not locate element");
+      return null;
+    }
+
+    const lineNum = result.lineNumber;
+    const confidence = result.confidence === 'high' ? 'high' : 'medium';
+
+    debugLog("AI located element successfully", { lineNumber: lineNum, confidence });
+
+    return {
+      lineNumber: lineNum,
+      snippet: lines.slice(Math.max(0, lineNum - 4), Math.min(lines.length, lineNum + 5)).join('\n'),
+      confidence,
+      matchedBy: `AI-assisted location (${confidence} confidence)`
+    };
+  } catch (error) {
+    debugLog("AI element location failed", { error: String(error) });
+    return null;
+  }
+}
+
 /**
  * Search imported component files for specific TEXT CONTENT
  * This is used to redirect from parent components to child components
@@ -821,15 +1144,29 @@ function findElementInImportedFiles(
       file.path.endsWith('.tsx') ||
       file.path.endsWith('.jsx');
     
-    // Skip non-component files but allow page files
-    if (!isComponentFile) continue;
+    // For logo elements, also search config files that may contain image paths
+    const isConfigFile = focusedElement.type === 'logo' && (
+      file.path.includes('brand') ||
+      file.path.includes('config') ||
+      file.path.includes('constants') ||
+      file.path.includes('assets') ||
+      file.path.includes('images') ||
+      file.path.includes('theme')
+    );
+    
+    // Skip non-component files but allow page files and config files for logos
+    if (!isComponentFile && !isConfigFile) continue;
     
-    // Skip known non-UI files
-    if (file.path.includes('/types') || 
+    // Skip known non-UI files (but allow config files for logos)
+    const isSkippable = file.path.includes('/types') || 
         file.path.includes('/hooks/') || 
-        file.path.includes('/utils/') || 
-        file.path.includes('/lib/') ||
-        file.path.includes('.d.ts')) continue;
+        file.path.includes('.d.ts');
+    
+    // For non-logo elements, also skip utils and lib
+    const isUtilFile = file.path.includes('/utils/') || file.path.includes('/lib/');
+    
+    if (isSkippable) continue;
+    if (isUtilFile && focusedElement.type !== 'logo') continue;
     
     const result = findElementLineInFile(file.content, focusedElement);
     // Accept ALL matches including low confidence - let the scoring decide
@@ -1722,7 +2059,8 @@ function searchFilesSmart(
   return sortedResults.map(r => ({ path: r.path, content: r.content, score: r.score, filenameMatch: r.filenameMatch }));
 }
 
-const VISION_SYSTEM_PROMPT = `You are an expert frontend developer. Edit the code to fulfill the user's request.
+// Base system prompt - styling guidance is added dynamically based on codebase detection
+const VISION_SYSTEM_PROMPT_BASE = `You are an expert frontend developer. Edit the code to fulfill the user's request.
 
 CRITICAL: Return ONLY the JSON object. No explanations, no preamble, no markdown code fences.
 Start your response with { and end with }
@@ -1732,6 +2070,54 @@ Output format:
 
 The "search" field must match the file EXACTLY (copy-paste from the code provided).`;
 
+// Cache for styling analysis to avoid re-detecting on each request
+let cachedStylingAnalysis: StylingAnalysis | null = null;
+let cachedStylingGuidance: string | null = null;
+let cacheTimestamp: number = 0;
+const CACHE_TTL = 60000; // 1 minute cache
+
+/**
+ * Build the complete system prompt with dynamic styling guidance
+ */
+async function buildVisionSystemPrompt(projectRoot: string): Promise<string> {
+  const now = Date.now();
+  
+  // Use cache if available and fresh
+  if (cachedStylingGuidance && (now - cacheTimestamp) < CACHE_TTL) {
+    return VISION_SYSTEM_PROMPT_BASE + "\n\n" + cachedStylingGuidance;
+  }
+  
+  // Detect styling system
+  try {
+    cachedStylingAnalysis = await detectStylingSystem(projectRoot);
+    cachedStylingGuidance = generateStylingGuidance(cachedStylingAnalysis);
+    cacheTimestamp = now;
+    
+    debugLog("Styling system detected", {
+      primary: cachedStylingAnalysis.primarySystem,
+      secondary: cachedStylingAnalysis.secondarySystems,
+      libraries: cachedStylingAnalysis.componentLibraries,
+      confidence: cachedStylingAnalysis.confidence,
+      hasClassMerging: cachedStylingAnalysis.hasClassMerging,
+    });
+  } catch (error) {
+    debugLog("Styling detection failed, using generic guidance", { error });
+    cachedStylingGuidance = generateStylingGuidance({
+      primarySystem: "unknown",
+      secondarySystems: [],
+      componentLibraries: [],
+      hasClassMerging: false,
+      hasCSSVariables: false,
+      hasDesignTokens: false,
+      confidence: 0,
+      evidence: { files: [], patterns: [] },
+    });
+    cacheTimestamp = now;
+  }
+  
+  return VISION_SYSTEM_PROMPT_BASE + "\n\n" + cachedStylingGuidance;
+}
+
 /**
  * PHASE 2: Targeted Patch Generation Prompt
  * 
@@ -1831,6 +2217,129 @@ DESIGN CONSTRAINTS
 ═══════════════════════════════════════════════════════════════════════════════
 `;
 
+/**
+ * Modification Intent Types
+ * - 'instance': User wants to modify specific instances (e.g., "make THESE cards sharp")
+ * - 'component': User wants to modify the component definition (e.g., "make ALL cards sharp")
+ * - 'unknown': Cannot determine intent, default to instance behavior
+ */
+type ModificationIntent = 'instance' | 'component' | 'unknown';
+
+/**
+ * Analyze user prompt to determine modification scope
+ * 
+ * This helps the AI understand whether to:
+ * - Modify instances in the page file (instance)
+ * - Modify the component definition file (component)
+ * 
+ * Examples:
+ * - "make THESE cards sharp" → instance (modify page file)
+ * - "make ALL cards sharp" → component (modify Card.tsx)
+ * - "change the Card component" → component (modify Card.tsx)
+ * - "give this button a red background" → instance (modify page file)
+ */
+function analyzeModificationIntent(prompt: string): { 
+  intent: ModificationIntent; 
+  reason: string;
+  componentName?: string; // e.g., "Card", "Button" - extracted from prompt
+} {
+  const promptLower = prompt.toLowerCase();
+  
+  // Component-level patterns (modify the component definition)
+  const componentPatterns = [
+    { pattern: /\b(all|every|each)\s+(cards?|buttons?|inputs?|dialogs?|modals?)/i, reason: 'Plural "all/every" indicates global change' },
+    { pattern: /\bthe\s+(card|button|input|dialog|modal)\s+component/i, reason: 'Explicit component reference' },
+    { pattern: /\bcomponent\s+(default|definition|style)/i, reason: 'Explicit component modification' },
+    { pattern: /\bglobally?\b/i, reason: 'Global keyword detected' },
+    { pattern: /\bdefault\s+(style|behavior|look)/i, reason: 'Default modification requested' },
+    { pattern: /\beverywhere\b/i, reason: 'Everywhere keyword detected' },
+  ];
+  
+  // Instance-level patterns (modify specific instances)
+  const instancePatterns = [
+    { pattern: /\b(this|these|that|those)\s+\w+/i, reason: 'Demonstrative pronoun indicates specific instance' },
+    { pattern: /\bthe\s+\w+\s+(here|on this page|in this section)/i, reason: 'Location-specific reference' },
+    { pattern: /\bjust\s+(this|the)/i, reason: 'Restrictive "just" indicates specific instance' },
+    { pattern: /\bonly\s+(this|the|these)/i, reason: 'Restrictive "only" indicates specific instance' },
+  ];
+  
+  // Check for component patterns first (they're more specific)
+  for (const { pattern, reason } of componentPatterns) {
+    const match = promptLower.match(pattern);
+    if (match) {
+      // Extract component name if present
+      const componentMatch = prompt.match(/\b(card|button|input|dialog|modal|badge|tabs?|dropdown)/i);
+      return { 
+        intent: 'component', 
+        reason,
+        componentName: componentMatch ? componentMatch[1].charAt(0).toUpperCase() + componentMatch[1].slice(1).toLowerCase() : undefined
+      };
+    }
+  }
+  
+  // Check for instance patterns
+  for (const { pattern, reason } of instancePatterns) {
+    if (pattern.test(promptLower)) {
+      return { intent: 'instance', reason };
+    }
+  }
+  
+  // Default to instance when user clicks on specific element
+  return { 
+    intent: 'unknown', 
+    reason: 'No clear intent markers detected, will use element location as guide'
+  };
+}
+
+/**
+ * Find the component definition file for a given component name
+ * Searches common component directories: components/ui/, components/, etc.
+ */
+function findComponentDefinitionFile(
+  componentName: string,
+  projectRoot: string
+): { path: string; content: string } | null {
+  // Common component directory patterns
+  const searchPaths = [
+    `src/components/ui/${componentName.toLowerCase()}.tsx`,
+    `src/components/ui/${componentName.toLowerCase()}.jsx`,
+    `src/components/${componentName.toLowerCase()}.tsx`,
+    `src/components/${componentName.toLowerCase()}.jsx`,
+    `components/ui/${componentName.toLowerCase()}.tsx`,
+    `components/${componentName.toLowerCase()}.tsx`,
+  ];
+  
+  for (const searchPath of searchPaths) {
+    const fullPath = path.join(projectRoot, searchPath);
+    if (fs.existsSync(fullPath)) {
+      try {
+        const content = fs.readFileSync(fullPath, 'utf-8');
+        // Verify it's actually a component definition (has export, cva, or component patterns)
+        if (content.includes('export') && (
+          content.includes('cva(') || 
+          content.includes('forwardRef') ||
+          content.includes('function ' + componentName) ||
+          content.includes('const ' + componentName)
+        )) {
+          debugLog("Found component definition file", { 
+            componentName, 
+            path: searchPath 
+          });
+          return { path: searchPath, content };
+        }
+      } catch {
+        // Ignore read errors
+      }
+    }
+  }
+  
+  debugLog("Component definition file not found", { 
+    componentName, 
+    searchedPaths: searchPaths 
+  });
+  return null;
+}
+
 /**
  * Validate patches against identified problems
  * Rejects patches that don't reference a valid problem ID
@@ -1936,7 +2445,7 @@ export async function POST(request: Request) {
 
   try {
     const body: ApplyFirstRequest = await request.json();
-    const { action, sessionId, screenshot, pageRoute, userPrompt, focusedElements, previewedModifications, chatHistory } = body;
+    const { action, sessionId, screenshot, pageRoute, userPrompt, focusedElements, previewedModifications, chatHistory, currentTheme, propertyEdits } = body;
     const projectRoot = process.cwd();
 
     // ========== ACCEPT ACTION ==========
@@ -2037,6 +2546,9 @@ export async function POST(request: Request) {
       // Generate a unique session ID
       const newSessionId = randomUUID().slice(0, 8);
 
+      // Build dynamic system prompt based on detected styling system
+      const visionSystemPrompt = await buildVisionSystemPrompt(projectRoot);
+      
       // Initialize file discovery variables
       let smartSearchFiles: { path: string; content: string }[] = [];
       let recommendedFile: { path: string; reason: string } | null = null;
@@ -2456,7 +2968,7 @@ export async function POST(request: Request) {
           const importedMatch = findElementInImportedFiles(
             focusedElements[0],
             pageContext.componentSources,
-            actualTargetFile?.path // Pass page file for proximity scoring
+            actualTargetFile?.path ?? undefined // Pass page file for proximity scoring
           );
           
           if (importedMatch) {
@@ -2519,17 +3031,71 @@ export async function POST(request: Request) {
       }
       
       // ========== SMART SEARCH FALLBACK ==========
-      // If we still don't have a good target file (just the page wrapper), 
-      // use the smart search top result - it already found relevant files!
-      if (actualTargetFile && actualTargetFile.path === pageContext.pageFile && smartSearchTopPath) {
+      // Use smart search fallback when:
+      // 1. Element was NOT found OR found with LOW confidence in the current target file
+      // 2. Current target is still the page wrapper file
+      // 3. We have a smart search result to redirect to
+      // This allows weak matches (low confidence) to be overridden by better search results
+      const isWeakOrNoMatch = !elementLocation || elementLocation.confidence === 'low';
+      
+      if (isWeakOrNoMatch && actualTargetFile && actualTargetFile.path === pageContext.pageFile && smartSearchTopPath) {
         const smartSearchFullPath = path.join(projectRoot, smartSearchTopPath);
         if (fs.existsSync(smartSearchFullPath)) {
           const smartSearchContent = fs.readFileSync(smartSearchFullPath, 'utf-8');
+          const previousConfidence = elementLocation?.confidence || 'none';
           actualTargetFile = { path: smartSearchTopPath, content: smartSearchContent };
-          debugLog("SMART SEARCH FALLBACK: Using top smart search result as target", {
+          // Reset elementLocation so we search for the element in the new file
+          elementLocation = null;
+          debugLog("SMART SEARCH FALLBACK: Weak/no match in page file, using smart search result", {
             originalFile: pageContext.pageFile,
             redirectTo: smartSearchTopPath,
-            contentLength: smartSearchContent.length
+            contentLength: smartSearchContent.length,
+            previousConfidence,
+            reason: previousConfidence === 'low' 
+              ? "Low confidence match overridden by smart search" 
+              : "Element was not located in the page file"
+          });
+        }
+      } else if (elementLocation && elementLocation.confidence !== 'low' && actualTargetFile?.path === pageContext.pageFile) {
+        debugLog("SMART SEARCH FALLBACK: SKIPPED - Element found with sufficient confidence in page file", {
+          file: actualTargetFile.path,
+          matchedBy: elementLocation.matchedBy,
+          confidence: elementLocation.confidence,
+          wouldHaveRedirectedTo: smartSearchTopPath || 'none'
+        });
+      }
+      
+      // ========== INTENT-BASED COMPONENT REDIRECT ==========
+      // Analyze user prompt to determine if they want to modify:
+      // - Instance: specific elements on this page (keep current target)
+      // - Component: the component definition (redirect to component file)
+      const intentAnalysis = analyzeModificationIntent(userPrompt);
+      debugLog("Intent analysis", {
+        intent: intentAnalysis.intent,
+        reason: intentAnalysis.reason,
+        componentName: intentAnalysis.componentName || 'none'
+      });
+      
+      if (intentAnalysis.intent === 'component' && intentAnalysis.componentName) {
+        // User wants to modify the component definition (e.g., "make ALL cards sharp")
+        const componentFile = findComponentDefinitionFile(intentAnalysis.componentName, projectRoot);
+        
+        if (componentFile) {
+          debugLog("INTENT REDIRECT: Switching to component definition file", {
+            originalTarget: actualTargetFile?.path || 'none',
+            componentName: intentAnalysis.componentName,
+            redirectTo: componentFile.path,
+            reason: intentAnalysis.reason
+          });
+          
+          actualTargetFile = componentFile;
+          
+          // Clear element location since we're now targeting the component file
+          elementLocation = null;
+        } else {
+          debugLog("INTENT REDIRECT: Could not find component definition, keeping instance target", {
+            componentName: intentAnalysis.componentName,
+            fallbackTarget: actualTargetFile?.path || 'none'
           });
         }
       }
@@ -2537,7 +3103,8 @@ export async function POST(request: Request) {
       debugLog("File redirect complete", {
         originalRecommended: recommendedFileContent?.path || 'none',
         actualTarget: actualTargetFile?.path || 'none',
-        wasRedirected: actualTargetFile?.path !== recommendedFileContent?.path
+        wasRedirected: actualTargetFile?.path !== recommendedFileContent?.path,
+        intent: intentAnalysis.intent
       });
 
       // Build text content
@@ -2545,6 +3112,8 @@ export async function POST(request: Request) {
 
 Page Route: ${pageRoute}
 User Request: "${userPrompt}"
+Modification Scope: ${intentAnalysis.intent === 'component' ? 'COMPONENT DEFINITION (modify all instances globally)' : intentAnalysis.intent === 'instance' ? 'SPECIFIC INSTANCE (modify only what user clicked)' : 'INSTANCE (default - modify in current file)'}
+${intentAnalysis.componentName ? `Target Component: ${intentAnalysis.componentName}` : ''}
 
 `;
 
@@ -2597,7 +3166,18 @@ User Request: "${userPrompt}"
           for (const el of focusedElements) {
             textContent += `- ${el.name} (${el.type})`;
             if (el.textContent) {
-              textContent += ` with text "${el.textContent.substring(0, 30)}"`;
+              // Provide more text content for better element identification (up to 100 chars)
+              const truncatedText = el.textContent.length > 100
+                ? el.textContent.substring(0, 100) + '...'
+                : el.textContent;
+              textContent += ` with text "${truncatedText}"`;
+            }
+            if (el.className) {
+              // Include className for additional matching context
+              const truncatedClass = el.className.length > 80
+                ? el.className.substring(0, 80) + '...'
+                : el.className;
+              textContent += `\n  className="${truncatedClass}"`;
             }
             textContent += `\n`;
             
@@ -2650,28 +3230,163 @@ ${elementLocation.snippet}
 ⚠️  IMPORTANT: Modify ONLY the element at line ${elementLocation.lineNumber}, NOT other similar elements in the file.
 
 `;
+            // Add special guidance for text elements with low/medium confidence
+            if (elementLocation.confidence !== 'high' && focusedElements[0]?.type === 'text') {
+              const colorMatch = userPrompt?.match(/#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}|rgb\([^)]+\)|rgba\([^)]+\)/);
+              const targetColor = colorMatch ? colorMatch[0] : '';
+              
+              // Determine theme-specific color from propertyEdits
+              const themeColor = currentTheme === 'dark' 
+                ? propertyEdits?.colorDark 
+                : propertyEdits?.colorLight;
+              const effectiveColor = themeColor || targetColor || '#hexcolor';
+              
+              // Build the appropriate class based on current theme
+              const newThemeClass = currentTheme === 'dark'
+                ? `dark:text-[${effectiveColor}]`
+                : `text-[${effectiveColor}]`;
+              
+              // The OTHER mode's prefix pattern to preserve
+              const otherModePattern = currentTheme === 'dark'
+                ? 'text-[' // In dark mode, preserve unprefixed light mode classes
+                : 'dark:text-['; // In light mode, preserve dark: prefixed classes
+
+              textContent += `
+📝 TEXT ELEMENT MODIFICATION GUIDANCE:
+This is a text element matched with ${elementLocation.confidence} confidence.
+PROCEED with the modification - the element is at line ${elementLocation.lineNumber}.
+
+🎨 THEME-AWARE COLOR CHANGE (Current mode: ${currentTheme || 'light'}):
+The user is changing the color ONLY for ${currentTheme || 'light'} mode.
+
+THEME-SPECIFIC COLOR RULES:
+- Light mode colors use UNPREFIXED classes: text-[#hexcolor]
+- Dark mode colors use dark: PREFIX: dark:text-[#hexcolor]
+- BOTH can coexist: text-[#lightcolor] dark:text-[#darkcolor]
+
+Current mode is "${currentTheme || 'light'}", so:
+${currentTheme === 'dark' 
+  ? `- ADD/REPLACE: dark:text-[${effectiveColor}] (NEW dark mode color)
+- PRESERVE: any existing text-[#...] class (light mode - DO NOT REMOVE)`
+  : `- ADD/REPLACE: text-[${effectiveColor}] (NEW light mode color)
+- PRESERVE: any existing dark:text-[#...] class (dark mode - DO NOT REMOVE)`
+}
+
+⚠️ INLINE STYLE HANDLING:
+If element has inline style with color, REMOVE the inline color and use Tailwind class instead.
+
+EXAMPLES:
+
+Example 1 - Preserving other mode's color:
+{
+  "search": "<span className=\\"${currentTheme === 'dark' ? 'text-[#333333]' : 'dark:text-[#FFFFFF]'}\\">",
+  "replace": "<span className=\\"${currentTheme === 'dark' ? 'text-[#333333] ' + newThemeClass : newThemeClass + ' dark:text-[#FFFFFF]'}\\">"
+}
+
+Example 2 - Removing inline style:
+{
+  "search": "<span style={{color: '#D9D9D6'}}>",
+  "replace": "<span className=\\"${newThemeClass}\\">"
+}
+
+DO NOT return empty modifications. The element exists at line ${elementLocation.lineNumber}.
+
+`;
+            }
           } else {
-            // 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", {
+            // Element NOT found by regex - try AI-assisted location as last resort
+            debugLog("Regex matching failed, trying AI-assisted location...", {
               mainFile: actualTargetFile.path,
-              searchedImports: pageContext.componentSources.length,
-              focusedElements: focusedElements.map(el => ({
-                name: el.name,
-                type: el.type,
-                textContent: el.textContent?.substring(0, 30),
-                className: el.className?.substring(0, 50),
-                elementId: el.elementId,
-              }))
+              focusedElement: focusedElements[0]?.textContent?.substring(0, 50)
             });
-            
-            // STRONG BLOCK instruction - tell LLM to NOT guess
-            textContent += `
+
+            // Try AI-assisted location for each focused element
+            let aiLocation = null;
+            for (const el of focusedElements) {
+              if (el.textContent && el.textContent.length > 5) {
+                aiLocation = await aiAssistedElementLocation(
+                  actualTargetFile.content,
+                  el,
+                  actualTargetFile.path ?? '',
+                  apiKey
+                );
+                if (aiLocation) {
+                  elementLocation = aiLocation;
+                  debugLog("AI located element successfully", {
+                    lineNumber: aiLocation.lineNumber,
+                    confidence: aiLocation.confidence,
+                    matchedBy: aiLocation.matchedBy
+                  });
+                  break;
+                }
+              }
+            }
+
+            if (elementLocation) {
+              // AI found the element - add precise targeting info
+              textContent += `
+══════════════════════════════════════════════════════════════════════════════
+PRECISE TARGET LOCATION (${elementLocation.confidence} confidence) - AI-Assisted
+══════════════════════════════════════════════════════════════════════════════
+  → Matched by: ${elementLocation.matchedBy}
+  → Line: ${elementLocation.lineNumber}
+
+THE USER CLICKED ON THE ELEMENT AT LINE ${elementLocation.lineNumber}.
+Here is the exact code around that element:
+\`\`\`
+${elementLocation.snippet}
+\`\`\`
+
+⚠️  IMPORTANT: Modify ONLY the element at line ${elementLocation.lineNumber}, NOT other similar elements in the file.
+
+`;
+              // Add special guidance for text elements (AI-assisted location)
+              if (focusedElements[0]?.type === 'text') {
+                const colorMatch = userPrompt?.match(/#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}|rgb\([^)]+\)|rgba\([^)]+\)/);
+                const targetColor = colorMatch ? colorMatch[0] : '';
+
+                textContent += `
+📝 TEXT ELEMENT MODIFICATION GUIDANCE:
+This is a text element located by AI at line ${elementLocation.lineNumber}.
+PROCEED with the modification.
+
+For TEXT COLOR changes, use one of these approaches:
+1. Tailwind arbitrary value (preferred): className="text-[${targetColor || '#hexcolor'}]"
+2. Add style prop: style={{ color: '${targetColor || '#hexcolor'}' }}
+
+Search for the opening tag of the text element at line ${elementLocation.lineNumber} and add the color styling.
+Example modification:
+{
+  "search": "<p className=\\"existing-classes\\">",
+  "replace": "<p className=\\"existing-classes text-[${targetColor || '#hexcolor'}]\\">"
+}
+
+DO NOT return empty modifications. The element exists at line ${elementLocation.lineNumber}.
+
+`;
+              }
+            } else {
+              // Element NOT found even with AI - BLOCK the LLM from guessing
+              debugLog("BLOCK: Could not locate focused element anywhere (including AI fallback)", {
+                mainFile: actualTargetFile.path,
+                searchedImports: pageContext.componentSources.length,
+                focusedElements: focusedElements.map(el => ({
+                  name: el.name,
+                  type: el.type,
+                  textContent: el.textContent?.substring(0, 30),
+                  className: el.className?.substring(0, 50),
+                  elementId: el.elementId,
+                }))
+              });
+
+              // STRONG BLOCK instruction - tell LLM to NOT guess
+              textContent += `
 ⛔ STOP: CANNOT LOCATE THE CLICKED ELEMENT
 
 The user clicked on a specific element, but it could NOT be found in:
 - ${actualTargetFile.path} (main target file)
 - Any of the ${pageContext.componentSources.length} imported component files
+- AI-assisted search also failed to locate the element
 
 The element may be:
 - Deeply nested in a component not in the import tree
@@ -2685,6 +3400,7 @@ DO NOT GUESS. Return this exact response:
 }
 
 `;
+            }
           }
         }
         
@@ -2733,32 +3449,45 @@ ${linesWithNumbers}
         usedContext += content.length;
       }
       
-      // ========== KEY UI COMPONENTS ==========
+      // ========== KEY UI COMPONENTS (CVA) ==========
       // Include UI component definitions (Button, Card, etc.) so LLM knows available variants/props
-      const uiComponentPaths = ['components/ui/button', 'components/ui/card', 'components/ui/input'];
+      // This helps the AI understand what default styles exist and how to properly override them
+      const uiComponentPaths = [
+        'components/ui/button', 
+        'components/ui/card', 
+        'components/ui/input',
+        'components/ui/badge',
+        'components/ui/dialog',
+        'components/ui/tabs',
+      ];
       const includedUIComponents: string[] = [];
       
       for (const comp of pageContext.componentSources) {
         // Check if this is a UI component we should include
         const isUIComponent = uiComponentPaths.some(uiPath => comp.path.includes(uiPath));
         if (isUIComponent && usedContext + comp.content.length < TOTAL_CONTEXT_BUDGET) {
-          // Only include the variants/props section, not the whole file
-          const variantsMatch = comp.content.match(/variants:\s*\{[\s\S]*?\n\s*\},\n\s*defaultVariants/);
-          if (variantsMatch) {
-          textContent += `
---- UI Component: ${comp.path} (variants only) ---
-${variantsMatch[0]}
+          // Capture the full CVA definition including variants AND defaultVariants
+          const cvaMatch = comp.content.match(/const \w+Variants = cva\(\s*["`'][\s\S]*?defaultVariants:\s*\{[^}]*\},?\s*\}\s*\)/);
+          if (cvaMatch) {
+            textContent += `
+--- UI Component: ${comp.path} (CVA definition) ---
+${cvaMatch[0]}
+
+⚠️ NOTE: This component has DEFAULT STYLES via CVA.
+- Use variant props when available: size="compact", variant="elevated"
+- Or override with className: className="rounded-none" (tailwind-merge handles conflicts)
+- The cn() utility merges classes intelligently, so className WILL override defaults
 ---
 
 `;
             includedUIComponents.push(comp.path);
-            usedContext += variantsMatch[0].length + 100;
+            usedContext += cvaMatch[0].length + 200;
           }
         }
       }
       
       if (includedUIComponents.length > 0) {
-        debugLog("Included UI component definitions", { components: includedUIComponents });
+        debugLog("Included UI component CVA definitions", { components: includedUIComponents });
       }
 
       // ========== THEME DISCOVERY ==========
@@ -2811,7 +3540,209 @@ Your patch should be:
   }]
 }
 
+`;
+
+      // Add CRITICAL instruction - softer for text elements with color changes
+      const isTextColorChange = focusedElements?.some(el => el.type === 'text') &&
+                                userPrompt?.toLowerCase().includes('color');
+
+      if (isTextColorChange && elementLocation) {
+        // Determine theme-specific color from propertyEdits
+        const themeColor = currentTheme === 'dark' 
+          ? propertyEdits?.colorDark 
+          : propertyEdits?.colorLight;
+        const colorMatch = userPrompt?.match(/#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}|rgb\([^)]+\)|rgba\([^)]+\)/);
+        const effectiveColor = themeColor || (colorMatch ? colorMatch[0] : '#hexcolor');
+        
+        // Build the appropriate class based on current theme
+        // Light mode: unprefixed text-[#color]
+        // Dark mode: dark:text-[#color]
+        const newThemeClass = currentTheme === 'dark'
+          ? `dark:text-[${effectiveColor}]`
+          : `text-[${effectiveColor}]`;
+        
+        // The OTHER mode's prefix pattern to preserve
+        const otherModePattern = currentTheme === 'dark'
+          ? 'text-[' // In dark mode, preserve unprefixed light mode classes
+          : 'dark:text-['; // In light mode, preserve dark: prefixed classes
+
+        debugLog("Using theme-aware instruction for text color change", {
+          elementLine: elementLocation.lineNumber,
+          confidence: elementLocation.confidence,
+          matchedBy: elementLocation.matchedBy,
+          currentTheme: currentTheme || 'light',
+          newThemeClass,
+          otherModePattern
+        });
+        textContent += `
+IMPORTANT: For this THEME-AWARE text color change (${currentTheme || 'light'} mode):
+1. Find the text element at line ${elementLocation.lineNumber}
+2. ADD or REPLACE the ${currentTheme || 'light'} mode color class: "${newThemeClass}"
+3. PRESERVE any existing ${currentTheme === 'dark' ? 'light' : 'dark'} mode color classes (look for "${otherModePattern}...")
+4. Your "search" string should match the opening tag of the element
+
+🎨 THEME-SPECIFIC COLOR RULES:
+- Light mode colors use UNPREFIXED classes: text-[#hexcolor]
+- Dark mode colors use dark: PREFIX: dark:text-[#hexcolor]
+- BOTH can coexist on the same element: text-[#lightcolor] dark:text-[#darkcolor]
+
+Current mode is "${currentTheme || 'light'}", so:
+${currentTheme === 'dark' 
+  ? `- ADD/REPLACE: dark:text-[${effectiveColor}] (this is the NEW dark mode color)
+- PRESERVE: any existing text-[#...] class (the light mode color - DO NOT REMOVE IT)`
+  : `- ADD/REPLACE: text-[${effectiveColor}] (this is the NEW light mode color)
+- PRESERVE: any existing dark:text-[#...] class (the dark mode color - DO NOT REMOVE IT)`
+}
+
+⚠️ CRITICAL - INLINE STYLE HANDLING:
+If the element has an inline style with color (e.g., style={{color: '#...'}}) or style="color: ..."),
+you MUST REMOVE the inline color from the style prop and use the Tailwind class instead.
+Inline styles override Tailwind classes due to CSS specificity.
+
+EXAMPLES:
+
+Example 1 - Changing light mode color (preserving dark mode):
+- BEFORE: <span className="dark:text-[#FFFFFF]">text</span>
+- AFTER:  <span className="${currentTheme !== 'dark' ? newThemeClass : 'text-[#333333]'} dark:text-[#FFFFFF]">text</span>
+
+Example 2 - Changing dark mode color (preserving light mode):
+- BEFORE: <span className="text-[#333333]">text</span>
+- AFTER:  <span className="text-[#333333] ${currentTheme === 'dark' ? newThemeClass : 'dark:text-[#FFFFFF]'}">text</span>
+
+Example 3 - Removing inline style and adding theme class:
+- BEFORE: <span style={{color: '#D9D9D6'}}>text</span>
+- AFTER:  <span className="${newThemeClass}">text</span>
+
+Example 4 - Both modes already exist, updating ${currentTheme || 'light'} mode:
+- BEFORE: <span className="text-[#oldLight] dark:text-[#oldDark]">text</span>
+- AFTER:  <span className="${currentTheme === 'dark' ? 'text-[#oldLight] ' + newThemeClass : newThemeClass + ' dark:text-[#oldDark]'}">text</span>
+
+DO NOT return empty modifications. The element exists at line ${elementLocation.lineNumber}.
+`;
+      } else {
+        textContent += `
 CRITICAL: Your "search" string MUST exist in the file. If you can't find the exact code, return empty modifications.`;
+      }
+
+      // Add property-specific Tailwind guidance for non-color style changes
+      if (propertyEdits && elementLocation) {
+        const propertyGuidance: string[] = [];
+        
+        // Typography properties
+        if (propertyEdits.fontSize) {
+          propertyGuidance.push(`
+📐 FONT SIZE: Change to ${propertyEdits.fontSize}
+Use Tailwind arbitrary value in className: text-[${propertyEdits.fontSize}]
+Or use standard sizes: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, etc.
+Example: className="text-[${propertyEdits.fontSize}]"`);
+        }
+        
+        if (propertyEdits.fontWeight) {
+          const weightMap: Record<string, string> = {
+            '100': 'font-thin', '200': 'font-extralight', '300': 'font-light',
+            '400': 'font-normal', '500': 'font-medium', '600': 'font-semibold',
+            '700': 'font-bold', '800': 'font-extrabold', '900': 'font-black'
+          };
+          const tailwindClass = weightMap[propertyEdits.fontWeight] || `font-[${propertyEdits.fontWeight}]`;
+          propertyGuidance.push(`
+⚖️ FONT WEIGHT: Change to ${propertyEdits.fontWeight}
+Use Tailwind class: ${tailwindClass}
+Example: className="${tailwindClass}"`);
+        }
+        
+        if (propertyEdits.lineHeight) {
+          propertyGuidance.push(`
+↕️ LINE HEIGHT: Change to ${propertyEdits.lineHeight}
+Use Tailwind arbitrary value: leading-[${propertyEdits.lineHeight}]
+Or use standard values: leading-none, leading-tight, leading-normal, leading-relaxed, leading-loose
+Example: className="leading-[${propertyEdits.lineHeight}]"`);
+        }
+        
+        if (propertyEdits.letterSpacing) {
+          propertyGuidance.push(`
+↔️ LETTER SPACING: Change to ${propertyEdits.letterSpacing}
+Use Tailwind arbitrary value: tracking-[${propertyEdits.letterSpacing}]
+Or use standard values: tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest
+Example: className="tracking-[${propertyEdits.letterSpacing}]"`);
+        }
+        
+        // Layout properties
+        if (propertyEdits.width) {
+          propertyGuidance.push(`
+📏 WIDTH: Change to ${propertyEdits.width}
+Use Tailwind arbitrary value: w-[${propertyEdits.width}]
+Or use standard widths: w-full, w-1/2, w-auto, w-screen, w-64, w-96, etc.
+Example: className="w-[${propertyEdits.width}]"`);
+        }
+        
+        if (propertyEdits.height) {
+          propertyGuidance.push(`
+📐 HEIGHT: Change to ${propertyEdits.height}
+Use Tailwind arbitrary value: h-[${propertyEdits.height}]
+Or use standard heights: h-full, h-1/2, h-auto, h-screen, h-64, h-96, etc.
+Example: className="h-[${propertyEdits.height}]"`);
+        }
+        
+        // Appearance properties
+        if (propertyEdits.opacity) {
+          const opacityValue = parseInt(propertyEdits.opacity);
+          propertyGuidance.push(`
+👁️ OPACITY: Change to ${propertyEdits.opacity}%
+Use Tailwind class: opacity-${opacityValue}
+Standard values: opacity-0, opacity-25, opacity-50, opacity-75, opacity-100
+Example: className="opacity-${opacityValue}"`);
+        }
+        
+        if (propertyEdits.borderRadius) {
+          propertyGuidance.push(`
+⬜ BORDER RADIUS: Change to ${propertyEdits.borderRadius}
+Use Tailwind arbitrary value: rounded-[${propertyEdits.borderRadius}]
+Or use standard values: rounded-none, rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-full
+Example: className="rounded-[${propertyEdits.borderRadius}]"`);
+        }
+        
+        // Spacing properties
+        if (propertyEdits.padding) {
+          propertyGuidance.push(`
+📦 PADDING: Change to ${propertyEdits.padding}
+Use Tailwind arbitrary value: p-[${propertyEdits.padding}]
+Or use standard values: p-0, p-1, p-2, p-4, p-6, p-8, px-4, py-2, pt-4, pb-4, etc.
+Example: className="p-[${propertyEdits.padding}]"`);
+        }
+        
+        if (propertyEdits.margin) {
+          propertyGuidance.push(`
+↔️ MARGIN: Change to ${propertyEdits.margin}
+Use Tailwind arbitrary value: m-[${propertyEdits.margin}]
+Or use standard values: m-0, m-1, m-2, m-4, m-6, m-8, mx-auto, my-4, mt-4, mb-4, etc.
+Example: className="m-[${propertyEdits.margin}]"`);
+        }
+        
+        if (propertyEdits.gap) {
+          propertyGuidance.push(`
+🔲 GAP: Change to ${propertyEdits.gap}
+Use Tailwind arbitrary value: gap-[${propertyEdits.gap}]
+Or use standard values: gap-0, gap-1, gap-2, gap-4, gap-6, gap-8, gap-x-4, gap-y-4, etc.
+Example: className="gap-[${propertyEdits.gap}]"`);
+        }
+        
+        if (propertyGuidance.length > 0) {
+          textContent += `
+
+═══════════════════════════════════════════════════════════════════════════════
+PROPERTY-SPECIFIC TAILWIND GUIDANCE
+═══════════════════════════════════════════════════════════════════════════════
+${propertyGuidance.join('\n')}
+
+IMPORTANT: 
+1. Add these Tailwind classes to the element's className prop
+2. If the element already has a className, ADD the new class to it
+3. If using arbitrary values like w-[200px], ensure the square brackets are included
+4. Prefer arbitrary values [value] when exact values are needed
+5. Check for existing conflicting classes and replace them (e.g., replace text-sm with text-lg)
+`;
+        }
+      }
 
       messageContent.push({
         type: "text",
@@ -2835,7 +3766,7 @@ CRITICAL: Your "search" string MUST exist in the file. If you can't find the exa
       if (recommendedFileContent) {
         validFilePaths.add(recommendedFileContent.path);
       }
-      if (actualTargetFile && actualTargetFile.path !== recommendedFileContent?.path) {
+      if (actualTargetFile && actualTargetFile.path && actualTargetFile.path !== recommendedFileContent?.path) {
         validFilePaths.add(actualTargetFile.path);
       }
       
@@ -2916,7 +3847,7 @@ This is better than generating patches with made-up code.`,
         model: "claude-sonnet-4-20250514",
         max_tokens: 16384,
           messages: currentMessages,
-        system: VISION_SYSTEM_PROMPT,
+        system: visionSystemPrompt,
       });
 
       // Extract text content from response