sonance-brand-mcp 1.3.25 → 1.3.27

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

@@ -50,7 +50,11 @@ interface ApplyFirstRequest {
 interface BackupManifest {
   sessionId: string;
   timestamp: number;
-  files: { original: string; backup: string }[];
+  files: { 
+    original: string; 
+    backup: string;
+    isNewFile: boolean;  // Track if file was newly created (needs deletion on revert)
+  }[];
 }
 
 const BACKUP_ROOT = ".sonance-backups";
@@ -230,14 +234,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;
         }
       }
 
@@ -340,11 +368,29 @@ CRITICAL: Your modified file should have approximately the same number of lines
         });
       }
 
+      // Build set of valid file paths from page context
+      const validFilePaths = new Set<string>();
+      if (pageContext.pageFile) {
+        validFilePaths.add(pageContext.pageFile);
+      }
+      for (const comp of pageContext.componentSources) {
+        validFilePaths.add(comp.path);
+      }
+      
       // Process modifications - apply patches to get modified content
       const modifications: VisionFileModification[] = [];
       const patchErrors: string[] = [];
       
       for (const mod of aiResponse.modifications) {
+        // Validate that the file path is in the page context
+        // This prevents the AI from creating new files
+        if (!validFilePaths.has(mod.filePath)) {
+          console.warn(`[Apply-First] Rejected modification to unknown file: ${mod.filePath}`);
+          console.warn(`[Apply-First] Valid files are: ${Array.from(validFilePaths).join(", ")}`);
+          patchErrors.push(`${mod.filePath}: This file was not found in the page context. The AI can only modify existing files that are part of the current page.`);
+          continue;
+        }
+        
         const fullPath = path.join(projectRoot, mod.filePath);
         let originalContent = "";
         if (fs.existsSync(fullPath)) {
@@ -470,6 +516,15 @@ async function applyChangesWithBackup(
   const backupDir = path.join(projectRoot, BACKUP_ROOT, sessionId);
   const backupPaths: string[] = [];
 
+  // Track which files exist before we modify them
+  const existingFiles = new Set<string>();
+  for (const mod of modifications) {
+    const fullPath = path.join(projectRoot, mod.filePath);
+    if (fs.existsSync(fullPath)) {
+      existingFiles.add(mod.filePath);
+    }
+  }
+
   try {
     // Step 1: Create backup directory
     fs.mkdirSync(backupDir, { recursive: true });
@@ -478,7 +533,7 @@ async function applyChangesWithBackup(
     for (const mod of modifications) {
       const fullPath = path.join(projectRoot, mod.filePath);
 
-      if (fs.existsSync(fullPath)) {
+      if (existingFiles.has(mod.filePath)) {
         const backupPath = path.join(backupDir, mod.filePath);
         const backupDirForFile = path.dirname(backupPath);
 
@@ -488,13 +543,14 @@ async function applyChangesWithBackup(
       }
     }
 
-    // Step 3: Write manifest
+    // Step 3: Write manifest (track which files are new)
     const manifest: BackupManifest = {
       sessionId,
       timestamp: Date.now(),
       files: modifications.map(m => ({
         original: m.filePath,
         backup: path.join(backupDir, m.filePath),
+        isNewFile: !existingFiles.has(m.filePath),  // Track if file was newly created
       })),
     };
 
@@ -574,24 +630,51 @@ async function revertFromBackups(
     );
 
     let filesReverted = 0;
+    let filesDeleted = 0;
 
     for (const file of manifest.files) {
-      const backupPath = path.join(backupDir, file.original);
       const originalPath = path.join(projectRoot, file.original);
 
-      if (fs.existsSync(backupPath)) {
-        fs.copyFileSync(backupPath, originalPath);
-        filesReverted++;
+      // Handle new files - delete them
+      if (file.isNewFile) {
+        if (fs.existsSync(originalPath)) {
+          fs.unlinkSync(originalPath);
+          filesDeleted++;
+          console.log(`[Revert] Deleted new file: ${file.original}`);
+          
+          // Clean up empty parent directories
+          try {
+            const parentDir = path.dirname(originalPath);
+            const entries = fs.readdirSync(parentDir);
+            if (entries.length === 0) {
+              fs.rmdirSync(parentDir);
+              console.log(`[Revert] Removed empty directory: ${path.dirname(file.original)}`);
+            }
+          } catch {
+            // Ignore errors when cleaning up directories
+          }
+        }
+      } else {
+        // Handle existing files - restore from backup
+        const backupPath = path.join(backupDir, file.original);
+        if (fs.existsSync(backupPath)) {
+          fs.copyFileSync(backupPath, originalPath);
+          filesReverted++;
+        }
       }
     }
 
     // Delete backup directory after successful revert
     fs.rmSync(backupDir, { recursive: true });
 
+    const message = filesDeleted > 0 
+      ? `Reverted ${filesReverted} file(s), deleted ${filesDeleted} new file(s)`
+      : `Reverted ${filesReverted} file(s)`;
+
     return {
       success: true,
-      message: `Reverted ${filesReverted} file(s)`,
-      filesReverted,
+      message,
+      filesReverted: filesReverted + filesDeleted,
     };
   } catch (error) {
     console.error("Error reverting from backups:", error);
@@ -603,8 +686,109 @@ async function revertFromBackups(
   }
 }
 
+/**
+ * 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,
@@ -618,50 +802,102 @@ 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);
 
+      // 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);
         }
       }
     }
   }
 
   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 };
 }
 
 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;
   }
 
   const cleanRoute = route.replace(/^\//, "");
+  
+  // 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) {
@@ -670,6 +906,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;
 }
 

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

@@ -243,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;
         }
       }
 
@@ -551,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,
@@ -568,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);
         }
       }
     }
@@ -595,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 };
@@ -621,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;
   }
@@ -635,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) {
@@ -648,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;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.25",
+  "version": "1.3.27",
   "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",