sonance-brand-mcp 1.3.88 → 1.3.90

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

@@ -229,6 +229,242 @@ function findElementIdInFile(
   return null;
 }
 
+/**
+ * Find the line number of a focused element in the source code
+ * Uses multiple strategies in priority order:
+ * 1. DOM id (highest confidence)
+ * 2. Text content
+ * 3. ClassName patterns
+ * 
+ * This extends the basic ID matching to handle elements without IDs.
+ */
+function findElementLineInFile(
+  fileContent: string,
+  focusedElement: VisionFocusedElement
+): { lineNumber: number; snippet: string; confidence: 'high' | 'medium' | 'low'; matchedBy: string } | null {
+  if (!fileContent) return null;
+  
+  const lines = fileContent.split('\n');
+  
+  // PRIORITY 1: DOM id - highest confidence (exact match)
+  if (focusedElement.elementId) {
+    const idPattern = new RegExp(`id=["'\`]${focusedElement.elementId}["'\`]`);
+    for (let i = 0; i < lines.length; i++) {
+      if (idPattern.test(lines[i])) {
+        return {
+          lineNumber: i + 1,
+          snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+          confidence: 'high',
+          matchedBy: `DOM id="${focusedElement.elementId}"`
+        };
+      }
+    }
+  }
+  
+  // Also try child IDs with high confidence
+  if (focusedElement.childIds && focusedElement.childIds.length > 0) {
+    for (const childId of focusedElement.childIds) {
+      const idPattern = new RegExp(`id=["'\`]${childId}["'\`]`);
+      for (let i = 0; i < lines.length; i++) {
+        if (idPattern.test(lines[i])) {
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+            confidence: 'high',
+            matchedBy: `child id="${childId}"`
+          };
+        }
+      }
+    }
+  }
+  
+  // PRIORITY 2: Exact text content in JSX
+  if (focusedElement.textContent && focusedElement.textContent.trim().length >= 2) {
+    const text = focusedElement.textContent.trim();
+    // Escape special regex characters in the text
+    const escapedText = text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      // Match patterns like: >Text<, >Text</tag, "Text", 'Text', {`Text`}
+      const textPatterns = [
+        `>${escapedText}<`,           // JSX content: >Text<
+        `"${escapedText}"`,           // String literal
+        `'${escapedText}'`,           // String literal
+        `\`${escapedText}\``,         // Template literal
+      ];
+      
+      for (const pattern of textPatterns) {
+        if (line.includes(pattern.replace(/\\/g, ''))) {
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+            confidence: 'high',
+            matchedBy: `textContent="${text.substring(0, 30)}${text.length > 30 ? '...' : ''}"`
+          };
+        }
+      }
+    }
+    
+    // Try partial match for longer text (first 15+ chars)
+    if (text.length > 15) {
+      const partialText = text.substring(0, 15);
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes(`>${partialText}`) || lines[i].includes(`"${partialText}`)) {
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+            confidence: 'medium',
+            matchedBy: `partial textContent starting with "${partialText}..."`
+          };
+        }
+      }
+    }
+  }
+  
+  // PRIORITY 3: Distinctive className patterns
+  if (focusedElement.className) {
+    // Extract distinctive class names (long, not hover/focus pseudo-classes)
+    const classes = focusedElement.className.split(/\s+/)
+      .filter(c => c.length > 8 && !c.startsWith('hover:') && !c.startsWith('focus:') && !c.startsWith('active:'));
+    
+    for (const cls of classes) {
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes(cls)) {
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+            confidence: 'medium',
+            matchedBy: `className contains "${cls}"`
+          };
+        }
+      }
+    }
+    
+    // Try shorter but unique-looking class names (not utility classes)
+    const uniqueClasses = focusedElement.className.split(/\s+/)
+      .filter(c => c.length > 4 && !c.match(/^(p[xytblr]?-|m[xytblr]?-|w-|h-|bg-|text-|flex|grid|block|hidden)/));
+    
+    for (const cls of uniqueClasses) {
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes(cls)) {
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+            confidence: 'low',
+            matchedBy: `className contains "${cls}"`
+          };
+        }
+      }
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * PHASE 0: Deterministic Element ID Search (Cursor-style)
+ * Grep entire codebase for the element ID. If found in multiple files,
+ * use the current route to disambiguate (prioritize page file for route).
+ * 
+ * This is the most reliable signal - like Cursor knowing which file you're in.
+ * Element IDs should be unique, so if we find one, that's THE file.
+ */
+function findFilesByElementId(
+  projectRoot: string,
+  elementId: string,
+  currentRoute: string,
+  discoverPageFileFn: (route: string, projectRoot: string) => string | null
+): { path: string; lineNumber: number; isRouteMatch: boolean }[] {
+  const pattern = new RegExp(`id=["'\`]${elementId}["'\`]`);
+  const matches: { path: string; lineNumber: number; isRouteMatch: boolean }[] = [];
+  
+  // Determine expected page file from route
+  const routePageFile = discoverPageFileFn(currentRoute, projectRoot);
+  
+  // Search all common project directories that exist
+  // This supports: src/app, app/, pages/, components/, lib/ structures
+  const commonDirs = ['src', 'app', 'pages', 'components', 'lib'];
+  const searchDirs = commonDirs
+    .map(dir => path.join(projectRoot, dir))
+    .filter(dir => {
+      try {
+        return fs.existsSync(dir) && fs.statSync(dir).isDirectory();
+      } catch {
+        return false;
+      }
+    });
+  
+  // If no standard dirs found, search project root (excluding node_modules)
+  if (searchDirs.length === 0) {
+    searchDirs.push(projectRoot);
+  }
+  
+  debugLog("PHASE 0: Searching for element ID", { 
+    elementId, 
+    currentRoute, 
+    routePageFile,
+    searchDirs: searchDirs.map(d => d.replace(projectRoot + '/', ''))
+  });
+  
+  function searchDirRecursive(dir: string): void {
+    try {
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        
+        // Skip node_modules, hidden directories, and build outputs
+        if (entry.isDirectory()) {
+          if (
+            entry.name.includes('node_modules') || 
+            entry.name.startsWith('.') ||
+            entry.name === 'dist' ||
+            entry.name === 'build' ||
+            entry.name === '.next'
+          ) {
+            continue;
+          }
+          searchDirRecursive(fullPath);
+        } else if (entry.isFile() && /\.(tsx?|jsx?)$/.test(entry.name)) {
+          try {
+            const content = fs.readFileSync(fullPath, 'utf-8');
+            const lines = content.split('\n');
+            for (let i = 0; i < lines.length; i++) {
+              if (pattern.test(lines[i])) {
+                const relativePath = fullPath.replace(projectRoot + '/', '');
+                const isRouteMatch = relativePath === routePageFile;
+                matches.push({
+                  path: relativePath,
+                  lineNumber: i + 1,
+                  isRouteMatch
+                });
+                debugLog("PHASE 0: Found ID match", { 
+                  file: relativePath, 
+                  line: i + 1, 
+                  isRouteMatch 
+                });
+                break; // One match per file is enough
+              }
+            }
+          } catch {
+            // Skip files that can't be read
+          }
+        }
+      }
+    } catch {
+      // Skip directories that can't be read
+    }
+  }
+  
+  // Search all directories
+  for (const searchDir of searchDirs) {
+    searchDirRecursive(searchDir);
+  }
+  
+  // Sort: route matches first
+  return matches.sort((a, b) => (b.isRouteMatch ? 1 : 0) - (a.isRouteMatch ? 1 : 0));
+}
+
 /**
  * Result of LLM screenshot analysis for smart file discovery
  */
