humanbehavior-js 0.4.13 → 0.4.15

package/src/wizard/core/install-wizard.ts

@@ -10,12 +10,22 @@ import * as path from 'path';
 
 export interface FrameworkInfo {
   name: string;
-  type: 'react' | 'vue' | 'angular' | 'svelte' | 'nextjs' | 'nuxt' | 'remix' | 'vanilla' | 'node' | 'auto';
+  type: 'react' | 'vue' | 'angular' | 'svelte' | 'nextjs' | 'nuxt' | 'remix' | 'vanilla' | 'astro' | 'gatsby' | 'node' | 'auto';
   bundler?: 'vite' | 'webpack' | 'esbuild' | 'rollup';
   packageManager?: 'npm' | 'yarn' | 'pnpm';
   hasTypeScript?: boolean;
   hasRouter?: boolean;
   projectRoot?: string;
+  version?: string;
+  majorVersion?: number;
+  features?: {
+    hasReact18?: boolean;
+    hasVue3?: boolean;
+    hasNuxt3?: boolean;
+    hasAngularStandalone?: boolean;
+    hasNextAppRouter?: boolean;
+    hasSvelteKit?: boolean;
+  };
 }
 
 export interface CodeModification {
@@ -43,6 +53,30 @@ export class AutoInstallationWizard {
     this.projectRoot = projectRoot;
   }
 
+  /**
+   * Simple version comparison utility
+   */
+  private compareVersions(version1: string, version2: string): number {
+    const v1Parts = version1.split('.').map(Number);
+    const v2Parts = version2.split('.').map(Number);
+    
+    for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
+      const v1 = v1Parts[i] || 0;
+      const v2 = v2Parts[i] || 0;
+      if (v1 > v2) return 1;
+      if (v1 < v2) return -1;
+    }
+    return 0;
+  }
+
+  private isVersionGte(version: string, target: string): boolean {
+    return this.compareVersions(version, target) >= 0;
+  }
+
+  private getMajorVersion(version: string): number {
+    return parseInt(version.split('.')[0]) || 0;
+  }
+
   /**
    * Main installation method - detects framework and auto-installs
    */
@@ -99,68 +133,145 @@ export class AutoInstallationWizard {
       ...packageJson.devDependencies
     };
 
