humanbehavior-js 0.4.13 → 0.4.15

package/dist/cjs/install-wizard.cjs

@@ -67,6 +67,28 @@ class AutoInstallationWizard {
         this.apiKey = apiKey;
         this.projectRoot = projectRoot;
     }
+    /**
+     * Simple version comparison utility
+     */
+    compareVersions(version1, version2) {
+        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;
+    }
+    isVersionGte(version, target) {
+        return this.compareVersions(version, target) >= 0;
+    }
+    getMajorVersion(version) {
+        return parseInt(version.split('.')[0]) || 0;
+    }
     /**
      * Main installation method - detects framework and auto-installs
      */
@@ -116,73 +138,146 @@ class AutoInstallationWizard {
             }
             const packageJson = JSON.parse(fs__namespace.readFileSync(packageJsonPath, 'utf8'));
             const dependencies = Object.assign(Object.assign({}, packageJson.dependencies), packageJson.devDependencies);
-            // Detect framework
+            // Detect framework with version information
             let framework = {
                 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: {}
                 };
             }
             // Detect bundler
@@ -216,13 +311,18 @@ class AutoInstallationWizard {
      */
     installPackage() {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const { execSync } = yield import('child_process');
-            const command = ((_a = this.framework) === null || _a === void 0 ? void 0 : _a.packageManager) === 'yarn'
+            // Build base command
+            let command = ((_a = this.framework) === null || _a === void 0 ? void 0 : _a.packageManager) === 'yarn'
                 ? 'yarn add humanbehavior-js'
                 : ((_b = this.framework) === null || _b === void 0 ? void 0 : _b.packageManager) === 'pnpm'
                     ? 'pnpm add humanbehavior-js'
                     : 'npm install humanbehavior-js';
+            // Add legacy peer deps flag for npm to handle dependency conflicts
+            if (((_c = this.framework) === null || _c === void 0 ? void 0 : _c.packageManager) !== 'yarn' && ((_d = this.framework) === null || _d === void 0 ? void 0 : _d.packageManager) !== 'pnpm') {
+                command += ' --legacy-peer-deps';
+            }
             try {
                 execSync(command, { cwd: this.projectRoot, stdio: 'inherit' });
             }
@@ -248,6 +348,12 @@ class AutoInstallationWizard {
                 case 'nuxt':
                     modifications.push(...yield this.generateNuxtModifications());
                     break;
+                case 'astro':
+                    modifications.push(...yield this.generateAstroModifications());
+                    break;
+                case 'gatsby':
+                    modifications.push(...yield this.generateGatsbyModifications());
+                    break;
                 case 'remix':
                     modifications.push(...yield this.generateRemixModifications());
                     break;
@@ -359,6 +465,84 @@ export function Providers({ children }: { children: React.ReactNode }) {
             return modifications;
         });
     }
+    /**
+     * Generate Astro-specific modifications
+     */
+    generateAstroModifications() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const modifications = [];
+            // Create Astro component for HumanBehavior
+            const astroComponentPath = path__namespace.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__namespace.join(this.projectRoot, 'src', 'layouts', 'Layout.astro'),
+                path__namespace.join(this.projectRoot, 'src', 'layouts', 'layout.astro'),
+                path__namespace.join(this.projectRoot, 'src', 'layouts', 'BaseLayout.astro')
+            ];
+            let layoutFile = null;
+            for (const file of layoutFiles) {
+                if (fs__namespace.existsSync(file)) {
+                    layoutFile = file;
+                    break;
+                }
+            }
+            if (layoutFile) {
+                const content = fs__namespace.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
      */
@@ -579,6 +763,50 @@ export default defineNuxtPlugin(() => {
             return modifications;
         });
     }
+    /**
+     * Generate Gatsby-specific modifications
+     */
+    generateGatsbyModifications() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const modifications = [];
+            // Modify or create gatsby-browser.js for Gatsby
+            const gatsbyBrowserFile = path__namespace.join(this.projectRoot, 'gatsby-browser.js');
+            if (fs__namespace.existsSync(gatsbyBrowserFile)) {
+                const content = fs__namespace.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
      */
@@ -673,7 +901,7 @@ export default defineNuxtPlugin(() => {
         return null;
     }
     injectReactProvider(content, filePath) {
-        var _a;
+        var _a, _b, _c;
         filePath.endsWith('.tsx') || filePath.endsWith('.ts');
         // Check if already has HumanBehaviorProvider
         if (content.includes('HumanBehaviorProvider')) {
@@ -685,14 +913,39 @@ export default defineNuxtPlugin(() => {
             ? 'import.meta.env.VITE_HUMANBEHAVIOR_API_KEY!'
             : 'process.env.HUMANBEHAVIOR_API_KEY!';
         const importStatement = `import { HumanBehaviorProvider } from 'humanbehavior-js/react';`;
-        // Simple injection - in production, you'd want more sophisticated parsing
+        // Enhanced parsing for React 18+ features
+        const hasReact18 = (_c = (_b = this.framework) === null || _b === void 0 ? void 0 : _b.features) === null || _c === void 0 ? void 0 : _c.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]*?)\);/, `return (
+            // 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}`;
     }
     injectNextJSAppRouter(content) {
@@ -789,21 +1042,51 @@ export default function App()`);
         return modifiedContent;
     }
     injectVuePlugin(content) {
+        var _a, _b;
         if (content.includes('HumanBehaviorPlugin')) {
             return content;
         }
         const importStatement = `import { HumanBehaviorPlugin } from 'humanbehavior-js/vue';`;
-        const pluginUsage = `app.use(HumanBehaviorPlugin, {
+        // Enhanced Vue 3 support with version detection
+        const hasVue3 = (_b = (_a = this.framework) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.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;
         }
     }
     injectAngularModule(content) {
@@ -884,17 +1167,99 @@ if (typeof window !== 'undefined') {
 </script>`;
         return content.replace(/<\/head>/, `  ${cdnScript}\n  ${initScript}\n</head>`);
     }
+    /**
+     * Inject Astro layout with HumanBehavior component
+     */
+    injectAstroLayout(content) {
+        // 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);
+    }
     injectNuxtConfig(content) {
+        var _a, _b;
         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 = (_b = (_a = this.framework) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.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
+  },`);
+        }
+    }
+    injectGatsbyLayout(content) {
+        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;
+    }
+    injectGatsbyBrowser(content) {
+        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
@@ -925,6 +1290,8 @@ if (typeof window !== 'undefined') {
                 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'
             };
@@ -948,6 +1315,8 @@ if (typeof window !== 'undefined') {
             nuxt: '.env',
             remix: '.env.local',
             vanilla: '.env',
+            astro: '.env',
+            gatsby: '.env.development',
             node: '.env',
             auto: '.env'
         };
@@ -962,6 +1331,8 @@ if (typeof window !== 'undefined') {
      */
     createEnvironmentModification(framework) {
         const { filePath, envVarName } = this.findBestEnvFile(framework);
+        // Clean the API key to prevent formatting issues
+        const cleanApiKey = this.apiKey.trim();
         if (fs__namespace.existsSync(filePath)) {
             // Check if the variable already exists
             const content = fs__namespace.readFileSync(filePath, 'utf8');
@@ -979,7 +1350,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__namespace.basename(filePath)}`
                 };
             }
@@ -989,7 +1360,7 @@ if (typeof window !== 'undefined') {
             return {
                 filePath,
                 action: 'create',
-                content: `${envVarName}=${this.apiKey}`,
+                content: `${envVarName}=${cleanApiKey}`,
                 description: `Created ${path__namespace.basename(filePath)} with API key`
             };
         }