@codeyam/codeyam-cli 0.1.0-staging.dd216e0 → 0.1.0-staging.e057775

package/analyzer-template/project/writeScenarioComponents.ts

@@ -97,11 +97,15 @@ function resetDebugTiming(): void {
  */
 function findEndOfImports(content: string): number {
   try {
+    // Use temp.tsx to enable JSX parsing - otherwise TypeScript may misparse
+    // JSX content containing the word "import" (e.g., "Entities that import this")
+    // as an import statement, causing mock code to be inserted in the wrong location.
     const sourceFile = ts.createSourceFile(
-      'temp.ts',
+      'temp.tsx',
       content,
       ts.ScriptTarget.Latest,
       true,
+      ts.ScriptKind.TSX,
     );
 
     let lastImportEnd = 0;
@@ -710,11 +714,13 @@ function extractInternalImportPathsAst(fileContent: string): string[] {
   const importPaths: string[] = [];
 
   try {
+    // Use temp.tsx to enable JSX parsing for consistent handling of JSX files
     const sourceFile = ts.createSourceFile(
-      'temp.ts',
+      'temp.tsx',
       fileContent,
       ts.ScriptTarget.Latest,
       true,
+      ts.ScriptKind.TSX,
     );
 
     for (const statement of sourceFile.statements) {
@@ -864,22 +870,72 @@ function addMockToContent(
 
   // Check if we have multiple calls with different variable names
   // This requires generating separate mock functions for each call site
+  //
+  // IMPORTANT: calls array may contain BOTH base hook calls (e.g., "useFetcher<Type>()")
+  // AND method chain usages (e.g., "useFetcher().functionCallReturnValue.submit(...)").
+  // We only want to count base hook calls for the length comparison with callVariableNames.
+  // A "base call" is one that ends with "()" possibly preceded by a type annotation,
+  // without any subsequent method chains like ".functionCallReturnValue" or ".submit(...)".
+  const baseHookCalls = importedExport.calls?.filter((call) => {
+    // Base hook calls match patterns like:
+    // - "useFetcher()"
+    // - "useFetcher<Type>()"
+    // - "useFetcher<{ complex: Type }>()"
+    // They end with "()" and don't have method chains after the call.
+    // Method chains contain ".functionCallReturnValue" or have property access after "()".
+    return (
+      call.endsWith('()') &&
+      !call.includes('.functionCallReturnValue') &&
+      // Also exclude method chains like "hook().something" or "hook().method()"
+      !call.match(/\(\)\.[a-zA-Z]/)
+    );
+  });
+
+  // Determine if we can generate unique mock functions for multiple variables.
+  // We need:
+  // 1. Multiple variable names (callVariableNames.length > 1)
+  // 2. Base hook calls to match them (baseHookCalls.length > 0)
+  // Note: We use min(baseHookCalls.length, callVariableNames.length) for iteration
+  // to handle cases where data might be slightly out of sync (stale entries).
   const hasMultipleCallsWithVariables =
-    importedExport.calls &&
-    importedExport.calls.length > 1 &&
+    baseHookCalls &&
+    baseHookCalls.length > 1 &&
     importedExport.callVariableNames &&
-    importedExport.callVariableNames.length === importedExport.calls.length;
+    importedExport.callVariableNames.length > 1 &&
+    // Only proceed if we have at least as many base calls as variable names,
+    // OR they're close enough (within 1) to handle minor sync issues
+    Math.abs(baseHookCalls.length - importedExport.callVariableNames.length) <=
+      1;
 
   let mockCode: string | undefined;
   const variableMockCodes: string[] = [];
 
   if (hasMultipleCallsWithVariables) {
     // Generate separate mock functions for each variable-qualified call
-    // Track variable name occurrences to disambiguate when same variable is reused
-    // (mirrors the logic in gatherDataForMocks)
+    // Look up canonical keys from dataForMocks and track variable names for function naming
+
+    // Get all call signature keys for this hook from dataForMocks
+    const dataForMocks =
+      rootAnalysis.metadata?.scenariosDataStructure?.dataForMocks;
+    // Match keys that start with the hook name (e.g., "useFetcher" matches "useFetcher<User>()")
+    const callSignatureKeysForHook = dataForMocks
+      ? Object.keys(dataForMocks).filter((key) => {
+          const hookBaseName = importedExport.name.split(/[<(]/)[0];
+          const keyBaseName = key.split(/[<(]/)[0];
+          return keyBaseName === hookBaseName;
+        })
+      : [];
+
+    // Track variable name occurrences for unique function naming
     const variableNameCounts: Record<string, number> = {};
 
-    for (let i = 0; i < importedExport.calls!.length; i++) {
+    // Use the minimum of both array lengths to handle slight mismatches
+    // (e.g., stale data from previous analysis runs)
+    const iterationLimit = Math.min(
+      baseHookCalls!.length,
+      importedExport.callVariableNames!.length,
+    );
+    for (let i = 0; i < iterationLimit; i++) {
       const variableName = importedExport.callVariableNames![i];
       if (!variableName) continue;
 
@@ -887,18 +943,37 @@ function addMockToContent(
       const occurrence = variableNameCounts[variableName] ?? 0;
       variableNameCounts[variableName] = occurrence + 1;
 
-      // If this is a reused variable name (occurrence > 0), append index
-      // e.g., "fetcher[1] <- useFetcher" for the second usage of "fetcher"
+      // Build indexed variable name for function naming
       const indexedVariableName =
         occurrence > 0 ? `${variableName}[${occurrence}]` : variableName;
 
-      // Generate mock code for this specific call using variable-qualified name
-      // Format: "variableName <- functionName" (reads as "variableName receives from functionName")
-      const qualifiedName = `${indexedVariableName} <- ${importedExport.name}`;
+      // Use safe function name with underscores instead of brackets
+      // e.g., fetcher[1] -> fetcher_1
+      const safeFunctionName = indexedVariableName.replace(/\[(\d+)\]/g, '_$1');
+      // Compute unique mock function name for call site replacement
+      // e.g., useFetcher_entityDiffFetcher, useFetcher_reportFetcher
+      const mockFunctionName = `${importedExport.name}_${safeFunctionName}`;
+
+      // Use the call signature from baseHookCalls[i] as the data key
+      // This matches what's stored in dataForMocks
+      const callSignature = baseHookCalls![i];
+
+      // Generate mock code using the call signature directly
+      // This prevents "symbol already declared" errors when multiple calls exist
+      // Check if this is a package import that won't have scenario copies
+      const isPackageImportForMock = importPath?.startsWith('@');
       const variableMockCode = constructMockCode(
-        qualifiedName,
+        callSignature, // Use call signature format for data lookup
         dependencySchemas,
         importedExport.entityType,
+        undefined, // No need for separate canonical key
+        {
+          uniqueFunctionSuffix: safeFunctionName, // Use variable name for unique function naming
+          // For node_modules or package imports, skip spreading from __cyOriginal
+          // since those packages/files don't export *__cyOriginal variants
+          skipOriginalSpread:
+            importedExport.isNodeModule || isPackageImportForMock,
+        },
       );
 
       if (variableMockCode) {
@@ -907,25 +982,25 @@ function addMockToContent(
         // Replace the call site with the variable-specific mock function
         // e.g., useFetcher<BranchEntityDiffResult>() -> useFetcher_entityDiffFetcher()
         // e.g., useFetcher() -> useFetcher_reportFetcher()
-        // For indexed variables: useFetcher() -> useFetcher_fetcher_1()
-        const callSignature = importedExport.calls![i];
         // Escape special regex characters in the call signature
         const escapedCallSignature = callSignature.replace(
           /[.*+?^${}()|[\]\\]/g,
           '\\$&',
         );
-        // Create regex that matches the call (with optional whitespace variations)
+        // Create regex that matches the call (with optional whitespace variations).
+        // TypeScript formatters commonly break type parameters across lines, e.g.:
+        //   useLoaderData<
+        //     typeof loader
+        //   >()
+        // So we allow optional whitespace around < and > delimiters, not just
+        // where whitespace already exists in the call signature string.
         const callRegex = new RegExp(
-          escapedCallSignature.replace(/\s+/g, '\\s*'),
-          'g',
+          escapedCallSignature
+            .replace(/\s+/g, '\\s*')
+            .replace(/</g, '\\s*<\\s*')
+            .replace(/>/g, '\\s*>\\s*'),
+          'gs',
         );
-        // Use safe function name with underscores instead of brackets
-        // e.g., fetcher[1] -> fetcher_1
-        const safeFunctionName = indexedVariableName.replace(
-          /\[(\d+)\]/g,
-          '_$1',
-        );
-        const mockFunctionName = `${importedExport.name}_${safeFunctionName}`;
         fileContent = fileContent.replace(callRegex, `${mockFunctionName}()`);
       }
     }
@@ -941,83 +1016,186 @@ function addMockToContent(
         : undefined;
 
     if (singleCallVariableName) {
-      // For single variable assignments, use the variable-qualified key for data lookup
-      // Use constructMockCode to generate proper dispatch functions for nested function calls
-      // (e.g., useTranslation returns { t } where t() needs to dispatch based on translation key)
-      const qualifiedKey = `${singleCallVariableName} <- ${importedExport.name}`;
-      // Keep the original function name since there's only one call - no need for unique names
+      // For single variable assignments, use the call signature directly from dataForMocks
+      const dataForMocks =
+        rootAnalysis.metadata?.scenariosDataStructure?.dataForMocks;
+
+      // Find matching call signature key in dataForMocks
+      // IMPORTANT: First try exact match with type parameters (e.g., "useLoaderData<LoaderData>()")
+      // to avoid picking the wrong variant (e.g., "useLoaderData<typeof loader>()" which may
+      // have different properties). Fall back to base name matching only if exact match fails.
+      const hookBaseName = importedExport.name.split(/[<(]/)[0];
+      const expectedKey = importedExport.calls?.[0];
+      let callSignatureKey: string | undefined;
+
+      if (dataForMocks) {
+        const keys = Object.keys(dataForMocks);
+
+        // First try exact match with the expected call signature
+        if (expectedKey && keys.includes(expectedKey)) {
+          callSignatureKey = expectedKey;
+        } else {
+          // Fall back to base name matching
+          callSignatureKey = keys.find((key) => {
+            // Split on ., <, or ( to get the true base name
+            // This handles both "useFlags()" -> "useFlags" and "trpc.useUtils()" -> "trpc"
+            const keyBaseName = key.split(/[.<(]/)[0];
+            return keyBaseName === hookBaseName;
+          });
+        }
+      }
+
+      // Use the call signature if found, otherwise construct it
+      const dataKey =
+        callSignatureKey ??
+        importedExport.calls?.[0] ??
+        `${importedExport.name}()`;
+
+      // IMPORTANT: If the dataKey is a method chain (e.g., "trpc.useUtils()"), we should
+      // use the base name (e.g., "trpc") when calling constructMockCode. This ensures
+      // constructMockCode generates a complete nested mock from the schema without
+      // referencing __cyOriginal variables.
+      // NOTE: Only check for dots BEFORE the first open paren. Function calls with
+      // dotted arguments like "getSurveyWithMetadata(params.surveyId)" have dots
+      // INSIDE parens — these are NOT method chains and should keep the full signature.
+      const dataKeyBaseName = dataKey.split(/[.<(]/)[0];
+      const firstParenIndex = dataKey.indexOf('(');
+      const partBeforeFirstParen =
+        firstParenIndex >= 0 ? dataKey.substring(0, firstParenIndex) : dataKey;
+      const isMethodChainDataKey =
+        dataKeyBaseName === importedExport.name &&
+        dataKey !== importedExport.name &&
+        partBeforeFirstParen.includes('.');
+      const mockNameToUse = isMethodChainDataKey
+        ? importedExport.name
+        : dataKey;
+
+      // Keep the original function name since there's only one call
+      // Check if this is a package import that won't have scenario copies
+      const isPackageImportForSingleCall = importPath?.startsWith('@');
       mockCode = constructMockCode(
-        qualifiedKey,
+        mockNameToUse,
         dependencySchemas,
         importedExport.entityType,
-        { keepOriginalFunctionName: true },
+        undefined,
+        {
+          keepOriginalFunctionName: true,
+          // For node_modules or package imports, skip spreading from __cyOriginal
+          // since those packages/files don't export *__cyOriginal variants
+          skipOriginalSpread:
+            importedExport.isNodeModule || isPackageImportForSingleCall,
+        },
       );
       // If constructMockCode didn't generate code, fall back to simple return
+      // IMPORTANT: We inline scenarios().data() inside the function rather than
+      // storing in a const - see comment in constructMockCode.ts for why.
       if (!mockCode) {
-        mockCode = `const ${importedExport.name}ReturnValue = scenarios().data()?.["${qualifiedKey}"];
-
-function ${importedExport.name}() {
-  return ${importedExport.name}ReturnValue;
+        mockCode = `// PATCHED: memoize to return stable reference (prevents infinite useEffect re-triggers)
+const _${importedExport.name}Ref = {
+  current: null,
+};
+function ${importedExport.name}(...args) {
+  if (!_${importedExport.name}Ref.current) {
+    _${importedExport.name}Ref.current = scenarios().data()?.["${dataKey}"];
+  }
+  return _${importedExport.name}Ref.current;
 }`;
       }
     } else {
-      // Check if any analysis (fileAnalyses or rootAnalysis) has this function's data
-      // under a variable-qualified key. The entity that CALLS the function (e.g., FileTableRow)
-      // has the dataForMocks with the variable-qualified key, not the root analysis (e.g., GitView).
-      let variableQualifiedKey: string | undefined;
-
-      // First check fileAnalyses (the analyses for the entity being written)
-      for (const analysis of fileAnalyses) {
-        const dataForMocks =
-          analysis.metadata?.scenariosDataStructure?.dataForMocks;
-        if (dataForMocks) {
-          variableQualifiedKey = Object.keys(dataForMocks).find((key) => {
-            const match = key.match(/^([a-zA-Z_][a-zA-Z0-9_]*)\s*<-\s*(.+)$/);
-            return match && match[2] === importedExport.name;
-          });
-          if (variableQualifiedKey) {
-            break;
-          }
+      // Helper to find matching call signature key from dataForMocks
+      // IMPORTANT: First try exact match with type parameters (e.g., "useLoaderData<LoaderData>()")
+      // to avoid picking the wrong variant. Fall back to base name matching only if needed.
+      const hookBaseName = importedExport.name.split(/[<(]/)[0];
+      const expectedKey = importedExport.calls?.[0];
+      const findMatchingKey = (
+        dataForMocks: Record<string, unknown> | undefined,
+      ): string | undefined => {
+        if (!dataForMocks) return undefined;
+        const keys = Object.keys(dataForMocks);
+
+        // First try exact match with the expected call signature
+        if (expectedKey && keys.includes(expectedKey)) {
+          return expectedKey;
         }
-      }
 
-      // If not found in fileAnalyses, fall back to rootAnalysis
-      if (!variableQualifiedKey) {
-        const dataForMocks =
-          rootAnalysis.metadata?.scenariosDataStructure?.dataForMocks;
-        if (dataForMocks) {
-          variableQualifiedKey = Object.keys(dataForMocks).find((key) => {
-            const match = key.match(/^([a-zA-Z_][a-zA-Z0-9_]*)\s*<-\s*(.+)$/);
-            return match && match[2] === importedExport.name;
-          });
+        // Fall back to base name matching
+        return keys.find((key) => {
+          // Split on ., <, or ( to get the true base name
+          // This handles both "useFlags()" -> "useFlags" and "trpc.useUtils()" -> "trpc"
+          const keyBaseName = key.split(/[.<(]/)[0];
+          return keyBaseName === hookBaseName;
+        });
+      };
+
+      // Check rootAnalysis FIRST for matching keys.
+      // The mock DATA is generated from rootAnalysis, so the mock CODE must
+      // also use rootAnalysis keys to ensure the lookup succeeds.
+      let dataKey = findMatchingKey(
+        rootAnalysis.metadata?.scenariosDataStructure?.dataForMocks,
+      );
+
+      // If not found in rootAnalysis, fall back to fileAnalyses
+      if (!dataKey) {
+        for (const analysis of fileAnalyses) {
+          dataKey = findMatchingKey(
+            analysis.metadata?.scenariosDataStructure?.dataForMocks,
+          );
+          if (dataKey) break;
         }
       }
 
-      if (variableQualifiedKey) {
-        // Use the variable-qualified key found in the analysis
-        // Use constructMockCode to generate proper dispatch functions for nested function calls
-        // Keep the original function name since there's only one call - no need for unique names
-        mockCode = constructMockCode(
-          variableQualifiedKey,
-          dependencySchemas,
-          importedExport.entityType,
-          { keepOriginalFunctionName: true },
-        );
-        // If constructMockCode didn't generate code, fall back to simple return
-        if (!mockCode) {
-          mockCode = `const ${importedExport.name}ReturnValue = scenarios().data()?.["${variableQualifiedKey}"];
+      // Use the data key if found, otherwise use call signature or function name.
+      // IMPORTANT: If the dataKey is a method chain (e.g., "trpc.useUtils()"), we should
+      // use the base name (e.g., "trpc") when calling constructMockCode. This ensures
+      // constructMockCode generates a complete nested mock from the schema without
+      // referencing __cyOriginal variables. The __cyOriginal pattern is only needed
+      // for partial mocking where we preserve some original methods, not for complete
+      // method-chain mocks where we provide all implementations.
+      // NOTE: Only check for dots BEFORE the first open paren. Function calls with
+      // dotted arguments like "getSurveyWithMetadata(params.surveyId)" have dots
+      // INSIDE parens — these are NOT method chains and should keep the full signature.
+      const dataKeyBaseName = dataKey?.split(/[.<(]/)[0];
+      const elseFirstParenIndex = dataKey?.indexOf('(') ?? -1;
+      const elsePartBeforeFirstParen =
+        dataKey && elseFirstParenIndex >= 0
+          ? dataKey.substring(0, elseFirstParenIndex)
+          : dataKey;
+      const isMethodChainDataKey =
+        dataKey &&
+        dataKeyBaseName === importedExport.name &&
+        dataKey !== importedExport.name &&
+        (elsePartBeforeFirstParen?.includes('.') ?? false);
+      const mockNameToUse = isMethodChainDataKey
+        ? importedExport.name
+        : (dataKey ?? importedExport.calls?.[0] ?? `${importedExport.name}()`);
 
-function ${importedExport.name}() {
-  return ${importedExport.name}ReturnValue;
+      mockCode = constructMockCode(
+        mockNameToUse,
+        dependencySchemas,
+        importedExport.entityType,
+        undefined,
+        {
+          keepOriginalFunctionName: true,
+          // For node_modules or package imports, skip spreading from __cyOriginal
+          // since those packages/files don't export *__cyOriginal variants
+          skipOriginalSpread:
+            importedExport.isNodeModule || importPath?.startsWith('@'),
+        },
+      );
+      // If constructMockCode didn't generate code, fall back to simple return
+      // IMPORTANT: We inline scenarios().data() inside the function rather than
+      // storing in a const - see comment in constructMockCode.ts for why.
+      if (!mockCode && dataKey) {
+        mockCode = `// PATCHED: memoize to return stable reference (prevents infinite useEffect re-triggers)
+const _${importedExport.name}Ref = {
+  current: null,
+};
+function ${importedExport.name}(...args) {
+  if (!_${importedExport.name}Ref.current) {
+    _${importedExport.name}Ref.current = scenarios().data()?.["${dataKey}"];
+  }
+  return _${importedExport.name}Ref.current;
 }`;
-        }
-      } else {
-        // Original behavior for calls without variable names
-        mockCode = constructMockCode(
-          importedExport.name,
-          dependencySchemas,
-          importedExport.entityType,
-        );
       }
     }
   }
@@ -1048,12 +1226,39 @@ function ${importedExport.name}() {
         /[.*+?^${}()|[\]\\]/g,
         '\\$&',
       );
+      // Use a simpler, more robust regex pattern that matches the fallback path.
+      // Key improvements:
+      // 1. Uses escapeRegExp(firstPart) to handle special characters in function names
+      // 2. Uses word boundaries (\b) to prevent partial matches
+      // 3. Handles comma BEFORE or AFTER the name: (?:,\s*|\s*,)?
+      // 4. Matches specific import path (escapedImportPath)
       const importRegExp = new RegExp(
-        `(import(?:(?!${firstPart}|from|import)[\\s\\S])*?)${firstPart}(?:,\\s*)?((?:(?!import)[\\s\\S])*?from\\s+['"]${escapedImportPath}['"])`,
+        `(import\\s*\\{[^}]*?)\\b${escapeRegExp(firstPart)}\\b(?:,\\s*|\\s*,)?((?:[^}]*\\}\\s*from\\s*['"]${escapedImportPath}['"];?))`,
         'm',
       );
 
-      if (importedExportNameParts.length > 1) {
+      // Check if any call signature has multiple parts (e.g., "logger.error(error)")
+      // If so, the mock code will spread from __cyOriginal, so we need to rename the import
+      // EXCEPT:
+      // 1. For node_module imports, the __cyOriginal pattern doesn't work because
+      //    the original package doesn't export *__cyOriginal variants.
+      // 2. For package imports (starting with @), the __cyOriginal pattern doesn't work
+      //    because scenario copies aren't created for package files - they keep the
+      //    original import path which doesn't export *__cyOriginal.
+      const anyCallHasMultipleParts = importedExport.calls?.some((call) => {
+        const callParts = splitOutsideParenthesesAndArrays(call);
+        return callParts.length > 1;
+      });
+
+      // Package imports (starting with @) don't get scenario copies, so __cyOriginal won't exist
+      const isPackageImport = importPath.startsWith('@');
+
+      const shouldRenameToOriginal =
+        !importedExport.isNodeModule &&
+        !isPackageImport &&
+        (importedExportNameParts.length > 1 || anyCallHasMultipleParts);
+
+      if (shouldRenameToOriginal) {
         fileContent = fileContent.replace(
           importRegExp,
           `$1${firstPart}__cyOriginal$2`,
@@ -1062,6 +1267,21 @@ function ${importedExport.name}() {
         fileContent = fileContent.replace(importRegExp, '$1$2');
       }
 
+      // Also handle namespace imports (import * as foo from '...')
+      // These need to be renamed to foo__cyOriginal when the mock code spreads from the original.
+      // Note: We match any path (not just escapedImportPath) because the import path may have
+      // been rewritten by transitive import handling before this code runs.
+      if (shouldRenameToOriginal) {
+        const namespaceImportRegExp = new RegExp(
+          `(import\\s+\\*\\s+as\\s+)${escapeRegExp(firstPart)}(\\s+from\\s+['"][^'"]*['"])`,
+          'm',
+        );
+        fileContent = fileContent.replace(
+          namespaceImportRegExp,
+          `$1${firstPart}__cyOriginal$2`,
+        );
+      }
+
       // Remove empty imports entirely to avoid partial commenting issues with multiline imports
       // This handles both single-line and multiline empty imports
       fileContent = fileContent.replace(
@@ -1086,7 +1306,20 @@ function ${importedExport.name}() {
       'm',
     );
 
-    if (importedExportNameParts.length > 1) {
+    // Check if any call signature has multiple parts (e.g., "logger.error(error)")
+    // If so, the mock code will spread from __cyOriginal, so we need to rename the import
+    // EXCEPT: For node_module imports, the __cyOriginal pattern doesn't work because
+    // the original package doesn't export *__cyOriginal variants.
+    const anyCallHasMultipleParts = importedExport.calls?.some((call) => {
+      const callParts = splitOutsideParenthesesAndArrays(call);
+      return callParts.length > 1;
+    });
+
+    const shouldRenameToOriginal =
+      !importedExport.isNodeModule &&
+      (importedExportNameParts.length > 1 || anyCallHasMultipleParts);
+
+    if (shouldRenameToOriginal) {
       // Rename the import instead of removing (for destructured access patterns)
       fileContent = fileContent.replace(
         namedImportRegExp,
@@ -1542,9 +1775,16 @@ export default async function writeScenarioComponents({
   });
 
   let importedExportIndex = 0;
+  const loopStartTime = Date.now();
+  console.log(
+    `[WriteScenario] Starting import loop for ${entity.name}: ${sortedImportedExports.length} imports`,
+  );
   for (const importedExport of sortedImportedExports) {
     importedExportIndex++;
     if (importedExportIndex % 5 === 0 || importedExportIndex === 1) {
+      console.log(
+        `[WriteScenario] ${entity.name} import ${importedExportIndex}/${sortedImportedExports.length}: ${importedExport.name} elapsed=${Date.now() - loopStartTime}ms`,
+      );
       debugLog(
         `Processing importedExport ${importedExportIndex}/${sortedImportedExports.length}`,
         {
@@ -1694,6 +1934,17 @@ export default async function writeScenarioComponents({
               dataFileContent = stripServerOnlyImport(dataFileContent);
               dataFileContent = applyServerOnlyMocks(dataFileContent);
 
+              // Process transitive imports: if the data entity file imports from files
+              // that have `import "server-only"`, rewrite those imports to transitive
+              // copies with server-only stripped. Without this, data entity files that
+              // end up in a client bundle (e.g., via a stripped "use server" boundary)
+              // would pull in server-only code and cause build failures.
+              dataFileContent = await processTransitiveImportsRecursively(
+                dataFileContent,
+                fileNotMocked.path,
+                dataScenarioPath,
+              );
+
               // Write the transformed data entity file
               await writeFile(dataScenarioPath, dataFileContent);
               scenarioComponentPaths.push(dataScenarioPath);
@@ -1719,9 +1970,9 @@ export default async function writeScenarioComponents({
               importedExport.name,
             );
 
-            // Don't recurse - data entities don't need their dependencies processed
-            // The import rewriting will happen later in this same loop iteration
-            // (at lines ~1590-1702) to point imports to this transformed file
+            // Don't recurse into full writeScenarioComponents - data entities don't
+            // need mock generation for their dependencies. Transitive server-only
+            // import processing is already handled above via processTransitiveImportsRecursively.
           } else {
             // For visual/library entities, recurse to process their dependencies
 
@@ -1732,6 +1983,10 @@ export default async function writeScenarioComponents({
               importedExport.resolvedIsDefault === true &&
               importedExport.isDefault === false;
 
+            console.log(
+              `[WriteScenario] RECURSE START: ${entity.name} -> ${importedExportEntity.name}`,
+            );
+            const recurseStartTime = Date.now();
             debugLog(
               `Recursing into writeScenarioComponents for ${importedExportEntity.name}`,
               {
@@ -1763,7 +2018,10 @@ export default async function writeScenarioComponents({
                   ? importedExport.name
                   : undefined,
               }),
-              60000, // 1 minute timeout for recursive calls
+              180000, // 3 minute timeout for recursive calls (complex components need more time)
+            );
+            console.log(
+              `[WriteScenario] RECURSE END: ${entity.name} -> ${importedExportEntity.name} took ${Date.now() - recurseStartTime}ms`,
             );
             debugLog(
               `Completed recursive writeScenarioComponents for ${importedExportEntity.name}`,
@@ -1787,20 +2045,25 @@ export default async function writeScenarioComponents({
       // that stubbing would break (e.g., Zod schemas with .superRefine())
       const isDataEntity = entityType === 'data' || entityType === 'type';
 
-      // Heuristic: Zod schemas are often misclassified as 'library' but should be preserved
-      // Detect by: name starts with Z + uppercase letter, AND has Zod method calls
-      const looksLikeZodSchema =
-        entityType === 'library' &&
-        /^Z[A-Z]/.test(importedExport.name) &&
-        importedExport.calls?.some((call: string) =>
-          /\.(superRefine|refine|transform|default|optional|nullable|array|object|string|number|boolean|parse|safeParse)\s*\(/.test(
-            call,
-          ),
-        );
+      // If calls data shows the entity is only accessed via properties/methods
+      // (e.g., formValidator.validate(), schema.superRefine()) and never directly
+      // invoked (e.g., getInitialProps()), it's used as an object and should be
+      // preserved rather than replaced with a Proxy stub.
+      const onlyPropertyAccessed =
+        importedExport.calls?.length > 0 &&
+        !importedExport.calls.some((call: string) => {
+          const afterName = call.slice(importedExport.name.length);
+          return afterName.startsWith('(') || afterName.startsWith('<');
+        });
 
-      // Callable entities can be safely stubbed (but not Zod schemas)
+      // Callable entities can be safely stubbed. Entities that are only
+      // property-accessed should be preserved (their methods need to work).
+      // 'other' entities are unknown types — safer to preserve than stub.
       const isCallable =
-        !isDataEntity && !looksLikeZodSchema && entityType !== undefined;
+        !isDataEntity &&
+        !onlyPropertyAccessed &&
+        entityType !== undefined &&
+        entityType !== 'other';
 
       // Determine what action to take
       const shouldStripAndReplace = hasMock;
@@ -2105,6 +2368,10 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
     }
   }
 
+  // Track post-import-loop timing
+  const postLoopStartTime = Date.now();
+  console.log(`[WriteScenario] POST-LOOP START: ${entity.name}`);
+
   // Collect universal mocks BEFORE processing nodeModuleImports
   // This is needed to check if a node module import is handled by a universal mock
   const universalMocks = project.metadata?.universalMocks ?? [];
@@ -2164,6 +2431,10 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
     );
   }
 
+  console.log(
+    `[WriteScenario] POST-LOOP ${entity.name}: node+universal mocks took ${Date.now() - postLoopStartTime}ms`,
+  );
+
   if (
     rootAnalysis.entitySha === entity.sha &&
     entity.metadata?.notExported &&
@@ -2242,6 +2513,10 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
   );
   debugLog('Completed rewriteRelativeModuleImports');
 
+  console.log(
+    `[WriteScenario] POST-LOOP ${entity.name}: transformations took ${Date.now() - postLoopStartTime}ms`,
+  );
+
   /**
    * Recursively process a file's imports to create transitive copies with server-only stripped.
    * This handles chains of arbitrary depth: A -> B -> C -> D where each needs server-only removed.
@@ -2262,7 +2537,7 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
     startTime: number = Date.now(),
   ): Promise<string> {
     // Global timeout for entire transitive processing
-    const GLOBAL_TIMEOUT_MS = 60000; // 1 minute max for all transitive processing
+    const GLOBAL_TIMEOUT_MS = 180000; // 3 minutes max for all transitive processing (complex components need more time)
     const elapsed = Date.now() - startTime;
     if (elapsed > GLOBAL_TIMEOUT_MS) {
       throw new Error(
@@ -2271,6 +2546,10 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
     }
 
     const importPaths = extractInternalImportPaths(content);
+    // Always log to help debug timeout issues
+    console.log(
+      `[TransitiveImports] depth=${depth} file=${path.basename(sourceFilePath)} imports=${importPaths.length} visited=${visitedPaths.size} elapsed=${Date.now() - startTime}ms`,
+    );
     debugLog(`processTransitiveImportsRecursively depth=${depth}`, {
       sourceFilePath,
       importCount: importPaths.length,
@@ -2325,8 +2604,10 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
       );
       const extension = importFile.name.split('.').pop();
       const isIndex = isIndexPath(importFile.path);
-      const pathHash = safeFileName(importFile.path);
-      const transitiveFilePath = `${PROJECT_RELATIVE_PATH}/${basePath}/${pathHash}_${isIndex ? 'index_' : ''}transitive_${safeFileName(scenario.name)}.${extension}`;
+      // Limit pathHash length to prevent ENAMETOOLONG errors on macOS (255 char limit)
+      const pathHash = safeFileName(importFile.path, { maxLength: 80 });
+      const scenarioSlug = safeFileName(scenario.name, { maxLength: 60 });
+      const transitiveFilePath = `${PROJECT_RELATIVE_PATH}/${basePath}/${pathHash}_${isIndex ? 'index_' : ''}transitive_${scenarioSlug}.${extension}`;
 
       // Check if this is a circular import (we're already processing this file)
       const isCircularImport = visitedPaths.has(resolvedPath);
@@ -2450,6 +2731,10 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
     return modifiedContent;
   }
 
+  console.log(
+    `[WriteScenario] POST-LOOP ${entity.name}: before remaining imports ${Date.now() - postLoopStartTime}ms`,
+  );
+
   // Process remaining internal imports that weren't in importedExports
   // This handles transitive dependencies: when the file content includes code (e.g., from
   // other functions in the same file) that imports from files with "server-only"
@@ -2478,6 +2763,20 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
     debugLog(
       `[REMAINING LOOP] import ${remainingImportIndex}/${remainingImportPaths.length}: ${importPath}`,
     );
+
+    // Skip imports that point to generated CodeYam files (same skip logic as
+    // rewriteRelativeModuleImports). Without this, MockData files from earlier
+    // captures that get discovered by the TypeScript compiler would be treated as
+    // regular imports, creating transitive copies with stale content.
+    const scenarioFilePattern = /[a-f0-9]{64}_\w+_[A-Z]\w*$/;
+    const mockDataPattern = /__codeyamMocks__\//;
+    if (
+      scenarioFilePattern.test(importPath) ||
+      mockDataPattern.test(importPath)
+    ) {
+      continue;
+    }
+
     // Resolve the import path to a project file path
     const resolvedFilePath = resolveImportPath(importPath, file.path, project);
 
@@ -2525,8 +2824,10 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
     );
     const targetFileExtension = targetFile.name.split('.').pop();
     const targetFileIsIndex = isIndexPath(targetFile.path);
-    const filePathHash = safeFileName(targetFile.path);
-    const transformedFilePath = `${PROJECT_RELATIVE_PATH}/${targetFileBasePath}/${filePathHash}_${targetFileIsIndex ? 'index_' : ''}transitive_${safeFileName(scenario.name)}.${targetFileExtension}`;
+    // Limit path hash length to prevent ENAMETOOLONG errors
+    const filePathHash = safeFileName(targetFile.path, { maxLength: 80 });
+    const targetScenarioSlug = safeFileName(scenario.name, { maxLength: 60 });
+    const transformedFilePath = `${PROJECT_RELATIVE_PATH}/${targetFileBasePath}/${filePathHash}_${targetFileIsIndex ? 'index_' : ''}transitive_${targetScenarioSlug}.${targetFileExtension}`;
 
     // Check if we've already processed this file as a transitive copy
     // Note: __data_file_written__ is for entity-specific scenario files with different naming,
@@ -2581,8 +2882,12 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
         );
         const nestedExtension = nestedFile.name.split('.').pop();
         const nestedIsIndex = isIndexPath(nestedFile.path);
-        const nestedPathHash = safeFileName(nestedFile.path);
-        const nestedTransformedPath = `${PROJECT_RELATIVE_PATH}/${nestedBasePath}/${nestedPathHash}_${nestedIsIndex ? 'index_' : ''}transitive_${safeFileName(scenario.name)}.${nestedExtension}`;
+        // Limit path hash length to prevent ENAMETOOLONG errors
+        const nestedPathHash = safeFileName(nestedFile.path, { maxLength: 80 });
+        const nestedScenarioSlug = safeFileName(scenario.name, {
+          maxLength: 60,
+        });
+        const nestedTransformedPath = `${PROJECT_RELATIVE_PATH}/${nestedBasePath}/${nestedPathHash}_${nestedIsIndex ? 'index_' : ''}transitive_${nestedScenarioSlug}.${nestedExtension}`;
 
         // Check if already processed as a transitive file (we can rewrite to point to it)
         // Note: __data_file_written__ is for entity-specific scenario files with different naming,
@@ -2703,6 +3008,10 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
     fileContent = fileContent.replace(importRegex, `$1${safeRelativePath}$2`);
   }
 
+  console.log(
+    `[WriteScenario] POST-LOOP ${entity.name}: remaining imports loop took ${Date.now() - postLoopStartTime}ms`,
+  );
+
   const scenarioComponentComment = `// This file is auto-generated by CodeYam. Do not edit this file manually.
 // This file contains content for a scenario component:
 // Analyses being written: ${JSON.stringify(fileAnalyses?.map((a) => ({ id: a.id, entityName: a.entityName })))}
@@ -2714,6 +3023,83 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
 // Scenario: ${scenario.id} - ${scenario.name}
 `;
 
+  // Final pass: Rename any namespace imports (import * as X from '...') that have
+  // corresponding mock code using ...X__cyOriginal spread pattern.
+  // This handles cases where:
+  // 1. The import path was rewritten by transitive import handling
+  // 2. The import wasn't caught by the earlier renaming logic
+  // We scan for all __cyOriginal references in the mock code and ensure the imports are renamed.
+  const cyOriginalReferences = fileContent.match(/\.\.\.(\w+)__cyOriginal/g);
+  if (cyOriginalReferences) {
+    const uniqueNames = [
+      ...new Set(
+        cyOriginalReferences.map((ref) =>
+          ref.replace('...', '').replace('__cyOriginal', ''),
+        ),
+      ),
+    ];
+    for (const name of uniqueNames) {
+      // Match namespace imports for this name that haven't been renamed yet
+      const namespaceImportRegex = new RegExp(
+        `(import\\s+\\*\\s+as\\s+)${escapeRegExp(name)}(\\s+from\\s+['"][^'"]*['"])`,
+        'g',
+      );
+      fileContent = fileContent.replace(
+        namespaceImportRegex,
+        `$1${name}__cyOriginal$2`,
+      );
+    }
+  }
+
+  // For route components (page.tsx, layout.tsx), the component IS the Next.js page.
+  // There's no wrapper page to inject argumentsData as props (unlike non-route components
+  // which get a scenarioComponent wrapper). We need to wrap the default export so that
+  // the scenario's argumentsData is passed as props to the component.
+  if (
+    isFrameworkRoute(file, entity, framework, file === rootFile) &&
+    rootAnalysis.metadata?.scenariosDataStructure?.arguments?.length > 0
+  ) {
+    const positionalArguments =
+      rootAnalysis.metadata.scenariosDataStructure.arguments;
+    const hasNamedArgs =
+      positionalArguments.length === 1 &&
+      typeof positionalArguments[0] === 'object';
+
+    if (hasNamedArgs) {
+      // Match: export default function Name(
+      // Also: export default async function Name(
+      const defaultExportMatch = fileContent.match(
+        /export\s+default\s+(async\s+)?function\s+(\w+)\s*\(/,
+      );
+
+      if (defaultExportMatch) {
+        const funcName = defaultExportMatch[2];
+
+        // Remove "export default" from the original function declaration
+        fileContent = fileContent.replace(
+          /export\s+default\s+(async\s+)?function\s+(\w+)\s*\(/,
+          '$1function $2(',
+        );
+
+        // Ensure scenarios import is present
+        const mockDataPath = `${relativeMocksDir}/MockData_${safeFileName(scenario.name)}`;
+        if (fileContent.indexOf('import { scenarios } from') === -1) {
+          fileContent = `import { scenarios } from "${mockDataPath}";\n\n${fileContent}`;
+        }
+
+        // Add wrapper default export that injects argumentsData as props.
+        // Filter null values: the LLM uses null to mean "don't pass this prop"
+        // but spreading { prop: null } explicitly passes null, which differs from
+        // undefined (absent) and crashes components that check `prop !== undefined`.
+        fileContent += `\n\nexport default function _CYRouteWrapper(props: any) {
+  const _cyArgs = scenarios().data()?.['arguments']?.[0] ?? {};
+  const _cyCleanArgs = Object.fromEntries(Object.entries(_cyArgs).filter(([_, v]) => v !== null));
+  return <${funcName} {...props} {..._cyCleanArgs} />;
+}\n`;
+      }
+    }
+  }
+
   // Use the directive that was extracted at the beginning of processing
   // This ensures it stays at the very top even after imports are prepended
   // NOTE: We only preserve "use client" directives, NOT "use server" directives.
@@ -2735,5 +3121,9 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
   debugLog('Successfully wrote scenario file');
   scenarioComponentPaths.push(scenarioComponentPath);
 
+  console.log(
+    `[WriteScenario] POST-LOOP ${entity.name}: COMPLETE total=${Date.now() - postLoopStartTime}ms`,
+  );
+
   return { scenarioComponentPaths, writtenScenarioComponents };
 }