-    // Detect framework
+    // Detect framework with version information
     let framework: FrameworkInfo = {
       name: 'vanilla',
       type: 'vanilla',
-      projectRoot: this.projectRoot
+      projectRoot: this.projectRoot,
+      features: {}
     };
 
     if (dependencies.nuxt) {
+      const nuxtVersion = dependencies.nuxt;
+      const isNuxt3 = this.isVersionGte(nuxtVersion, '3.0.0');
+      
       framework = {
         name: 'nuxt',
         type: 'nuxt',
+        version: nuxtVersion,
+        majorVersion: this.getMajorVersion(nuxtVersion),
         hasTypeScript: !!dependencies.typescript,
         hasRouter: true,
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {
+          hasNuxt3: isNuxt3
+        }
       };
     } else if (dependencies.next) {
+      const nextVersion = dependencies.next;
+      const isNext13 = this.isVersionGte(nextVersion, '13.0.0');
+      
       framework = {
         name: 'nextjs',
         type: 'nextjs',
+        version: nextVersion,
+        majorVersion: this.getMajorVersion(nextVersion),
         hasTypeScript: !!dependencies.typescript || !!dependencies['@types/node'],
         hasRouter: true,
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {
+          hasNextAppRouter: isNext13
+        }
       };
     } else if (dependencies['@remix-run/react'] || dependencies['@remix-run/dev']) {
+      const remixVersion = dependencies['@remix-run/react'] || dependencies['@remix-run/dev'];
       framework = {
         name: 'remix',
         type: 'remix',
+        version: remixVersion,
+        majorVersion: this.getMajorVersion(remixVersion),
         hasTypeScript: !!dependencies.typescript || !!dependencies['@types/react'],
         hasRouter: true,
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {}
       };
     } else if (dependencies.react) {
+      const reactVersion = dependencies.react;
+      const isReact18 = this.isVersionGte(reactVersion, '18.0.0');
+      
       framework = {
         name: 'react',
         type: 'react',
+        version: reactVersion,
+        majorVersion: this.getMajorVersion(reactVersion),
         hasTypeScript: !!dependencies.typescript || !!dependencies['@types/react'],
         hasRouter: !!dependencies['react-router-dom'] || !!dependencies['react-router'],
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {
+          hasReact18: isReact18
+        }
       };
     } else if (dependencies.vue) {
+      const vueVersion = dependencies.vue;
+      const isVue3 = this.isVersionGte(vueVersion, '3.0.0');
+      
       framework = {
         name: 'vue',
         type: 'vue',
+        version: vueVersion,
+        majorVersion: this.getMajorVersion(vueVersion),
         hasTypeScript: !!dependencies.typescript || !!dependencies['@vue/cli-service'],
         hasRouter: !!dependencies['vue-router'],
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {
+          hasVue3: isVue3
+        }
       };
     } else if (dependencies['@angular/core']) {
+      const angularVersion = dependencies['@angular/core'];
+      const isAngular17 = this.isVersionGte(angularVersion, '17.0.0');
+      
       framework = {
         name: 'angular',
         type: 'angular',
+        version: angularVersion,
+        majorVersion: this.getMajorVersion(angularVersion),
         hasTypeScript: true,
         hasRouter: true,
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {
+          hasAngularStandalone: isAngular17
+        }
       };
     } else if (dependencies.svelte) {
+      const svelteVersion = dependencies.svelte;
+      const isSvelteKit = !!dependencies['@sveltejs/kit'];
+      
       framework = {
         name: 'svelte',
         type: 'svelte',
+        version: svelteVersion,
+        majorVersion: this.getMajorVersion(svelteVersion),
         hasTypeScript: !!dependencies.typescript || !!dependencies['svelte-check'],
         hasRouter: !!dependencies['svelte-routing'] || !!dependencies['@sveltejs/kit'],
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {
+          hasSvelteKit: isSvelteKit
+        }
+      };
+    } else if (dependencies.astro) {
+      const astroVersion = dependencies.astro;
+      framework = {
+        name: 'astro',
+        type: 'astro',
+        version: astroVersion,
+        majorVersion: this.getMajorVersion(astroVersion),
+        hasTypeScript: !!dependencies.typescript || !!dependencies['@astrojs/ts-plugin'],
+        hasRouter: true,
+        projectRoot: this.projectRoot,
+        features: {}
+      };
+    } else if (dependencies.gatsby) {
+      const gatsbyVersion = dependencies.gatsby;
+      framework = {
+        name: 'gatsby',
+        type: 'gatsby',
+        version: gatsbyVersion,
+        majorVersion: this.getMajorVersion(gatsbyVersion),
+        hasTypeScript: !!dependencies.typescript || !!dependencies['@types/react'],
+        hasRouter: true,
+        projectRoot: this.projectRoot,
+        features: {}
       };
     }
 
