sonance-brand-mcp 1.3.24 → 1.3.26

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

@@ -56,72 +56,65 @@ interface VisionEditResponse {
   error?: string;
 }
 
-const VISION_SYSTEM_PROMPT = `You are a React/Tailwind CSS expert with vision capabilities for the Sonance brand system.
+const VISION_SYSTEM_PROMPT = `You are an expert React/TypeScript developer with vision capabilities. You can see screenshots and modify code.
 
-You can see screenshots of web pages and understand their visual layout, then modify code to implement requested changes.
+═══════════════════════════════════════════════════════════════════════════════
+UNDERSTAND THE USER'S REQUEST NATURALLY
+═══════════════════════════════════════════════════════════════════════════════
+
+Read the user's request and do exactly what they ask. You know React, TypeScript, Tailwind CSS, and JSX - use that knowledge naturally.
+
+- If they say "add X", ADD X to the code (don't replace or remove anything else)
+- If they say "change X to Y", find X and change it to Y
+- If they say "make X bigger/smaller/different color", adjust the relevant properties
+- If they say "remove X", remove X
+- If they say "wrap X with Y", add Y as a parent around X
+
+For any change:
+1. Read the code context provided
+2. Understand what the user wants
+3. Generate patches that accomplish exactly that
+4. If adding a component/icon requires an import, include a patch for the import too
+
+Don't overthink - just make the change the user requested.
 
 ═══════════════════════════════════════════════════════════════════════════════
-ABSOLUTE RULES - VIOLATION WILL BREAK THE APPLICATION
+PATCH FORMAT
 ═══════════════════════════════════════════════════════════════════════════════
 
-**SURGICAL EDITING (MOST CRITICAL):**
-1. You are making SURGICAL EDITS, not rewriting files
-2. Change ONLY the specific lines that need modification
-3. The modified file MUST have approximately the same line count as the original
-4. If original file has 200 lines, modified file should have ~195-210 lines
-5. NEVER rewrite a file from scratch - this destroys the application
-
-**FILE RULES:**
-6. You may ONLY edit files that are provided in the PAGE CONTEXT section
-7. NEVER create new files - only modify existing ones shown to you
-8. The filePath in your response MUST exactly match one of the provided file paths
-9. If you cannot find the right file to edit, explain this in your response instead of creating a new file
-
-**PRESERVATION RULES (ZERO TOLERANCE):**
-10. NEVER delete or remove existing functions, hooks, state, or logic
-11. NEVER remove imports - you may only ADD imports if needed
-12. NEVER remove useEffect, useState, useCallback, or other React hooks
-13. NEVER remove API calls, fetch requests, or data loading logic
-14. NEVER remove error handling, loading states, or conditional rendering
-15. NEVER remove data-sonance-* attributes
-16. NEVER change component structure unless specifically requested
-17. NEVER modify TypeScript types or interfaces unless specifically requested
-
-**CHANGE RULES:**
-18. Make ONLY the changes requested by the user
-19. Modify the MINIMUM amount of code necessary
-20. Keep all existing className values and ADD to them if needed
-21. Use semantic Tailwind classes (bg-primary, text-foreground, etc.)
-22. Maintain dark mode compatibility with CSS variables
-23. Keep the cn() utility for className merging
-24. CRITICAL: You MUST return the FULL file content in "modifiedContent". Do NOT use comments like "// ... existing code ..." or "// ... rest of file ...". Return every single line of code, even if unchanged.
+Return search/replace patches (NOT full files). The system applies your patches to the original.
+
+**Patch Rules:**
+- "search" must match the original code EXACTLY (including whitespace/indentation)
+- "replace" contains your modified version
+- Include 2-4 lines of context in "search" to make it unique
+- You may ONLY edit files provided in the PAGE CONTEXT section
 
 **SONANCE BRAND COLORS:**
-- Charcoal: #333F48, #343D46 (primary)
-- Silver: #E2E2E2, #D1D1D6 (secondary)
+- Charcoal: #333F48 (primary text)
 - IPORT Orange: #FC4C02
-- IPORT Dark: #0F161D
 - Blaze Blue: #00A3E1
-- Blaze Red: #C02B0A
 
 **RESPONSE FORMAT:**
-Return ONLY a valid JSON object. Do not include any conversational text before or after the JSON.
-The JSON must include:
-- "reasoning": Brief explanation of what you see in the screenshot and your plan
-- "modifications": Array of file modifications, each with:
-  - "filePath": Path to the file
-  - "modifiedContent": Complete updated file content (MUST BE FULL CONTENT, NO TRUNCATION)
-  - "explanation": What changed in this file
-  - "previewCSS": CSS for live preview (use [data-sonance-name="ComponentName"] selectors)
-- "aggregatedPreviewCSS": Combined CSS for all changes
-- "explanation": Overall summary of changes
-
-**EXAMPLE OF CORRECT EDIT:**
-If user asks to "make buttons smaller", you should:
-- Find the button elements in the code
-- Change ONLY the size-related classes (e.g., h-10 -> h-8, px-4 -> px-3)
-- Keep ALL other code exactly the same
-- Return the FULL file with this tiny change`;
+Return ONLY valid JSON:
+{
+  "reasoning": "What you understood from the request and your plan",
+  "modifications": [
+    {
+      "filePath": "path/to/file.tsx",
+      "patches": [
+        {
+          "search": "exact code to find",
+          "replace": "the replacement code",
+          "explanation": "what this patch does"
+        }
+      ],
+      "previewCSS": "optional CSS for live preview"
+    }
+  ],
+  "aggregatedPreviewCSS": "combined CSS for all changes",
+  "explanation": "summary of changes made"
+}`;
 
 export async function POST(request: Request) {
   // Only allow in development
@@ -250,14 +243,38 @@ ${pageContext.pageContent ? `\`\`\`tsx\n${pageContext.pageContent}\n\`\`\`` : ""
 `;
 
       if (pageContext.componentSources.length > 0) {
-        textContent += `IMPORTED COMPONENTS:\n`;
-        for (const comp of pageContext.componentSources) {
+        // Smart truncation: prioritize first components (direct imports) and limit total context
+        const MAX_TOTAL_CONTEXT = 80000; // ~80k chars to stay well under Claude's limit
+        const MAX_PER_FILE_PRIORITY = 4000; // First 10 files get more space
+        const MAX_PER_FILE_SECONDARY = 1500; // Remaining files get less
+        const MAX_FILES = 30; // Limit total number of files
+        
+        let usedContext = pageContext.pageContent.length + pageContext.globalsCSS.length;
+        const truncatedComponents = pageContext.componentSources.slice(0, MAX_FILES);
+        
+        textContent += `IMPORTED COMPONENTS (${truncatedComponents.length} files, ${pageContext.componentSources.length > MAX_FILES ? `${pageContext.componentSources.length - MAX_FILES} omitted` : 'complete'}):\n`;
+        
+        for (let i = 0; i < truncatedComponents.length; i++) {
+          const comp = truncatedComponents[i];
+          const isPriority = i < 10; // First 10 files are priority (direct imports)
+          const maxSize = isPriority ? MAX_PER_FILE_PRIORITY : MAX_PER_FILE_SECONDARY;
+          
+          // Stop if we've used too much context
+          if (usedContext > MAX_TOTAL_CONTEXT) {
+            textContent += `\n// ... (${truncatedComponents.length - i} more files omitted to stay within context limits)\n`;
+            break;
+          }
+          
+          const truncatedContent = comp.content.substring(0, maxSize);
+          const wasTruncated = comp.content.length > maxSize;
+          
           textContent += `
-File: ${comp.path}
+File: ${comp.path}${isPriority ? '' : ' (nested)'}
 \`\`\`tsx
-${comp.content.substring(0, 3000)}${comp.content.length > 3000 ? "\n// ... (truncated)" : ""}
+${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
 \`\`\`
 `;
+          usedContext += truncatedContent.length;
         }
       }
 
