sonance-brand-mcp 1.3.104 → 1.3.106

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

@@ -137,6 +137,132 @@ 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.
+ */
+function sanitizeJsonString(text: string): string {
+  const trimmed = text.trim();
+  
+  debugLog("[sanitizeJsonString] Starting", {
+    inputLength: trimmed.length,
+    first100: trimmed.substring(0, 100),
+    last100: trimmed.substring(trimmed.length - 100)
+  });
+  
+  // Try parsing as-is first
+  try {
+    JSON.parse(trimmed);
+    debugLog("[sanitizeJsonString] Parsed as-is successfully");
+    return trimmed;
+  } catch (e) {
+    const error = e as Error;
+    debugLog("[sanitizeJsonString] Initial parse failed", {
+      error: error.message,
+      // Try to find where the error is
+      errorPosition: error.message.match(/position (\d+)/)?.[1]
+    });
+  }
+  
+  // Find the correct end using balanced bracket counting
+  let braceCount = 0;
+  let bracketCount = 0;
+  let inString = false;
+  let escapeNext = false;
+  let endIndex = -1;
+  
+  for (let i = 0; i < trimmed.length; i++) {
+    const char = trimmed[i];
+    
+    if (escapeNext) {
+      escapeNext = false;
+      continue;
+    }
+    
+    if (char === '\\' && inString) {
+      escapeNext = true;
+      continue;
+    }
+    
+    if (char === '"') {
+      inString = !inString;
+      continue;
+    }
+    
+    if (inString) continue;
+    
+    if (char === '{') braceCount++;
+    if (char === '}') braceCount--;
+    if (char === '[') bracketCount++;
+    if (char === ']') bracketCount--;
+    
+    // Found the end of the root object
+    if (braceCount === 0 && bracketCount === 0 && char === '}') {
+      endIndex = i;
+      break;
+    }
+  }
+  
+  debugLog("[sanitizeJsonString] Bracket counting complete", {
+    endIndex,
+    finalBraceCount: braceCount,
+    finalBracketCount: bracketCount,
+    inString
+  });
+  
+  if (endIndex !== -1) {
+    const sanitized = trimmed.slice(0, endIndex + 1);
+    const removed = trimmed.slice(endIndex + 1);
+    debugLog("[sanitizeJsonString] Attempting parse of balanced portion", {
+      sanitizedLength: sanitized.length,
+      removedLength: removed.length,
+      removedChars: removed.substring(0, 50)
+    });
+    try {
+      JSON.parse(sanitized);
+      debugLog("[sanitizeJsonString] SUCCESS: Removed trailing garbage", {
+        originalLength: trimmed.length,
+        sanitizedLength: sanitized.length,
+        removedChars: removed
+      });
+      return sanitized;
+    } catch (e) {
+      const error = e as Error;
+      debugLog("[sanitizeJsonString] Balanced portion still invalid", {
+        error: error.message
+      });
+    }
+  }
+  
+  // Last resort: progressively remove trailing characters
+  debugLog("[sanitizeJsonString] Starting progressive trimming");
+  let attempt = trimmed;
+  let iterations = 0;
+  const maxIterations = Math.min(1000, trimmed.length); // Safety limit
+  
+  while (attempt.length > 1 && iterations < maxIterations) {
+    iterations++;
+    try {
+      JSON.parse(attempt);
+      debugLog("[sanitizeJsonString] SUCCESS via progressive trimming", {
+        originalLength: trimmed.length,
+        sanitizedLength: attempt.length,
+        iterations
+      });
+      return attempt;
+    } catch {
+      attempt = attempt.slice(0, -1).trim();
+    }
+  }
+  
+  debugLog("[sanitizeJsonString] FAILED: Could not sanitize JSON", {
+    originalLength: trimmed.length,
+    iterations
+  });
+  
+  return trimmed; // Return original if all else fails
+}
+
 /**
  * Extract JSON from LLM response that may contain preamble text
  * Handles: pure JSON, markdown code fences, and text with embedded JSON
@@ -150,14 +276,14 @@ function debugLog(message: string, data?: unknown) {
 function extractJsonFromResponse(text: string): string {
   // Try direct parse first - if it starts with {, it's likely pure JSON
   const trimmed = text.trim();
-  if (trimmed.startsWith('{')) return trimmed;
+  if (trimmed.startsWith('{')) return sanitizeJsonString(trimmed);
   
   // PRIORITY 1: Look specifically for ```json fence (most reliable)
   const jsonFenceMatch = text.match(/```json\s*([\s\S]*?)```/);
   if (jsonFenceMatch) {
     const extracted = jsonFenceMatch[1].trim();
     debugLog("Extracted JSON from explicit json fence", { previewLength: extracted.length });
-    return extracted;
+    return sanitizeJsonString(extracted);
   }
   
   // PRIORITY 2: Find raw JSON object in text (handles prose + JSON at end)
@@ -165,7 +291,7 @@ function extractJsonFromResponse(text: string): string {
   const modMatch = text.match(/(\{"modifications"\s*:\s*\[[\s\S]*\](?:\s*,\s*"explanation"\s*:\s*"[^"]*")?\s*\})/);
   if (modMatch) {
     debugLog("Extracted JSON via modifications pattern", { length: modMatch[1].length });
-    return modMatch[1];
+    return sanitizeJsonString(modMatch[1]);
   }
   
   // PRIORITY 3: Find any JSON object starting with {"
@@ -177,7 +303,7 @@ function extractJsonFromResponse(text: string): string {
       preambleLength: jsonStart,
       jsonLength: extracted.length 
     });
-    return extracted;
+    return sanitizeJsonString(extracted);
   }
   
   // PRIORITY 4 (last resort): Try generic code fence
@@ -188,12 +314,12 @@ function extractJsonFromResponse(text: string): string {
     // Only use if it looks like JSON
     if (extracted.startsWith('{')) {
       debugLog("Extracted JSON from generic fence", { previewLength: extracted.length });
-      return extracted;
+      return sanitizeJsonString(extracted);
     }
   }
   
-  // Return as-is if no JSON structure found
-  return text;
+  // Return as-is if no JSON structure found (sanitizeJsonString will handle validation)
+  return sanitizeJsonString(text);
 }
 
 /**
@@ -324,9 +450,19 @@ function findElementLineInFile(
     }
   }
   
+  // Helper: Normalize text for searching (handle bullets, whitespace, special chars)
+  const normalizeTextForSearch = (text: string): string => {
+    return text
+      .replace(/[•·●○◦‣⁃▪▫→←↓↑]/g, '') // Remove bullet/arrow characters
+      .replace(/\s+/g, ' ')              // Collapse whitespace
+      .replace(/[""'']/g, '"')           // Normalize quotes
+      .trim();
+  };
+  
   // PRIORITY 2: Exact text content in JSX
   if (focusedElement.textContent && focusedElement.textContent.trim().length >= 2) {
     const text = focusedElement.textContent.trim();
+    const normalizedText = normalizeTextForSearch(text);
     // Escape special regex characters in the text
     const escapedText = text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     
@@ -366,6 +502,34 @@ 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'];
+      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) {
+        for (let i = 0; i < lines.length; i++) {
+          const lineLower = lines[i].toLowerCase();
+          const matchCount = significantWords.filter(word => 
+            lineLower.includes(word.toLowerCase())
+          ).length;
+          
+          // Require at least 2 word matches for confidence
+          if (matchCount >= 2) {
+            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)`
+            };
+          }
+        }
+      }
+    }
   }
   
   // PRIORITY 2b: Look for icon patterns if type is button and no text (like X buttons)
@@ -386,163 +550,122 @@ function findElementLineInFile(
     }
   }
   
-  // PRIORITY 3: Distinctive className patterns (ONLY semantic/custom classes)
+  // PRIORITY 3: Distinctive className patterns (semantic classes from design system)
   if (focusedElement.className) {
-    // Filter OUT all Tailwind utility patterns - these are too generic and match wrong elements
-    const tailwindPatterns = [
-      /^p[xytblr]?-/,     // padding: px-4, py-2, pt-1
-      /^m[xytblr]?-/,     // margin: mx-auto, my-4
-      /^-?m[xytblr]?-/,   // negative margins: -mt-4
-      /^w-/,              // width: w-full, w-4
-      /^h-/,              // height: h-10, h-full
-      /^min-/,            // min-width/height
-      /^max-/,            // max-width/height
-      /^size-/,           // size utilities
-      /^bg-/,             // background
-      /^text-/,           // text color/size
-      /^font-/,           // font-weight
-      /^leading-/,        // line-height
-      /^tracking-/,       // letter-spacing
-      /^rounded/,         // border-radius: rounded-sm, rounded-lg
-      /^border/,          // border
-      /^outline/,         // outline
-      /^ring/,            // ring
-      /^shadow/,          // shadow
-      /^flex/,            // flex utilities
-      /^grow/,            // flex-grow
-      /^shrink/,          // flex-shrink
-      /^basis-/,          // flex-basis
-      /^grid/,            // grid utilities
-      /^col-/,            // grid columns
-      /^row-/,            // grid rows
-      /^gap-/,            // gap
-      /^items-/,          // align-items
-      /^justify-/,        // justify-content
-      /^self-/,           // align-self
-      /^place-/,          // place utilities
-      /^space-/,          // space-x, space-y
-      /^overflow/,        // overflow
-      /^scroll/,          // scroll utilities
-      /^cursor-/,         // cursor
-      /^pointer-/,        // pointer-events
-      /^select-/,         // user-select
-      /^opacity-/,        // opacity
-      /^visible/,         // visibility
-      /^invisible/,       // visibility
-      /^z-/,              // z-index
-      /^inset/,           // inset utilities
-      /^top-/,            // positioning
-      /^right-/,          // positioning
-      /^bottom-/,         // positioning
-      /^left-/,           // positioning
-      /^static/,          // position
-      /^fixed/,           // position
-      /^absolute/,        // position
-      /^relative/,        // position
-      /^sticky/,          // position
-      /^transition/,      // transitions
-      /^duration-/,       // duration
-      /^ease-/,           // timing function
-      /^delay-/,          // delay
-      /^animate-/,        // animations
-      /^transform/,       // transform
-      /^scale-/,          // scale
-      /^rotate-/,         // rotate
-      /^translate-/,      // translate
-      /^skew-/,           // skew
-      /^origin-/,         // transform-origin
-      /^appearance-/,     // appearance
-      /^accent-/,         // accent-color
-      /^caret-/,          // caret-color
-      /^fill-/,           // SVG fill
-      /^stroke-/,         // SVG stroke
-      /^object-/,         // object-fit/position
-      /^aspect-/,         // aspect-ratio
-      /^container/,       // container
-      /^columns-/,        // columns
-      /^break-/,          // word-break
-      /^truncate/,        // text-overflow
-      /^whitespace-/,     // whitespace
-      /^list-/,           // list-style
-      /^decoration-/,     // text-decoration
-      /^underline/,       // underline
-      /^overline/,        // overline
-      /^line-through/,    // line-through
-      /^no-underline/,    // no underline
-      /^antialiased/,     // font-smoothing
-      /^subpixel/,        // subpixel-antialiased
-      /^italic/,          // font-style
-      /^not-italic/,      // font-style
-      /^uppercase/,       // text-transform
-      /^lowercase/,       // text-transform
-      /^capitalize/,      // text-transform
-      /^normal-case/,     // text-transform
-      /^align-/,          // vertical-align
-      /^indent-/,         // text-indent
-      /^content-/,        // content
-      /^will-change/,     // will-change
-      /^hover:/,          // hover states
-      /^focus:/,          // focus states
-      /^focus-within:/,   // focus-within states
-      /^focus-visible:/,  // focus-visible states
-      /^active:/,         // active states
-      /^visited:/,        // visited states
-      /^disabled:/,       // disabled states
-      /^checked:/,        // checked states
-      /^group-/,          // group utilities
-      /^peer-/,           // peer utilities
-      /^dark:/,           // dark mode
-      /^light:/,          // light mode
-      /^motion-/,         // motion utilities
-      /^print:/,          // print utilities
-      /^portrait:/,       // orientation
-      /^landscape:/,      // orientation
-      /^sm:|^md:|^lg:|^xl:|^2xl:/,  // responsive prefixes
-      /^data-\[/,         // data attribute variants
-      /^aria-/,           // aria variants
-      /^supports-/,       // supports variants
-      /^has-/,            // has variants
-      /^group$/,          // group class itself
-      /^peer$/,           // peer class itself
-      /^sr-only/,         // screen reader only
-      /^not-sr-only/,     // not screen reader only
-      /^isolate/,         // isolation
-      /^block$/,          // display
-      /^inline/,          // display
-      /^hidden$/,         // display
-      /^table/,           // display table
+    // SEMANTIC CLASS DETECTION: Instead of filtering OUT utilities, filter IN semantics
+    // These patterns identify classes that reference CSS variables (design tokens)
+    const semanticClassPatterns = [
+      // Background colors referencing CSS variables
+      /^bg-(card|background|foreground|primary|secondary|accent|destructive|muted|popover|input|sidebar)/,
+      // Text colors referencing CSS variables  
+      /^text-(foreground|muted|primary|secondary|accent|destructive|card)/,
+      // Border colors referencing CSS variables
+      /^border-(border|card|input|primary|accent|destructive|muted)/,
+      // Any class containing these semantic tokens (catches hover:bg-card-hover, etc.)
+      /-card($|-)/,
+      /-foreground($|-)/,
+      /-background($|-)/,
+      /-border($|-)/,
+      /-primary($|-)/,
+      /-secondary($|-)/,
+      /-accent($|-)/,
+      /-muted($|-)/,
+      /-destructive($|-)/,
+      /-popover($|-)/,
+      /-sidebar($|-)/,
+      // Component-specific classes (likely custom)
+      /^(btn|card|modal|dialog|panel|sidebar|nav|menu|dropdown|tooltip|badge|chip|tag|avatar|icon)-/,
+      // Data attribute classes (often semantic)
+      /^\[data-/,
     ];
     
-    const isTailwindUtility = (cls: string) => 
-      tailwindPatterns.some(pattern => pattern.test(cls));
+    const isSemanticClass = (cls: string): boolean => {
+      // Remove variant prefixes for checking (hover:, focus:, dark:, etc.)
+      const baseClass = cls.replace(/^(hover:|focus:|active:|dark:|light:|md:|lg:|xl:|2xl:|sm:)+/, '');
+      return semanticClassPatterns.some(pattern => pattern.test(baseClass));
+    };
     
-    // Only use classes that are NOT Tailwind utilities (likely custom/semantic)
+    // Find semantic classes
     const semanticClasses = focusedElement.className.split(/\s+/)
-      .filter(c => c.length > 3 && !isTailwindUtility(c));
+      .filter(c => c.length > 3 && isSemanticClass(c));
     
     // Only proceed if we found semantic classes
     if (semanticClasses.length > 0) {
+      debugLog("Found semantic classes for element search", { 
+        semanticClasses,
+        originalClasses: focusedElement.className.substring(0, 80) 
+      });
+      
       for (const cls of semanticClasses) {
+        // Remove variant prefix for searching (hover:bg-card -> bg-card)
+        const searchClass = cls.replace(/^(hover:|focus:|active:|dark:|light:|md:|lg:|xl:|2xl:|sm:)+/, '');
+        
         for (let i = 0; i < lines.length; i++) {
-          if (lines[i].includes(cls)) {
+          if (lines[i].includes(searchClass)) {
             return {
               lineNumber: i + 1,
               snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
               confidence: 'medium',
-              matchedBy: `semantic className "${cls}"`
+              matchedBy: `semantic className "${searchClass}"`
             };
           }
         }
       }
     }
     
-    // Log when we filtered out all classes (helpful for debugging)
+    // Log when we couldn't find semantic classes (helpful for debugging)
     if (semanticClasses.length === 0 && focusedElement.className.trim().length > 0) {
-      console.log('[findElementLineInFile] All classes filtered as Tailwind utilities:', 
+      console.log('[findElementLineInFile] No semantic classes found in:', 
         focusedElement.className.substring(0, 100));
     }
   }
   
+  // ========== FALLBACK MATCHING (for non-Sonance codebases) ==========
+  // These are lower confidence but help find elements in ANY codebase
+  
+  // FALLBACK 1: Flexible text search (just find the text anywhere)
+  if (focusedElement.textContent && focusedElement.textContent.trim().length > 5) {
+    const searchText = focusedElement.textContent.trim().substring(0, 30);
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].includes(searchText)) {
+        debugLog("Fallback: Flexible text match found", { searchText, lineNumber: i + 1 });
+        return {
+          lineNumber: i + 1,
+          snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+          confidence: 'low',
+          matchedBy: `flexible text match "${searchText}${focusedElement.textContent.length > 30 ? '...' : ''}"`
+        };
+      }
+    }
+  }
+  
+  // FALLBACK 2: Class fingerprint (use first few classes as unique identifier)
+  if (focusedElement.className && focusedElement.className.trim().length > 15) {
+    // Take first 2-3 distinctive classes as a fingerprint
+    const classes = focusedElement.className.trim().split(/\s+/);
+    // Filter out very common single-word utilities
+    const distinctiveClasses = classes.filter(c => 
+      c.length > 4 && !['flex', 'grid', 'block', 'hidden', 'relative', 'absolute'].includes(c)
+    ).slice(0, 3);
+    
+    if (distinctiveClasses.length >= 2) {
+      const fingerprint = distinctiveClasses.join(' ');
+      for (let i = 0; i < lines.length; i++) {
+        // Check if line contains ALL fingerprint classes
+        const lineHasAll = distinctiveClasses.every(cls => lines[i].includes(cls));
+        if (lineHasAll) {
+          debugLog("Fallback: Class fingerprint match found", { fingerprint, lineNumber: i + 1 });
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+            confidence: 'low',
+            matchedBy: `class fingerprint "${fingerprint}"`
+          };
+        }
+      }
+    }
+  }
+  
   return null;
 }
 
@@ -574,9 +697,14 @@ function scoreFilesForTextContent(
     filesCount: importedFiles.length
   });
   
-  // Only search component files (where JSX text lives)
+  // Search component files and page files (where JSX text lives)
+  // Expanded to work with ANY codebase structure
   const componentFiles = importedFiles.filter(f => 
-    f.path.includes('components/') || f.path.includes('/ui/')
+    f.path.includes('components/') || 
+    f.path.includes('/ui/') || 
+    f.path.includes('/_components/') ||
+    f.path.endsWith('.tsx') ||
+    f.path.endsWith('.jsx')
   );
   
   const results: { path: string; content: string; score: number; matchedTexts: string[]; firstMatchLine: number }[] = [];
@@ -647,39 +775,121 @@ function scoreFilesForTextContent(
  */
 function findElementInImportedFiles(
   focusedElement: VisionFocusedElement,
-  importedFiles: { path: string; content: string }[]
+  importedFiles: { path: string; content: string }[],
+  pageFilePath?: string // Pass page file for proximity scoring
 ): { path: string; lineNumber: number; matchedBy: string; content: string; confidence: string } | null {
   debugLog("Searching imported components for element", {
     elementType: focusedElement.type,
     textContent: focusedElement.textContent?.substring(0, 30),
-    filesCount: importedFiles.length
+    filesCount: importedFiles.length,
+    pageFilePath
   });
   
+  // Collect ALL matches with scores instead of returning first match
+  const matches: Array<{
+    path: string;
+    lineNumber: number;
+    matchedBy: string;
+    content: string;
+    confidence: string;
+    score: number;
+  }> = [];
+  
+  // Extract route/directory info from page file for proximity scoring
+  const pageDir = pageFilePath ? path.dirname(pageFilePath) : '';
+  const routeName = pageDir.split('/').pop() || ''; // e.g., "typography"
+  
   for (const file of importedFiles) {
-    // Focus on component files (where UI elements live)
+    // Focus on component/page files (where UI elements live)
     // Skip types, stores, utils, hooks - they don't contain JSX elements
-    if (!file.path.includes('components/') && !file.path.includes('/ui/')) continue;
+    // Expanded to work with ANY codebase structure
+    const isComponentFile = 
+      file.path.includes('components/') || 
+      file.path.includes('/ui/') || 
+      file.path.includes('/_components/') ||
+      file.path.endsWith('.tsx') ||
+      file.path.endsWith('.jsx');
+    
+    // Skip non-component files but allow page files
+    if (!isComponentFile) continue;
+    
+    // Skip known non-UI files
+    if (file.path.includes('/types') || 
+        file.path.includes('/hooks/') || 
+        file.path.includes('/utils/') || 
+        file.path.includes('/lib/') ||
+        file.path.includes('.d.ts')) continue;
     
     const result = findElementLineInFile(file.content, focusedElement);
     if (result && result.confidence !== 'low') {
-      debugLog("Found element in imported component", {
-        path: file.path,
-        lineNumber: result.lineNumber,
-        matchedBy: result.matchedBy,
-        confidence: result.confidence
-      });
-      return {
+      let score = 0;
+      
+      // Text content match is highest priority (+100)
+      if (result.matchedBy.includes('textContent') || result.matchedBy.includes('word match')) {
+        score += 100;
+      }
+      
+      // Directory proximity - same directory tree as page file (+50)
+      // e.g., for page src/app/typography/page.tsx, prefer src/app/typography/_components/
+      if (pageDir && file.path.includes(pageDir)) {
+        score += 50;
+      }
+      
+      // Route name in filename (+30)
+      // e.g., for /typography route, prefer DigitalTypography.tsx
+      if (routeName && routeName.length > 2 && file.path.toLowerCase().includes(routeName.toLowerCase())) {
+        score += 30;
+      }
+      
+      // Confidence bonus
+      score += result.confidence === 'high' ? 20 : 10;
+      
+      matches.push({
         path: file.path,
         lineNumber: result.lineNumber,
         matchedBy: result.matchedBy,
         content: file.content,
-        confidence: result.confidence
-      };
+        confidence: result.confidence,
+        score
+      });
     }
   }
   
-  debugLog("Element not found in any imported component files");
-  return null;
+  // Return highest-scoring match
+  if (matches.length === 0) {
+    debugLog("Element not found in any imported component files");
+    return null;
+  }
+  
+  // Sort by score descending
+  matches.sort((a, b) => b.score - a.score);
+  
+  debugLog("Scored imported component matches", {
+    matchCount: matches.length,
+    topMatches: matches.slice(0, 3).map(m => ({ 
+      path: m.path, 
+      score: m.score, 
+      matchedBy: m.matchedBy,
+      confidence: m.confidence
+    }))
+  });
+  
+  const bestMatch = matches[0];
+  debugLog("Found element in imported component (best match)", {
+    path: bestMatch.path,
+    lineNumber: bestMatch.lineNumber,
+    matchedBy: bestMatch.matchedBy,
+    confidence: bestMatch.confidence,
+    score: bestMatch.score
+  });
+  
+  return {
+    path: bestMatch.path,
+    lineNumber: bestMatch.lineNumber,
+    matchedBy: bestMatch.matchedBy,
+    content: bestMatch.content,
+    confidence: bestMatch.confidence
+  };
 }
 
 /**
@@ -1786,6 +1996,7 @@ export async function POST(request: Request) {
       let smartSearchFiles: { path: string; content: string }[] = [];
       let recommendedFile: { path: string; reason: string } | null = null;
       let deterministicMatch: { path: string; lineNumber: number } | null = null;
+      let phase1VisibleText: string[] = []; // Store Phase 1 visible text for use in file scoring
 
       // ========================================================================
       // PHASE 0: Deterministic Element ID Search (Cursor-style explicit selection)
@@ -1851,6 +2062,9 @@ export async function POST(request: Request) {
       if (!deterministicMatch && screenshot) {
         debugLog("Starting Phase 1: LLM screenshot analysis");
         const analysis = await analyzeScreenshotForSearch(screenshot, userPrompt, apiKey);
+        
+        // Store visible text for use in file scoring when no element is focused
+        phase1VisibleText = analysis.visibleText || [];
 
         const hasSearchTerms = analysis.visibleText.length > 0 || 
                                analysis.componentNames.length > 0 || 
@@ -2161,7 +2375,8 @@ export async function POST(request: Request) {
           
           const importedMatch = findElementInImportedFiles(
             focusedElements[0],
-            pageContext.componentSources
+            pageContext.componentSources,
+            actualTargetFile?.path ?? undefined // Pass page file for proximity scoring
           );
           
           if (importedMatch) {
@@ -2180,6 +2395,48 @@ export async function POST(request: Request) {
           }
         }
       }
+      // ========== AUTO TEXT SCORING (no focused element) ==========
+      // When no element is clicked but we have Phase 1 visible text, use it to find the best file
+      else if (actualTargetFile && (!focusedElements || focusedElements.length === 0) && phase1VisibleText.length > 0) {
+        debugLog("No focused element - using Phase 1 visible text for file scoring", {
+          textCount: phase1VisibleText.length,
+          texts: phase1VisibleText.slice(0, 5)
+        });
+        
+        // Score all imported files based on visible text from Phase 1
+        const bestMatch = scoreFilesForTextContent(
+          phase1VisibleText,
+          pageContext.componentSources
+        );
+        
+        // Check how well the current target file matches
+        const currentFileScore = phase1VisibleText.filter(text => 
+          actualTargetFile!.content.includes(text.substring(0, 20))
+        ).length;
+        
+        debugLog("Phase 1 text scoring comparison", {
+          currentFile: actualTargetFile.path,
+          currentScore: currentFileScore,
+          bestImport: bestMatch?.path || 'none',
+          bestImportScore: bestMatch?.score || 0
+        });
+        
+        // Redirect if an imported file has significantly more text matches
+        if (bestMatch && bestMatch.score > currentFileScore && bestMatch.score >= 2) {
+          debugLog("TEXT REDIRECT (no element): Phase 1 visible text found better file", {
+            originalFile: actualTargetFile.path,
+            originalScore: currentFileScore,
+            redirectTo: bestMatch.path,
+            redirectScore: bestMatch.score,
+            matchedTexts: bestMatch.matchedTexts
+          });
+          
+          actualTargetFile = {
+            path: bestMatch.path,
+            content: bestMatch.content
+          };
+        }
+      }
       
       debugLog("File redirect complete", {
         originalRecommended: recommendedFileContent?.path || 'none',
@@ -2562,11 +2819,24 @@ This is better than generating patches with made-up code.`,
       try {
         // Use robust JSON extraction that handles preamble text, code fences, etc.
         const jsonText = extractJsonFromResponse(textResponse.text);
+        debugLog("[JSON Parse] Attempting to parse extracted JSON", {
+          extractedLength: jsonText.length,
+          extractedFirst100: jsonText.substring(0, 100),
+          extractedLast100: jsonText.substring(jsonText.length - 100)
+        });
         aiResponse = JSON.parse(jsonText);
-      } catch {
+        debugLog("[JSON Parse] Successfully parsed AI response");
+      } catch (parseError) {
+        const error = parseError as Error;
         console.error("Failed to parse AI response:", textResponse.text);
+        debugLog("[JSON Parse] FAILED to parse", {
+          error: error.message,
+          originalLength: textResponse.text.length,
+          originalFirst100: textResponse.text.substring(0, 100),
+          originalLast100: textResponse.text.substring(textResponse.text.length - 100)
+        });
         return NextResponse.json(
-          { error: "Failed to parse AI response. Please try again." },
+          { error: `Failed to parse AI response: ${error.message}` },
           { status: 500 }
         );
       }