@@ -927,12 +1163,73 @@ export async function POST(request: Request) {
       // Generate a unique session ID
       const newSessionId = randomUUID().slice(0, 8);
 
-      // PHASE 1+2: LLM-driven smart file discovery
-      // The LLM analyzes the screenshot and deduces component names, code patterns, and visible text
+      // Initialize file discovery variables
       let smartSearchFiles: { path: string; content: string }[] = [];
       let recommendedFile: { path: string; reason: string } | null = null;
-      
-      if (screenshot) {
+      let deterministicMatch: { path: string; lineNumber: number } | null = null;
+
+      // ========================================================================
+      // PHASE 0: Deterministic Element ID Search (Cursor-style explicit selection)
+      // If we have an element ID, find it directly - no scoring, no heuristics
+      // This is the most reliable signal, like Cursor knowing which file you're in
+      // ========================================================================
+      if (focusedElements?.some(el => el.elementId)) {
+        const elementWithId = focusedElements.find(el => el.elementId)!;
+        debugLog("PHASE 0: Element has ID, starting deterministic search", {
+          elementId: elementWithId.elementId,
+          route: pageRoute
+        });
+        
+        const matches = findFilesByElementId(
+          projectRoot, 
+          elementWithId.elementId!, 
+          pageRoute || "/",
+          discoverPageFile
+        );
+        
+        if (matches.length === 1) {
+          // Single match - 100% confidence
+          deterministicMatch = matches[0];
+          recommendedFile = {
+            path: matches[0].path,
+            reason: `Deterministic ID match: id="${elementWithId.elementId}" (unique in codebase)`
+          };
+          debugLog("PHASE 0 SUCCESS: Single ID match - skipping smart search", deterministicMatch);
+        } else if (matches.length > 1) {
+          // Multiple matches - use route to disambiguate
+          const routeMatch = matches.find(m => m.isRouteMatch);
+          if (routeMatch) {
+            deterministicMatch = routeMatch;
+            recommendedFile = {
+              path: routeMatch.path,
+              reason: `Deterministic ID match: id="${elementWithId.elementId}" (route "${pageRoute}" disambiguated from ${matches.length} files)`
+            };
+            debugLog("PHASE 0 SUCCESS: ID found in multiple files, using route match", {
+              match: deterministicMatch,
+              otherFiles: matches.filter(m => !m.isRouteMatch).map(m => m.path)
+            });
+          } else {
+            debugLog("PHASE 0 FALLBACK: ID found in multiple files, no route match", {
+              elementId: elementWithId.elementId,
+              matchCount: matches.length,
+              files: matches.map(m => m.path),
+              route: pageRoute
+            });
+            // Fall through to smart search
+          }
+        } else {
+          debugLog("PHASE 0 FALLBACK: Element ID not found in codebase", {
+            elementId: elementWithId.elementId
+          });
+          // Fall through to smart search
+        }
+      }
+
+      // ========================================================================
+      // PHASE 1+2: LLM-driven smart file discovery (only if Phase 0 didn't match)
+      // The LLM analyzes the screenshot and deduces component names, code patterns, and visible text
+      // ========================================================================
+      if (!deterministicMatch && screenshot) {
         debugLog("Starting Phase 1: LLM screenshot analysis");
         const analysis = await analyzeScreenshotForSearch(screenshot, userPrompt, apiKey);
 
@@ -1024,8 +1321,12 @@ export async function POST(request: Request) {
             return bestMatch;
           };
 
+          // ====================================================================
+          // FALLBACK PRIORITY LOGIC (only reached when Phase 0 didn't find a match)
+          // This handles cases: no element ID, dynamic IDs, or ambiguous ID matches
+          // ====================================================================
           if (phase2aConfirmed) {
-            // PRIORITY 1: Phase 2a match confirmed by element search - highest confidence
+            // FALLBACK PRIORITY 1: Phase 2a match confirmed by element search
             const confirmedPath = phase2aMatches.find(p => 
               focusedElementHints.some(h => h.path === p && h.score > 0)
             );
@@ -1033,33 +1334,47 @@ export async function POST(request: Request) {
               path: confirmedPath!,
               reason: `Phase 2a component-name match confirmed by element search`
             };
-            debugLog("PRIORITY 1: Phase 2a confirmed by element search", recommendedFile);
+            debugLog("FALLBACK PRIORITY 1: Phase 2a confirmed by element search", recommendedFile);
           } else if (focusedTopScore > smartSearchTopScore * 0.5 && focusedTopScore >= 400) {
-            // PRIORITY 2: Focused element has strong absolute score AND relative to smart search
+            // FALLBACK PRIORITY 2: Focused element has strong score
             recommendedFile = {
               path: focusedTopPath!,
               reason: `Focused element match (score: ${focusedTopScore}, exceeds threshold)`
             };
-            debugLog("PRIORITY 2: Strong focused element match", recommendedFile);
+            debugLog("FALLBACK PRIORITY 2: Strong focused element match", recommendedFile);
           } else if (phase2aMatches.length > 0) {
-            // PRIORITY 2.5: Phase 2a match WITHOUT focused element - still strong signal
+            // FALLBACK PRIORITY 3: Phase 2a match WITHOUT focused element
             // Use prompt-aware selection to pick the best match
             const bestMatch = findBestPhase2aMatch()!;
             recommendedFile = {
               path: bestMatch,
               reason: `Phase 2a component-name match (prompt-aware selection from ${phase2aMatches.length} candidates)`
             };
-            debugLog("PRIORITY 2.5: Phase 2a match (no focused element)", { 
+            debugLog("FALLBACK PRIORITY 3: Phase 2a match (no focused element)", { 
               selectedPath: bestMatch,
               allCandidates: phase2aMatches 
             });
-          } else if (smartSearchTopPath) {
-            // PRIORITY 3: Smart search top result - trusted baseline
-            recommendedFile = {
-              path: smartSearchTopPath,
-              reason: `Smart search top result (score: ${smartSearchTopScore})`
-            };
-            debugLog("PRIORITY 3: Using smart search top result", recommendedFile);
+          } else {
+            // FALLBACK PRIORITY 4: Use the page file from the current route
+            const routePageFile = discoverPageFile(pageRoute || "/", projectRoot);
+            
+            if (routePageFile && fs.existsSync(path.join(projectRoot, routePageFile))) {
+              recommendedFile = {
+                path: routePageFile,
+                reason: `Page file from route "${pageRoute || "/"}"`
+              };
+              debugLog("FALLBACK PRIORITY 4: Using page file from route", { 
+                route: pageRoute || "/",
+                pageFile: routePageFile 
+              });
+            } else if (smartSearchTopPath) {
+              // FALLBACK PRIORITY 5: Smart search top result - last resort
+              recommendedFile = {
+                path: smartSearchTopPath,
+                reason: `Smart search top result (score: ${smartSearchTopScore})`
+              };
+              debugLog("FALLBACK PRIORITY 5: Using smart search top result", recommendedFile);
+            }
           }
           
           debugLog("Phase 1+2 complete", {
@@ -1148,12 +1463,21 @@ User Request: "${userPrompt}"
       if (recommendedFileContent) {
         const content = recommendedFileContent.content;
         
-        // Search for element IDs in the file to enable precise targeting
-        let idMatch: { lineNumber: number; matchedId: string; snippet: string } | null = null;
-      if (focusedElements && focusedElements.length > 0) {
+        // 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;
+        if (focusedElements && focusedElements.length > 0) {
           for (const el of focusedElements) {
-            idMatch = findElementIdInFile(content, el.elementId, el.childIds);
-            if (idMatch) break;
+            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;
+            }
           }
         }
         
@@ -1168,22 +1492,36 @@ User Request: "${userPrompt}"
             textContent += `\n`;
           }
           
-          // Add precise targeting if we found an ID match
-          if (idMatch) {
+          // Add precise targeting with line number and snippet
+          if (elementLocation) {
             textContent += `
-PRECISE TARGET (found by element ID):
-  → ID: "${idMatch.matchedId}"
-  → Line: ${idMatch.lineNumber}
-  → Look for this ID in the code and modify the element that contains it.
+══════════════════════════════════════════════════════════════════════════════
+PRECISE TARGET LOCATION (${elementLocation.confidence} confidence)
+══════════════════════════════════════════════════════════════════════════════
+  → 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.
 
 `;
-            debugLog("Found element ID in file", {
-              matchedId: idMatch.matchedId,
-              lineNumber: idMatch.lineNumber,
-              file: recommendedFileContent.path,
-            });
           } else {
             textContent += `\n`;
+            debugLog("Could not locate focused element in file - no ID, textContent, or className match", {
+              file: recommendedFileContent.path,
+              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,
+              }))
+            });
           }
         }
         

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

@@ -225,6 +225,242 @@ function findElementIdInFile(
   return null;
 }
 
+/**
+ * Find the line number of a focused element in the source code
+ * Uses multiple strategies in priority order:
+ * 1. DOM id (highest confidence)
+ * 2. Text content
+ * 3. ClassName patterns
+ * 
+ * This extends the basic ID matching to handle elements without IDs.
+ */
+function findElementLineInFile(
+  fileContent: string,
+  focusedElement: VisionFocusedElement
+): { lineNumber: number; snippet: string; confidence: 'high' | 'medium' | 'low'; matchedBy: string } | null {
+  if (!fileContent) return null;
+  
+  const lines = fileContent.split('\n');
+  
+  // PRIORITY 1: DOM id - highest confidence (exact match)
+  if (focusedElement.elementId) {
+    const idPattern = new RegExp(`id=["'\`]${focusedElement.elementId}["'\`]`);
+    for (let i = 0; i < lines.length; i++) {
+      if (idPattern.test(lines[i])) {
+        return {
+          lineNumber: i + 1,
+          snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+          confidence: 'high',
+          matchedBy: `DOM id="${focusedElement.elementId}"`
+        };
+      }
+    }
+  }
+  
+  // Also try child IDs with high confidence
+  if (focusedElement.childIds && focusedElement.childIds.length > 0) {
+    for (const childId of focusedElement.childIds) {
+      const idPattern = new RegExp(`id=["'\`]${childId}["'\`]`);
+      for (let i = 0; i < lines.length; i++) {
+        if (idPattern.test(lines[i])) {
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+            confidence: 'high',
+            matchedBy: `child id="${childId}"`
+          };
+        }
+      }
+    }
+  }
+  
+  // PRIORITY 2: Exact text content in JSX
+  if (focusedElement.textContent && focusedElement.textContent.trim().length >= 2) {
+    const text = focusedElement.textContent.trim();
+    // Escape special regex characters in the text
+    const escapedText = text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      // Match patterns like: >Text<, >Text</tag, "Text", 'Text', {`Text`}
+      const textPatterns = [
+        `>${escapedText}<`,           // JSX content: >Text<
+        `"${escapedText}"`,           // String literal
+        `'${escapedText}'`,           // String literal
+        `\`${escapedText}\``,         // Template literal
+      ];
+      
+      for (const pattern of textPatterns) {
+        if (line.includes(pattern.replace(/\\/g, ''))) {
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+            confidence: 'high',
+            matchedBy: `textContent="${text.substring(0, 30)}${text.length > 30 ? '...' : ''}"`
+          };
+        }
+      }
+    }
+    
+    // Try partial match for longer text (first 15+ chars)
+    if (text.length > 15) {
+      const partialText = text.substring(0, 15);
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes(`>${partialText}`) || lines[i].includes(`"${partialText}`)) {
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+            confidence: 'medium',
+            matchedBy: `partial textContent starting with "${partialText}..."`
+          };
+        }
+      }
+    }
+  }
+  
+  // PRIORITY 3: Distinctive className patterns
+  if (focusedElement.className) {
+    // Extract distinctive class names (long, not hover/focus pseudo-classes)
+    const classes = focusedElement.className.split(/\s+/)
+      .filter(c => c.length > 8 && !c.startsWith('hover:') && !c.startsWith('focus:') && !c.startsWith('active:'));
+    
+    for (const cls of classes) {
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes(cls)) {
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+            confidence: 'medium',
+            matchedBy: `className contains "${cls}"`
+          };
+        }
+      }
+    }
+    
+    // Try shorter but unique-looking class names (not utility classes)
+    const uniqueClasses = focusedElement.className.split(/\s+/)
+      .filter(c => c.length > 4 && !c.match(/^(p[xytblr]?-|m[xytblr]?-|w-|h-|bg-|text-|flex|grid|block|hidden)/));
+    
+    for (const cls of uniqueClasses) {
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes(cls)) {
+          return {
+            lineNumber: i + 1,
+            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+            confidence: 'low',
+            matchedBy: `className contains "${cls}"`
+          };
+        }
+      }
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * PHASE 0: Deterministic Element ID Search (Cursor-style)
+ * Grep entire codebase for the element ID. If found in multiple files,
+ * use the current route to disambiguate (prioritize page file for route).
+ * 
+ * This is the most reliable signal - like Cursor knowing which file you're in.
+ * Element IDs should be unique, so if we find one, that's THE file.
+ */
+function findFilesByElementId(
+  projectRoot: string,
+  elementId: string,
+  currentRoute: string,
+  discoverPageFileFn: (route: string, projectRoot: string) => string | null
+): { path: string; lineNumber: number; isRouteMatch: boolean }[] {
+  const pattern = new RegExp(`id=["'\`]${elementId}["'\`]`);
+  const matches: { path: string; lineNumber: number; isRouteMatch: boolean }[] = [];
+  
+  // Determine expected page file from route
+  const routePageFile = discoverPageFileFn(currentRoute, projectRoot);
+  
+  // Search all common project directories that exist
+  // This supports: src/app, app/, pages/, components/, lib/ structures
+  const commonDirs = ['src', 'app', 'pages', 'components', 'lib'];
+  const searchDirs = commonDirs
+    .map(dir => path.join(projectRoot, dir))
+    .filter(dir => {
+      try {
+        return fs.existsSync(dir) && fs.statSync(dir).isDirectory();
+      } catch {
+        return false;
+      }
+    });
+  
+  // If no standard dirs found, search project root (excluding node_modules)
+  if (searchDirs.length === 0) {
+    searchDirs.push(projectRoot);
+  }
+  
+  debugLog("PHASE 0: Searching for element ID", { 
+    elementId, 
+    currentRoute, 
+    routePageFile,
+    searchDirs: searchDirs.map(d => d.replace(projectRoot + '/', ''))
+  });
+  
+  function searchDirRecursive(dir: string): void {
+    try {
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        
+        // Skip node_modules, hidden directories, and build outputs
+        if (entry.isDirectory()) {
+          if (
+            entry.name.includes('node_modules') || 
+            entry.name.startsWith('.') ||
+            entry.name === 'dist' ||
+            entry.name === 'build' ||
+            entry.name === '.next'
+          ) {
+            continue;
+          }
+          searchDirRecursive(fullPath);
+        } else if (entry.isFile() && /\.(tsx?|jsx?)$/.test(entry.name)) {
+          try {
+            const content = fs.readFileSync(fullPath, 'utf-8');
+            const lines = content.split('\n');
+            for (let i = 0; i < lines.length; i++) {
+              if (pattern.test(lines[i])) {
+                const relativePath = fullPath.replace(projectRoot + '/', '');
+                const isRouteMatch = relativePath === routePageFile;
+                matches.push({
+                  path: relativePath,
+                  lineNumber: i + 1,
+                  isRouteMatch
+                });
+                debugLog("PHASE 0: Found ID match", { 
+                  file: relativePath, 
+                  line: i + 1, 
+                  isRouteMatch 
+                });
+                break; // One match per file is enough
+              }
+            }
+          } catch {
+            // Skip files that can't be read
+          }
+        }
+      }
+    } catch {
+      // Skip directories that can't be read
+    }
+  }
+  
+  // Search all directories
+  for (const searchDir of searchDirs) {
+    searchDirRecursive(searchDir);
+  }
+  
+  // Sort: route matches first
+  return matches.sort((a, b) => (b.isRouteMatch ? 1 : 0) - (a.isRouteMatch ? 1 : 0));
+}
+
 /**
  * Result of LLM screenshot analysis for smart file discovery
  */