@@ -310,13 +327,15 @@ CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new
         );
       }
 
-      // Parse AI response
+      // Parse AI response - now expecting patches instead of full file content
       let aiResponse: {
         reasoning?: string;
         modifications: Array<{
           filePath: string;
-          modifiedContent: string;
-          explanation: string;
+          patches?: Patch[];
+          // Legacy support for modifiedContent (will be deprecated)
+          modifiedContent?: string;
+          explanation?: string;
           previewCSS?: string;
         }>;
         aggregatedPreviewCSS?: string;
@@ -381,10 +400,9 @@ CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new
         );
       }
 
-      // Read original content and generate diffs for each modification
+      // Process modifications - apply patches to get modified content
       const modificationsWithOriginals: VisionFileModification[] = [];
-      const validationErrors: string[] = [];
-      const validationWarnings: string[] = [];
+      const patchErrors: string[] = [];
       
       for (const mod of aiResponse.modifications || []) {
         const fullPath = path.join(projectRoot, mod.filePath);
@@ -393,43 +411,76 @@ CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new
           originalContent = fs.readFileSync(fullPath, "utf-8");
         }
 
-        // Validate the modification
-        const validation = validateModification(originalContent, mod.modifiedContent, mod.filePath);
-        
-        if (!validation.valid) {
-          validationErrors.push(validation.error || "Unknown validation error");
-          continue; // Skip this modification
-        }
-        
-        if (validation.warnings.length > 0) {
-          validationWarnings.push(...validation.warnings.map(w => `${mod.filePath}: ${w}`));
+        let modifiedContent: string;
+        let explanation = mod.explanation || "";
+
+        // Check if AI returned patches (new format) or modifiedContent (legacy)
+        if (mod.patches && mod.patches.length > 0) {
+          // New patch-based approach
+          console.log(`[Vision Mode] Applying ${mod.patches.length} patches to ${mod.filePath}`);
+          
+          const patchResult = applyPatches(originalContent, mod.patches);
+          
+          if (!patchResult.success) {
+            const failedMessages = patchResult.failedPatches.map(
+              (f) => `Patch failed: ${f.error}`
+            ).join("\n");
+            patchErrors.push(`${mod.filePath}:\n${failedMessages}`);
+            
+            // If some patches succeeded, use partial result
+            if (patchResult.appliedPatches > 0) {
+              console.warn(`[Vision Mode] ${patchResult.appliedPatches}/${mod.patches.length} patches applied to ${mod.filePath}`);
+              modifiedContent = patchResult.modifiedContent;
+              explanation += ` (${patchResult.appliedPatches}/${mod.patches.length} patches applied)`;
+            } else {
+              continue; // Skip this file entirely if no patches worked
+            }
+          } else {
+            modifiedContent = patchResult.modifiedContent;
+            console.log(`[Vision Mode] All ${mod.patches.length} patches applied successfully to ${mod.filePath}`);
+          }
+        } else if (mod.modifiedContent) {
+          // Legacy: AI returned full file content
+          console.warn(`[Vision Mode] Legacy modifiedContent received for ${mod.filePath} - patch-based format preferred`);
+          modifiedContent = mod.modifiedContent;
+          
+          // Validate the modification using legacy validation
+          const validation = validateModification(originalContent, modifiedContent, mod.filePath);
+          if (!validation.valid) {
+            patchErrors.push(`${mod.filePath}: ${validation.error}`);
+            continue;
+          }
+        } else {
+          // No patches and no modifiedContent - skip
+          console.warn(`[Vision Mode] No patches or modifiedContent for ${mod.filePath}`);
+          continue;
         }
 
         modificationsWithOriginals.push({
           filePath: mod.filePath,
           originalContent,
-          modifiedContent: mod.modifiedContent,
-          diff: generateSimpleDiff(originalContent, mod.modifiedContent),
-          explanation: mod.explanation,
+          modifiedContent,
+          diff: generateSimpleDiff(originalContent, modifiedContent),
+          explanation,
           previewCSS: mod.previewCSS,
         });
       }
 