@@ -192,11 +303,18 @@ export class AutoInstallationWizard {
    */
   protected async installPackage(): Promise<void> {
     const { execSync } = await import('child_process');
-    const command = this.framework?.packageManager === 'yarn' 
+    
+    // Build base command
+    let command = this.framework?.packageManager === 'yarn' 
       ? 'yarn add humanbehavior-js'
       : this.framework?.packageManager === 'pnpm'
       ? 'pnpm add humanbehavior-js'
       : 'npm install humanbehavior-js';
+    
+    // Add legacy peer deps flag for npm to handle dependency conflicts
+    if (this.framework?.packageManager !== 'yarn' && this.framework?.packageManager !== 'pnpm') {
+      command += ' --legacy-peer-deps';
+    }
 
     try {
       execSync(command, { cwd: this.projectRoot, stdio: 'inherit' });
@@ -221,6 +339,12 @@ export class AutoInstallationWizard {
       case 'nuxt':
         modifications.push(...await this.generateNuxtModifications());
         break;
+      case 'astro':
+        modifications.push(...await this.generateAstroModifications());
+        break;
+      case 'gatsby':
+        modifications.push(...await this.generateGatsbyModifications());
+        break;
       case 'remix':
         modifications.push(...await this.generateRemixModifications());
         break;
@@ -342,6 +466,91 @@ export function Providers({ children }: { children: React.ReactNode }) {
     return modifications;
   }
 
+  /**
+   * Generate Astro-specific modifications
+   */
+  private async generateAstroModifications(): Promise<CodeModification[]> {
+    const modifications: CodeModification[] = [];
+
+    // Create Astro component for HumanBehavior
+    const astroComponentPath = path.join(this.projectRoot, 'src', 'components', 'HumanBehavior.astro');
+    const astroComponentContent = `---
+// This component will only run on the client side
+---
+
+<script>
+  import { HumanBehaviorTracker } from 'humanbehavior-js';
+  
+  // Get API key from environment variable
+  const apiKey = import.meta.env.PUBLIC_HUMANBEHAVIOR_API_KEY;
+  
+  console.log('HumanBehavior: API key found:', apiKey ? 'Yes' : 'No');
+  
+  if (apiKey) {
+    try {
+      const tracker = HumanBehaviorTracker.init(apiKey);
+      console.log('HumanBehavior: Tracker initialized successfully');
+      
+      // Test event to verify tracking is working
+      setTimeout(() => {
+        tracker.customEvent('astro_page_view', {
+          page: window.location.pathname,
+          framework: 'astro'
+        }).then(() => {
+          console.log('HumanBehavior: Test event sent successfully');
+        }).catch((error) => {
+          console.error('HumanBehavior: Failed to send test event:', error);
+        });
+      }, 1000);
+      
+    } catch (error) {
+      console.error('HumanBehavior: Failed to initialize tracker:', error);
+    }
+  } else {
+    console.error('HumanBehavior: No API key found');
+  }
+</script>`;
+
+    modifications.push({
+      filePath: astroComponentPath,
+      action: 'create',
+      content: astroComponentContent,
+      description: 'Created Astro component for HumanBehavior SDK'
+    });
+
+    // Find and update layout file
+    const layoutFiles = [
+      path.join(this.projectRoot, 'src', 'layouts', 'Layout.astro'),
+      path.join(this.projectRoot, 'src', 'layouts', 'layout.astro'),
+      path.join(this.projectRoot, 'src', 'layouts', 'BaseLayout.astro')
+    ];
+
+    let layoutFile = null;
+    for (const file of layoutFiles) {
+      if (fs.existsSync(file)) {
+        layoutFile = file;
+        break;
+      }
+    }
+
+    if (layoutFile) {
+      const content = fs.readFileSync(layoutFile, 'utf8');
+      const modifiedContent = this.injectAstroLayout(content);
+      
+      modifications.push({
+        filePath: layoutFile,
+        action: 'modify',
+        content: modifiedContent,
+        description: 'Added HumanBehavior component to Astro layout'
+      });
+    }
+
+    // Add environment variable
+    modifications.push(this.createEnvironmentModification(this.framework!));
+
+    return modifications;
+  }
+
   /**
    * Generate Nuxt-specific modifications
    */
@@ -588,6 +797,55 @@ export default defineNuxtPlugin(() => {
     return modifications;
   }
 
+  /**
+   * Generate Gatsby-specific modifications
+   */
+  private async generateGatsbyModifications(): Promise<CodeModification[]> {
+    const modifications: CodeModification[] = [];
+    
+    // Modify or create gatsby-browser.js for Gatsby
+    const gatsbyBrowserFile = path.join(this.projectRoot, 'gatsby-browser.js');
+    
+    if (fs.existsSync(gatsbyBrowserFile)) {
+      const content = fs.readFileSync(gatsbyBrowserFile, 'utf8');
+      const modifiedContent = this.injectGatsbyBrowser(content);
+      
+      modifications.push({
+        filePath: gatsbyBrowserFile,
+        action: 'modify',
+        content: modifiedContent,
+        description: 'Added HumanBehavior initialization to Gatsby browser'
+      });
+    } else {
+      // Create gatsby-browser.js if it doesn't exist
+      modifications.push({
+        filePath: gatsbyBrowserFile,
+        action: 'create',
+        content: `import { HumanBehaviorTracker } from 'humanbehavior-js';
+
+export const onClientEntry = () => {
+  console.log('Gatsby browser entry point loaded');
+  const apiKey = process.env.GATSBY_HUMANBEHAVIOR_API_KEY;
+  console.log('API Key found:', apiKey ? 'Yes' : 'No');
+  if (apiKey) {
+    const tracker = HumanBehaviorTracker.init(apiKey);
+    console.log('HumanBehavior SDK initialized for Gatsby');
+  } else {
+    console.log('No API key found in environment variables');
+  }
+};`,
+        description: 'Created gatsby-browser.js with HumanBehavior initialization'
+      });
+    }
+
+    // Create or append to environment file
+    modifications.push(this.createEnvironmentModification(this.framework!));
+
+    return modifications;
+  }
+
+
+
   /**
    * Apply modifications to the codebase
    */
@@ -705,30 +963,61 @@ export default defineNuxtPlugin(() => {
       : 'process.env.HUMANBEHAVIOR_API_KEY!';
 
     const importStatement = `import { HumanBehaviorProvider } from 'humanbehavior-js/react';`;
-    const providerWrapper = `
-function App() {
-  return (
-    <HumanBehaviorProvider apiKey={${envVar}}>
-      {/* Your existing app content */}
-    </HumanBehaviorProvider>
-  );
-}`;
 
-    // Simple injection - in production, you'd want more sophisticated parsing
+    // Enhanced parsing for React 18+ features
+    const hasReact18 = this.framework?.features?.hasReact18;
+    
+    // Handle different React patterns
     if (content.includes('function App()') || content.includes('const App =')) {
-      return content.replace(
-        /(function App\(\)|const App =)/,
-        `${importStatement}\n\n$1`
-      ).replace(
-        /return \(([\s\S]*?)\);/,
+      // Add import statement
+      let modifiedContent = content.replace(
+        /(import.*?from.*?['"]react['"];?)/,
+        `$1\n${importStatement}`
+      );
+      
+      // If no React import found, add it at the top
+      if (!modifiedContent.includes(importStatement)) {
+        modifiedContent = `${importStatement}\n\n${modifiedContent}`;
+      }
+      
+      // Wrap the App component return with HumanBehaviorProvider
+      modifiedContent = modifiedContent.replace(
+        /(return\s*\([\s\S]*?\)\s*;)/,
         `return (
     <HumanBehaviorProvider apiKey={${envVar}}>
       $1
     </HumanBehaviorProvider>
   );`
       );
+      
+      return modifiedContent;
+    }
+    
+    // Handle React 18+ createRoot pattern
+    if (hasReact18 && content.includes('createRoot')) {
+      let modifiedContent = content.replace(
+        /(import.*?from.*?['"]react['"];?)/,
+        `$1\n${importStatement}`
+      );
+      
+      if (!modifiedContent.includes(importStatement)) {
+        modifiedContent = `${importStatement}\n\n${modifiedContent}`;
+      }
+      
+      // Wrap the root render with HumanBehaviorProvider
+      modifiedContent = modifiedContent.replace(
+        /(root\.render\s*\([\s\S]*?\)\s*;)/,
+        `root.render(
+    <HumanBehaviorProvider apiKey={${envVar}}>
+      $1
+    </HumanBehaviorProvider>
+  );`
+      );
+      
+      return modifiedContent;
     }
 
+    // Fallback: simple injection
     return `${importStatement}\n\n${content}`;
   }
 
@@ -863,29 +1152,69 @@ export default function App()`
     }
 
     const importStatement = `import { HumanBehaviorPlugin } from 'humanbehavior-js/vue';`;
-    const pluginUsage = `app.use(HumanBehaviorPlugin, {
+    
+    // Enhanced Vue 3 support with version detection
+    const hasVue3 = this.framework?.features?.hasVue3;
+    
+    if (hasVue3) {
+      // Vue 3 with Composition API
+      const pluginUsage = `app.use(HumanBehaviorPlugin, {
   apiKey: import.meta.env.VITE_HUMANBEHAVIOR_API_KEY
 });`;
 
-    // Handle both Vue 2 and Vue 3 patterns
-    if (content.includes('createApp')) {
-      // Vue 3
-      return content.replace(
-        /import.*from.*['"]vue['"]/,
-        `$&\n${importStatement}`
-      ).replace(
-        /app\.mount\(/,
-        `${pluginUsage}\n\napp.mount(`
-      );
+      let modifiedContent = content;
+      
+      // Add import statement
+      if (!content.includes(importStatement)) {
+        modifiedContent = content.replace(
+          /(import.*?from.*?['"]vue['"];?)/,
+          `$1\n${importStatement}`
+        );
+        
+        // If no Vue import found, add it at the top
+        if (!modifiedContent.includes(importStatement)) {
+          modifiedContent = `${importStatement}\n\n${modifiedContent}`;
+        }
+      }
+      
+      // Handle createApp pattern
+      if (content.includes('createApp')) {
+        modifiedContent = modifiedContent.replace(
+          /(app\.mount\(.*?\))/,
+          `${pluginUsage}\n\n$1`
+        );
+      }
+      
+      return modifiedContent;
     } else {
-      // Vue 2
-      return content.replace(
-        /import.*from.*['"]vue['"]/,
-        `$&\n${importStatement}`
-      ).replace(
-        /new Vue\(/,
-        `${pluginUsage}\n\nnew Vue(`
-      );
+      // Vue 2 with Options API
+      const pluginUsage = `Vue.use(HumanBehaviorPlugin, {
+  apiKey: process.env.VUE_APP_HUMANBEHAVIOR_API_KEY
+});`;
+
+      let modifiedContent = content;
+      
+      // Add import statement
+      if (!content.includes(importStatement)) {
+        modifiedContent = content.replace(
+          /(import.*?from.*?['"]vue['"];?)/,
+          `$1\n${importStatement}`
+        );
+        
+        if (!modifiedContent.includes(importStatement)) {
+          modifiedContent = `${importStatement}\n\n${modifiedContent}`;
+        }
+      }
+      
+      // Handle new Vue pattern
+      if (content.includes('new Vue')) {
+        modifiedContent = modifiedContent.replace(
+          /(new Vue\(.*?\))/,
+          `${pluginUsage}\n\n$1`
+        );
+      }
+      
+      return modifiedContent;
     }
   }
 
@@ -1012,23 +1341,125 @@ if (typeof window !== 'undefined') {
     );
   }
 
+  /**
+   * Inject Astro layout with HumanBehavior component
+   */
+  private injectAstroLayout(content: string): string {
+    // Check if HumanBehavior component is already imported
+    if (content.includes('HumanBehavior') || content.includes('humanbehavior-js')) {
+      return content; // Already has HumanBehavior
+    }
+
+    // Add import inside frontmatter if not present
+    let modifiedContent = content;
+    if (!content.includes('import HumanBehavior')) {
+      const importStatement = 'import HumanBehavior from \'../components/HumanBehavior.astro\';';
+      const frontmatterEndIndex = content.indexOf('---', 3);
+      if (frontmatterEndIndex !== -1) {
+        // Insert import inside frontmatter, before the closing ---
+        modifiedContent = content.slice(0, frontmatterEndIndex) + '\n' + importStatement + '\n' + content.slice(frontmatterEndIndex);
+      } else {
+        // No frontmatter, add at the very beginning
+        modifiedContent = '---\n' + importStatement + '\n---\n\n' + content;
+      }
+    }
+
+    // Find the closing </body> tag and add HumanBehavior component before it
+    const bodyCloseIndex = modifiedContent.lastIndexOf('</body>');
+    if (bodyCloseIndex === -1) {
+      // No body tag found, append to end
+      return modifiedContent + '\n\n<HumanBehavior />';
+    }
+
+    // Add component before closing body tag
+    return modifiedContent.slice(0, bodyCloseIndex) + '  <HumanBehavior />\n' + modifiedContent.slice(bodyCloseIndex);
+  }
+
   private injectNuxtConfig(content: string): string {
     if (content.includes('humanBehaviorApiKey')) {
       return content;
     }
 
-    // Add runtime config by inserting it after the opening brace
-    return content.replace(
-      /export default defineNuxtConfig\(\{/,
-      `export default defineNuxtConfig({
+    // Enhanced Nuxt 3 support with version detection
+    const hasNuxt3 = this.framework?.features?.hasNuxt3;
+    
+    if (hasNuxt3) {
+      // Nuxt 3 with runtime config
+      return content.replace(
+        /export default defineNuxtConfig\(\{/,
+        `export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       humanBehaviorApiKey: process.env.NUXT_PUBLIC_HUMANBEHAVIOR_API_KEY
     }
   },`
+      );
+    } else {
+      // Nuxt 2 with env config
+      return content.replace(
+        /export default \{/,
+        `export default {
+  env: {
+    humanBehaviorApiKey: process.env.HUMANBEHAVIOR_API_KEY
+  },`
+      );
+    }
+  }
+
+  private injectGatsbyLayout(content: string): string {
+    if (content.includes('HumanBehavior')) {
+      return content;
+    }
+
+    const importStatement = `import HumanBehavior from './HumanBehavior';`;
+    const componentUsage = `<HumanBehavior apiKey={process.env.GATSBY_HUMANBEHAVIOR_API_KEY || ''} />`;
+
+    // Add import at the top
+    let modifiedContent = content.replace(
+      /import.*from.*['"]\./,
+      `${importStatement}\n$&`
+    );
+
+    // Add component before closing body tag
+    modifiedContent = modifiedContent.replace(
+      /(\s*<\/body>)/,
+      `\n      ${componentUsage}\n$1`
     );
+
+    return modifiedContent;
   }
 
+  private injectGatsbyBrowser(content: string): string {
+    if (content.includes('HumanBehaviorTracker')) {
+      return content;
+    }
+
+    const importStatement = `import { HumanBehaviorTracker } from 'humanbehavior-js';`;
+    const initCode = `
+// Initialize HumanBehavior SDK
+export const onClientEntry = () => {
+  console.log('Gatsby browser entry point loaded');
+  const apiKey = process.env.GATSBY_HUMANBEHAVIOR_API_KEY;
+  console.log('API Key found:', apiKey ? 'Yes' : 'No');
+  if (apiKey) {
+    const tracker = HumanBehaviorTracker.init(apiKey);
+    console.log('HumanBehavior SDK initialized for Gatsby');
+  } else {
+    console.log('No API key found in environment variables');
+  }
+};`;
+
+    // If the file already has content, add the import and init code
+    if (content.trim()) {
+      return `${importStatement}${initCode}\n\n${content}`;
+    } else {
+      // If file is empty, just return the new content
+      return `${importStatement}${initCode}`;
+    }
+  }
+
+
+
   /**
    * Helper method to find the best environment file for a framework
    */
@@ -1052,16 +1483,18 @@ if (typeof window !== 'undefined') {
       
       // Framework-specific mappings
       const envVarNames = {
-        react: 'HUMANBEHAVIOR_API_KEY',
-        nextjs: 'NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY',
-        vue: 'VITE_HUMANBEHAVIOR_API_KEY',
-        svelte: 'PUBLIC_HUMANBEHAVIOR_API_KEY',
-        angular: 'HUMANBEHAVIOR_API_KEY',
-        nuxt: 'NUXT_PUBLIC_HUMANBEHAVIOR_API_KEY',
-        remix: 'HUMANBEHAVIOR_API_KEY',
-        vanilla: 'HUMANBEHAVIOR_API_KEY',
-        node: 'HUMANBEHAVIOR_API_KEY',
-        auto: 'HUMANBEHAVIOR_API_KEY'
+              react: 'HUMANBEHAVIOR_API_KEY',
+      nextjs: 'NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY',
+      vue: 'VITE_HUMANBEHAVIOR_API_KEY',
+      svelte: 'PUBLIC_HUMANBEHAVIOR_API_KEY',
+      angular: 'HUMANBEHAVIOR_API_KEY',
+      nuxt: 'NUXT_PUBLIC_HUMANBEHAVIOR_API_KEY',
+      remix: 'HUMANBEHAVIOR_API_KEY',
+      vanilla: 'HUMANBEHAVIOR_API_KEY',
+      astro: 'PUBLIC_HUMANBEHAVIOR_API_KEY',
+      gatsby: 'GATSBY_HUMANBEHAVIOR_API_KEY',
+      node: 'HUMANBEHAVIOR_API_KEY',
+      auto: 'HUMANBEHAVIOR_API_KEY'
       };
       
       return envVarNames[framework.type] || 'HUMANBEHAVIOR_API_KEY';
@@ -1087,6 +1520,8 @@ if (typeof window !== 'undefined') {
       nuxt: '.env',
       remix: '.env.local',
       vanilla: '.env',
+      astro: '.env',
+      gatsby: '.env.development',
       node: '.env',
       auto: '.env'
     };
@@ -1104,6 +1539,9 @@ if (typeof window !== 'undefined') {
   private createEnvironmentModification(framework: FrameworkInfo): CodeModification {
     const { filePath, envVarName } = this.findBestEnvFile(framework);
 
+    // Clean the API key to prevent formatting issues
+    const cleanApiKey = this.apiKey.trim();
+
     if (fs.existsSync(filePath)) {
       // Check if the variable already exists
       const content = fs.readFileSync(filePath, 'utf8');
@@ -1120,7 +1558,7 @@ if (typeof window !== 'undefined') {
         return {
           filePath,
           action: 'append',
-          content: `\n${envVarName}=${this.apiKey}`,
+          content: `\n${envVarName}=${cleanApiKey}`,
           description: `Added API key to existing ${path.basename(filePath)}`
         };
       }
@@ -1129,7 +1567,7 @@ if (typeof window !== 'undefined') {
       return {
         filePath,
         action: 'create',
-        content: `${envVarName}=${this.apiKey}`,
+        content: `${envVarName}=${cleanApiKey}`,
         description: `Created ${path.basename(filePath)} with API key`
       };
     }