@@ -896,12 +1132,73 @@ export async function POST(request: Request) {
         );
       }
 
-      // PHASE 1+2: LLM-driven smart file discovery
-      // The LLM analyzes the screenshot and deduces component names, code patterns, and visible text
+      // Initialize file discovery variables
       let smartSearchFiles: { path: string; content: string }[] = [];
       let recommendedFile: { path: string; reason: string } | null = null;
-      
-      if (screenshot) {
+      let deterministicMatch: { path: string; lineNumber: number } | null = null;
+
+      // ========================================================================
+      // PHASE 0: Deterministic Element ID Search (Cursor-style explicit selection)
+      // If we have an element ID, find it directly - no scoring, no heuristics
+      // This is the most reliable signal, like Cursor knowing which file you're in
+      // ========================================================================
+      if (focusedElements?.some(el => el.elementId)) {
+        const elementWithId = focusedElements.find(el => el.elementId)!;
+        debugLog("PHASE 0: Element has ID, starting deterministic search", {
+          elementId: elementWithId.elementId,
+          route: pageRoute
+        });
+        
+        const matches = findFilesByElementId(
+          projectRoot, 
+          elementWithId.elementId!, 
+          pageRoute || "/",
+          discoverPageFile
+        );
+        
+        if (matches.length === 1) {
+          // Single match - 100% confidence
+          deterministicMatch = matches[0];
+          recommendedFile = {
+            path: matches[0].path,
+            reason: `Deterministic ID match: id="${elementWithId.elementId}" (unique in codebase)`
+          };
+          debugLog("PHASE 0 SUCCESS: Single ID match - skipping smart search", deterministicMatch);
+        } else if (matches.length > 1) {
+          // Multiple matches - use route to disambiguate
+          const routeMatch = matches.find(m => m.isRouteMatch);
+          if (routeMatch) {
+            deterministicMatch = routeMatch;
+            recommendedFile = {
+              path: routeMatch.path,
+              reason: `Deterministic ID match: id="${elementWithId.elementId}" (route "${pageRoute}" disambiguated from ${matches.length} files)`
+            };
+            debugLog("PHASE 0 SUCCESS: ID found in multiple files, using route match", {
+              match: deterministicMatch,
+              otherFiles: matches.filter(m => !m.isRouteMatch).map(m => m.path)
+            });
+          } else {
+            debugLog("PHASE 0 FALLBACK: ID found in multiple files, no route match", {
+              elementId: elementWithId.elementId,
+              matchCount: matches.length,
+              files: matches.map(m => m.path),
+              route: pageRoute
+            });
+            // Fall through to smart search
+          }
+        } else {
+          debugLog("PHASE 0 FALLBACK: Element ID not found in codebase", {
+            elementId: elementWithId.elementId
+          });
+          // Fall through to smart search
+        }
+      }
+
+      // ========================================================================
+      // PHASE 1+2: LLM-driven smart file discovery (only if Phase 0 didn't match)
+      // The LLM analyzes the screenshot and deduces component names, code patterns, and visible text
+      // ========================================================================
+      if (!deterministicMatch && screenshot) {
         debugLog("Starting Phase 1: LLM screenshot analysis");
         const analysis = await analyzeScreenshotForSearch(screenshot, userPrompt, apiKey);
 
@@ -993,8 +1290,12 @@ export async function POST(request: Request) {
             return bestMatch;
           };
 
+          // ====================================================================
+          // FALLBACK PRIORITY LOGIC (only reached when Phase 0 didn't find a match)
+          // This handles cases: no element ID, dynamic IDs, or ambiguous ID matches
+          // ====================================================================
           if (phase2aConfirmed) {
-            // PRIORITY 1: Phase 2a match confirmed by element search - highest confidence
+            // FALLBACK PRIORITY 1: Phase 2a match confirmed by element search
             const confirmedPath = phase2aMatches.find(p => 
               focusedElementHints.some(h => h.path === p && h.score > 0)
             );
@@ -1002,33 +1303,47 @@ export async function POST(request: Request) {
               path: confirmedPath!,
               reason: `Phase 2a component-name match confirmed by element search`
             };
-            debugLog("PRIORITY 1: Phase 2a confirmed by element search", recommendedFile);
+            debugLog("FALLBACK PRIORITY 1: Phase 2a confirmed by element search", recommendedFile);
           } else if (focusedTopScore > smartSearchTopScore * 0.5 && focusedTopScore >= 400) {
-            // PRIORITY 2: Focused element has strong absolute score AND relative to smart search
+            // FALLBACK PRIORITY 2: Focused element has strong score
             recommendedFile = {
               path: focusedTopPath!,
               reason: `Focused element match (score: ${focusedTopScore}, exceeds threshold)`
             };
-            debugLog("PRIORITY 2: Strong focused element match", recommendedFile);
+            debugLog("FALLBACK PRIORITY 2: Strong focused element match", recommendedFile);
           } else if (phase2aMatches.length > 0) {
-            // PRIORITY 2.5: Phase 2a match WITHOUT focused element - still strong signal
+            // FALLBACK PRIORITY 3: Phase 2a match WITHOUT focused element
             // Use prompt-aware selection to pick the best match
             const bestMatch = findBestPhase2aMatch()!;
             recommendedFile = {
               path: bestMatch,
               reason: `Phase 2a component-name match (prompt-aware selection from ${phase2aMatches.length} candidates)`
             };
-            debugLog("PRIORITY 2.5: Phase 2a match (no focused element)", { 
+            debugLog("FALLBACK PRIORITY 3: Phase 2a match (no focused element)", { 
               selectedPath: bestMatch,
               allCandidates: phase2aMatches 
             });
-          } else if (smartSearchTopPath) {
-            // PRIORITY 3: Smart search top result - trusted baseline
-            recommendedFile = {
-              path: smartSearchTopPath,
-              reason: `Smart search top result (score: ${smartSearchTopScore})`
-            };
-            debugLog("PRIORITY 3: Using smart search top result", recommendedFile);
+          } else {
+            // FALLBACK PRIORITY 4: Use the page file from the current route
+            const routePageFile = discoverPageFile(pageRoute || "/", projectRoot);
+            
+            if (routePageFile && fs.existsSync(path.join(projectRoot, routePageFile))) {
+              recommendedFile = {
+                path: routePageFile,
+                reason: `Page file from route "${pageRoute || "/"}"`
+              };
+              debugLog("FALLBACK PRIORITY 4: Using page file from route", { 
+                route: pageRoute || "/",
+                pageFile: routePageFile 
+              });
+            } else if (smartSearchTopPath) {
+              // FALLBACK PRIORITY 5: Smart search top result - last resort
+              recommendedFile = {
+                path: smartSearchTopPath,
+                reason: `Smart search top result (score: ${smartSearchTopScore})`
+              };
+              debugLog("FALLBACK PRIORITY 5: Using smart search top result", recommendedFile);
+            }
           }
           
           debugLog("Phase 1+2 complete", {
@@ -1117,12 +1432,21 @@ User Request: "${userPrompt}"
       if (recommendedFileContent) {
         const content = recommendedFileContent.content;
         
-        // Search for element IDs in the file to enable precise targeting
-        let idMatch: { lineNumber: number; matchedId: string; snippet: string } | null = null;
-      if (focusedElements && focusedElements.length > 0) {
+        // 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;
+        if (focusedElements && focusedElements.length > 0) {
           for (const el of focusedElements) {
-            idMatch = findElementIdInFile(content, el.elementId, el.childIds);
-            if (idMatch) break;
+            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;
+            }
           }
         }
         
@@ -1137,22 +1461,36 @@ User Request: "${userPrompt}"
             textContent += `\n`;
           }
           
-          // Add precise targeting if we found an ID match
-          if (idMatch) {
+          // Add precise targeting with line number and snippet
+          if (elementLocation) {
             textContent += `
-PRECISE TARGET (found by element ID):
-  → ID: "${idMatch.matchedId}"
-  → Line: ${idMatch.lineNumber}
-  → Look for this ID in the code and modify the element that contains it.
+══════════════════════════════════════════════════════════════════════════════
+PRECISE TARGET LOCATION (${elementLocation.confidence} confidence)
+══════════════════════════════════════════════════════════════════════════════
+  → 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.
 
 `;
-            debugLog("Found element ID in file", {
-              matchedId: idMatch.matchedId,
-              lineNumber: idMatch.lineNumber,
-              file: recommendedFileContent.path,
-            });
           } else {
             textContent += `\n`;
+            debugLog("Could not locate focused element in file - no ID, textContent, or className match", {
+              file: recommendedFileContent.path,
+              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,
+              }))
+            });
           }
         }
         

package/dist/assets/dev-tools/SonanceDevTools.tsx

@@ -1215,10 +1215,11 @@ export function SonanceDevTools() {
       console.warn("[Apply-First] Failed to persist session:", e);
     }
 
-    // After a brief delay, assume HMR has completed
+    // Force page refresh to ensure changes are visible
+    // Session is already persisted to localStorage, so it survives refresh
     setTimeout(() => {
-      setApplyFirstStatus("reviewing");
-    }, 1500);
+      window.location.reload();
+    }, 500);
   }, [visionFocusedElements]);
 
   // Accept changes - delete backups

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.88",
+  "version": "1.3.90",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",