-      // If all modifications failed validation, return error
-      if (validationErrors.length > 0 && modificationsWithOriginals.length === 0) {
-        console.error("All AI modifications failed validation:", validationErrors);
+      // If all modifications failed, return error
+      if (patchErrors.length > 0 && modificationsWithOriginals.length === 0) {
+        console.error("All AI patches failed:", patchErrors);
         return NextResponse.json(
           {
             success: false,
-            error: validationErrors.join("\n\n"),
+            error: `Patch application failed:\n\n${patchErrors.join("\n\n")}`,
           } as VisionEditResponse,
           { status: 400 }
         );
       }
 
-      // Log warnings for review
-      if (validationWarnings.length > 0) {
-        console.warn("Vision edit validation warnings:", validationWarnings);
+      // Log patch errors as warnings if some modifications succeeded
+      if (patchErrors.length > 0) {
+        console.warn("Some patches failed:", patchErrors);
       }
 
       // Aggregate preview CSS
@@ -524,8 +575,109 @@ function findComponentFileByName(
   return null;
 }
 
+/**
+ * Recursively gather all imports from a file up to a max depth
+ * This builds a complete component graph for the AI to understand
+ */
+function gatherAllImports(
+  filePath: string,
+  projectRoot: string,
+  visited: Set<string> = new Set(),
+  maxDepth: number = 4
+): { path: string; content: string }[] {
+  // Prevent infinite loops and limit total files
+  if (visited.has(filePath) || visited.size > 50) return [];
+  visited.add(filePath);
+  
+  const results: { path: string; content: string }[] = [];
+  const fullPath = path.join(projectRoot, filePath);
+  
+  if (!fs.existsSync(fullPath)) return results;
+  
+  try {
+    const content = fs.readFileSync(fullPath, "utf-8");
+    results.push({ path: filePath, content });
+    
+    // Continue recursing if we haven't hit max depth
+    if (maxDepth > 0) {
+      const imports = extractImports(content);
+      for (const imp of imports) {
+        const resolved = resolveImportPath(imp, filePath, projectRoot);
+        if (resolved && !visited.has(resolved)) {
+          const nestedImports = gatherAllImports(resolved, projectRoot, visited, maxDepth - 1);
+          results.push(...nestedImports);
+        }
+      }
+    }
+  } catch {
+    // Skip files that can't be read
+  }
+  
+  return results;
+}
+
+/**
+ * Discover layout files that wrap the page
+ * App Router: layout.tsx in same and parent directories
+ * Pages Router: _app.tsx and _document.tsx
+ */
+function discoverLayoutFiles(pageFile: string | null, projectRoot: string): string[] {
+  const layoutFiles: string[] = [];
+  
+  if (!pageFile) return layoutFiles;
+  
+  // Determine if App Router or Pages Router
+  const isAppRouter = pageFile.includes("/app/") || pageFile.startsWith("app/");
+  const isPagesRouter = pageFile.includes("/pages/") || pageFile.startsWith("pages/");
+  
+  if (isAppRouter) {
+    // App Router: Check for layout.tsx in same directory and parent directories
+    let currentDir = path.dirname(pageFile);
+    const appRoot = pageFile.includes("src/app") ? "src/app" : "app";
+    
+    while (currentDir.includes(appRoot)) {
+      const layoutPatterns = [
+        path.join(currentDir, "layout.tsx"),
+        path.join(currentDir, "layout.jsx"),
+      ];
+      
+      for (const layoutPath of layoutPatterns) {
+        if (fs.existsSync(path.join(projectRoot, layoutPath))) {
+          layoutFiles.push(layoutPath);
+        }
+      }
+      
+      // Move to parent directory
+      const parentDir = path.dirname(currentDir);
+      if (parentDir === currentDir) break;
+      currentDir = parentDir;
+    }
+  }
+  
+  if (isPagesRouter) {
+    // Pages Router: Check for _app.tsx and _document.tsx
+    const pagesRoot = pageFile.includes("src/pages") ? "src/pages" : "pages";
+    
+    const pagesRouterLayouts = [
+      `${pagesRoot}/_app.tsx`,
+      `${pagesRoot}/_app.jsx`,
+      `${pagesRoot}/_document.tsx`,
+      `${pagesRoot}/_document.jsx`,
+    ];
+    
+    for (const layoutPath of pagesRouterLayouts) {
+      if (fs.existsSync(path.join(projectRoot, layoutPath))) {
+        layoutFiles.push(layoutPath);
+      }
+    }
+  }
+  
+  return layoutFiles;
+}
+
 /**
  * Gather context about the current page for AI analysis
+ * Uses recursive import resolution to build complete component graph
  */
 function gatherPageContext(
   pageRoute: string,
@@ -541,23 +693,30 @@ function gatherPageContext(
   const pageFile = discoverPageFile(pageRoute, projectRoot);
   let pageContent = "";
   const componentSources: { path: string; content: string }[] = [];
+  const visited = new Set<string>();
 
   if (pageFile) {
     const fullPath = path.join(projectRoot, pageFile);
     if (fs.existsSync(fullPath)) {
       pageContent = fs.readFileSync(fullPath, "utf-8");
+      visited.add(pageFile);
 
-      // Extract imports and read component files
+      // Recursively gather all imported components (up to 4 levels deep)
       const imports = extractImports(pageContent);
       for (const importPath of imports) {
         const resolvedPath = resolveImportPath(importPath, pageFile, projectRoot);
-        if (resolvedPath && fs.existsSync(path.join(projectRoot, resolvedPath))) {
-          try {
-            const content = fs.readFileSync(path.join(projectRoot, resolvedPath), "utf-8");
-            componentSources.push({ path: resolvedPath, content });
-          } catch {
-            // Skip files that can't be read
-          }
+        if (resolvedPath && !visited.has(resolvedPath)) {
+          const nestedComponents = gatherAllImports(resolvedPath, projectRoot, visited, 3);
+          componentSources.push(...nestedComponents);
+        }
+      }
+      
+      // Also include layout files
+      const layoutFiles = discoverLayoutFiles(pageFile, projectRoot);
+      for (const layoutFile of layoutFiles) {
+        if (!visited.has(layoutFile)) {
+          const layoutComponents = gatherAllImports(layoutFile, projectRoot, visited, 2);
+          componentSources.push(...layoutComponents);
         }
       }
     }
@@ -568,25 +727,30 @@ function gatherPageContext(
     for (const el of focusedElements) {
       // Try to find component file by name
       const foundPath = findComponentFileByName(el.name, projectRoot);
-      if (foundPath && !componentSources.some((c) => c.path === foundPath)) {
-        try {
-          const content = fs.readFileSync(
-            path.join(projectRoot, foundPath),
-            "utf-8"
-          );
-          componentSources.push({ path: foundPath, content });
-        } catch {
-          /* skip if unreadable */
-        }
+      if (foundPath && !visited.has(foundPath) && !componentSources.some((c) => c.path === foundPath)) {
+        const focusedComponents = gatherAllImports(foundPath, projectRoot, visited, 2);
+        componentSources.push(...focusedComponents);
       }
     }
   }
 
-  // Read globals.css
+  // Read globals.css - check multiple possible locations
   let globalsCSS = "";
-  const globalsPath = path.join(projectRoot, "src/app/globals.css");
-  if (fs.existsSync(globalsPath)) {
-    globalsCSS = fs.readFileSync(globalsPath, "utf-8");
+  const globalsCSSPatterns = [
+    "src/app/globals.css",
+    "app/globals.css",
+    "src/styles/globals.css",
+    "styles/globals.css",
+    "src/styles/global.css",
+    "styles/global.css",
+  ];
+  
+  for (const cssPattern of globalsCSSPatterns) {
+    const globalsPath = path.join(projectRoot, cssPattern);
+    if (fs.existsSync(globalsPath)) {
+      globalsCSS = fs.readFileSync(globalsPath, "utf-8");
+      break;
+    }
   }
 
   return { pageFile, pageContent, componentSources, globalsCSS };
@@ -594,13 +758,28 @@ function gatherPageContext(
 
 /**
  * Discover the page file for a given route
+ * Supports both App Router (src/app/) and Pages Router (src/pages/, pages/)
  */
 function discoverPageFile(route: string, projectRoot: string): string | null {
   // Handle root route
   if (route === "/" || route === "") {
-    const rootPage = "src/app/page.tsx";
-    if (fs.existsSync(path.join(projectRoot, rootPage))) {
-      return rootPage;
+    const rootPatterns = [
+      // App Router patterns
+      "src/app/page.tsx",
+      "src/app/page.jsx",
+      "app/page.tsx",
+      "app/page.jsx",
+      // Pages Router patterns
+      "src/pages/index.tsx",
+      "src/pages/index.jsx",
+      "pages/index.tsx",
+      "pages/index.jsx",
+    ];
+    
+    for (const pattern of rootPatterns) {
+      if (fs.existsSync(path.join(projectRoot, pattern))) {
+        return pattern;
+      }
     }
     return null;
   }
@@ -608,11 +787,26 @@ function discoverPageFile(route: string, projectRoot: string): string | null {
   // Remove leading slash
   const cleanRoute = route.replace(/^\//, "");
 
-  // Try different patterns
+  // First, try exact match patterns
   const patterns = [
+    // App Router patterns (with src)
     `src/app/${cleanRoute}/page.tsx`,
     `src/app/${cleanRoute}/page.jsx`,
-    `src/app/${cleanRoute}.tsx`,
+    // App Router patterns (without src)
+    `app/${cleanRoute}/page.tsx`,
+    `app/${cleanRoute}/page.jsx`,
+    // Pages Router patterns (with src) - file-based
+    `src/pages/${cleanRoute}.tsx`,
+    `src/pages/${cleanRoute}.jsx`,
+    // Pages Router patterns (with src) - folder-based
+    `src/pages/${cleanRoute}/index.tsx`,
+    `src/pages/${cleanRoute}/index.jsx`,
+    // Pages Router patterns (without src) - file-based
+    `pages/${cleanRoute}.tsx`,
+    `pages/${cleanRoute}.jsx`,
+    // Pages Router patterns (without src) - folder-based
+    `pages/${cleanRoute}/index.tsx`,
+    `pages/${cleanRoute}/index.jsx`,
   ];
 
   for (const pattern of patterns) {
@@ -621,6 +815,99 @@ function discoverPageFile(route: string, projectRoot: string): string | null {
     }
   }
 
+  // If exact match not found, try dynamic route matching
+  // e.g., /processes/123 -> src/pages/processes/[id].tsx
+  const dynamicResult = findDynamicRoute(cleanRoute, projectRoot);
+  if (dynamicResult) {
+    return dynamicResult;
+  }
+
+  return null;
+}
+
+/**
+ * Find dynamic route files when exact match fails
+ * Maps runtime routes like "/processes/123" to file paths like "src/pages/processes/[id].tsx"
+ */
+function findDynamicRoute(cleanRoute: string, projectRoot: string): string | null {
+  const segments = cleanRoute.split("/");
+  
+  // Try replacing the last segment with dynamic patterns
+  const baseDirs = [
+    "src/app",
+    "app",
+    "src/pages",
+    "pages",
+  ];
+  
+  const dynamicPatterns = ["[id]", "[slug]", "[...slug]", "[[...slug]]"];
+  const extensions = [".tsx", ".jsx"];
+  
+  for (const baseDir of baseDirs) {
+    const basePath = path.join(projectRoot, baseDir);
+    if (!fs.existsSync(basePath)) continue;
+    
+    // Build path with all segments except the last one
+    const parentSegments = segments.slice(0, -1);
+    const parentPath = parentSegments.length > 0 
+      ? path.join(basePath, ...parentSegments)
+      : basePath;
+    
+    if (!fs.existsSync(parentPath)) continue;
+    
+    // Check for dynamic route files
+    for (const dynPattern of dynamicPatterns) {
+      for (const ext of extensions) {
+        // App Router: parent/[id]/page.tsx
+        if (baseDir.includes("app")) {
+          const appRouterPath = path.join(parentPath, dynPattern, `page${ext}`);
+          if (fs.existsSync(appRouterPath)) {
+            return path.relative(projectRoot, appRouterPath);
+          }
+        }
+        
+        // Pages Router: parent/[id].tsx
+        const pagesRouterFile = path.join(parentPath, `${dynPattern}${ext}`);
+        if (fs.existsSync(pagesRouterFile)) {
+          return path.relative(projectRoot, pagesRouterFile);
+        }
+        
+        // Pages Router: parent/[id]/index.tsx
+        const pagesRouterDir = path.join(parentPath, dynPattern, `index${ext}`);
+        if (fs.existsSync(pagesRouterDir)) {
+          return path.relative(projectRoot, pagesRouterDir);
+        }
+      }
+    }
+    
+    // Also scan directory for any dynamic segment pattern [...]
+    try {
+      const entries = fs.readdirSync(parentPath, { withFileTypes: true });
+      for (const entry of entries) {
+        if (entry.name.startsWith("[") && entry.name.includes("]")) {
+          for (const ext of extensions) {
+            if (entry.isDirectory()) {
+              // App Router or Pages Router with folder
+              const pagePath = path.join(parentPath, entry.name, `page${ext}`);
+              const indexPath = path.join(parentPath, entry.name, `index${ext}`);
+              if (fs.existsSync(pagePath)) {
+                return path.relative(projectRoot, pagePath);
+              }
+              if (fs.existsSync(indexPath)) {
+                return path.relative(projectRoot, indexPath);
+              }
+            } else if (entry.isFile() && entry.name.endsWith(ext)) {
+              // Pages Router file-based
+              return path.relative(projectRoot, path.join(parentPath, entry.name));
+            }
+          }
+        }
+      }
+    } catch {
+      // Skip if directory can't be read
+    }
+  }
+  
   return null;
 }
 
@@ -701,6 +988,76 @@ function generateSimpleDiff(original: string, modified: string): string {
   return diff.join("\n");
 }
 
+/**
+ * Patch interface for search/replace operations
+ */
+interface Patch {
+  search: string;
+  replace: string;
+  explanation: string;
+}
+
+/**
+ * Result of applying patches to a file
+ */
+interface ApplyPatchesResult {
+  success: boolean;
+  modifiedContent: string;
+  appliedPatches: number;
+  failedPatches: { patch: Patch; error: string }[];
+}
+
+/**
+ * Apply search/replace patches to file content
+ * This is the core of the patch-based editing system
+ */
+function applyPatches(originalContent: string, patches: Patch[]): ApplyPatchesResult {
+  let content = originalContent;
+  let appliedPatches = 0;
+  const failedPatches: { patch: Patch; error: string }[] = [];
+
+  for (const patch of patches) {
+    // Normalize line endings for matching
+    const normalizedSearch = patch.search.replace(/\\n/g, "\n");
+    const normalizedReplace = patch.replace.replace(/\\n/g, "\n");
+
+    // Check if search string exists in content
+    if (!content.includes(normalizedSearch)) {
+      // Try with different whitespace normalization
+      const flexibleSearch = normalizedSearch.replace(/\s+/g, "\\s+");
+      const regex = new RegExp(flexibleSearch.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\\s\+/g, "\\s+"));
+      
+      if (!regex.test(content)) {
+        failedPatches.push({
+          patch,
+          error: `Search string not found in file. First 50 chars of search: "${normalizedSearch.substring(0, 50)}..."`,
+        });
+        continue;
+      }
+      
+      // If regex matched, use regex replace
+      content = content.replace(regex, normalizedReplace);
+      appliedPatches++;
+    } else {
+      // Exact match found - apply the replacement
+      // Only replace the first occurrence to be safe
+      const index = content.indexOf(normalizedSearch);
+      content = 
+        content.substring(0, index) + 
+        normalizedReplace + 
+        content.substring(index + normalizedSearch.length);
+      appliedPatches++;
+    }
+  }
+
+  return {
+    success: failedPatches.length === 0,
+    modifiedContent: content,
+    appliedPatches,
+    failedPatches,
+  };
+}
+
 /**
  * Validate that AI modifications are surgical edits, not complete rewrites
  */