humanbehavior-js 0.5.25 → 0.5.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "humanbehavior-js",
-  "version": "0.5.25",
+  "version": "0.5.26",
   "description": "SDK for HumanBehavior session and event recording",
   "private": false,
   "packageManager": "npm@10.0.0",
@@ -122,6 +122,6 @@
     "access": "public"
   },
   "bin": {
-    "humanbehavior-js": "packages/wizard/dist/cli/ai-auto-install.js"
+    "humanbehavior-js": "packages/wizard/dist/cli/auto-install.js"
   }
 }

package/packages/wizard/dist/cli/ai-auto-install.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 import * as fs from 'fs';
 import * as path from 'path';
+import { execSync } from 'child_process';
 import * as clack from '@clack/prompts';
 
 /**
@@ -12,6 +13,7 @@ import * as clack from '@clack/prompts';
 class AutoInstallationWizard {
     constructor(apiKey, projectRoot = process.cwd()) {
         this.framework = null;
+        this.manualNotes = [];
         this.apiKey = apiKey;
         this.projectRoot = projectRoot;
     }
@@ -257,7 +259,6 @@ class AutoInstallationWizard {
      * Install the SDK package with latest version range
      */
     async installPackage() {
-        const { execSync } = await import('child_process');
         // Build base command with latest version range
         let command = this.framework?.packageManager === 'yarn'
             ? 'yarn add humanbehavior-js@latest'
@@ -415,34 +416,9 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
 <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');
+    HumanBehaviorTracker.init(apiKey);
   }
 </script>`;
         modifications.push({
@@ -492,21 +468,10 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
 export default defineNuxtPlugin(() => {
   const config = useRuntimeConfig();
-  
-  // Initialize HumanBehavior SDK (client-side only)
   if (typeof window !== 'undefined') {
     const apiKey = config.public.humanBehaviorApiKey;
-    console.log('HumanBehavior: API key:', apiKey ? 'present' : 'missing');
-    
     if (apiKey) {
-      try {
-        const tracker = HumanBehaviorTracker.init(apiKey);
-        console.log('HumanBehavior: Tracker initialized successfully');
-      } catch (error) {
-        console.error('HumanBehavior: Failed to initialize tracker:', error);
-      }
-    } else {
-      console.error('HumanBehavior: No API key found in runtime config');
+      HumanBehaviorTracker.init(apiKey);
     }
   }
 });`,
@@ -514,15 +479,10 @@ export default defineNuxtPlugin(() => {
         });
         // Create environment configuration
         const nuxtConfigFile = path.join(this.projectRoot, 'nuxt.config.ts');
-        if (fs.existsSync(nuxtConfigFile)) {
-            const content = fs.readFileSync(nuxtConfigFile, 'utf8');
-            const modifiedContent = this.injectNuxtConfig(content);
-            modifications.push({
-                filePath: nuxtConfigFile,
-                action: 'modify',
-                content: modifiedContent,
-                description: 'Added HumanBehavior runtime config to Nuxt config'
-            });
+        {
+            const mod = this.applyOrNotify(nuxtConfigFile, (c) => this.injectNuxtConfig(c), 'Added HumanBehavior runtime config to Nuxt config', 'Nuxt: Add inside defineNuxtConfig({ … }):\nruntimeConfig: { public: { humanBehaviorApiKey: process.env.NUXT_PUBLIC_HUMANBEHAVIOR_API_KEY } },');
+            if (mod)
+                modifications.push(mod);
         }
         // Create or append to environment file
         modifications.push(this.createEnvironmentModification(this.framework));
@@ -556,6 +516,37 @@ export default defineNuxtPlugin(() => {
         const modifications = [];
         // Find main.js or main.ts
         const mainFile = this.findVueMainFile();
+        // Create Vue composable per docs (idempotent)
+        const composableDir = path.join(this.projectRoot, 'src', 'composables');
+        const composablePath = path.join(composableDir, 'useHumanBehavior.ts');
+        const composableContent = `import { HumanBehaviorTracker } from 'humanbehavior-js'
+
+export function useHumanBehavior() {
+  const apiKey = import.meta.env.VITE_HUMANBEHAVIOR_API_KEY
+  
+  if (apiKey) {
+    const tracker = HumanBehaviorTracker.init(apiKey);
+    
+    return { tracker }
+  }
+  
+  return { tracker: null }
+}
+`;
+        try {
+            if (!fs.existsSync(composableDir)) {
+                fs.mkdirSync(composableDir, { recursive: true });
+            }
+            if (!fs.existsSync(composablePath)) {
+                modifications.push({
+                    filePath: composablePath,
+                    action: 'create',
+                    content: composableContent,
+                    description: 'Created Vue composable useHumanBehavior'
+                });
+            }
+        }
+        catch { }
         if (mainFile) {
             const content = fs.readFileSync(mainFile, 'utf8');
             const modifiedContent = this.injectVuePlugin(content);
@@ -575,33 +566,48 @@ export default defineNuxtPlugin(() => {
      */
     async generateAngularModifications() {
         const modifications = [];
-        // Check for modern Angular (standalone components) vs legacy (NgModule)
-        const appModuleFile = path.join(this.projectRoot, 'src', 'app', 'app.module.ts');
-        const appComponentFile = path.join(this.projectRoot, 'src', 'app', 'app.ts');
-        const mainFile = path.join(this.projectRoot, 'src', 'main.ts');
-        const isModernAngular = fs.existsSync(appComponentFile) && !fs.existsSync(appModuleFile);
-        if (isModernAngular) {
-            // Modern Angular 17+ with standalone components
-            if (fs.existsSync(mainFile)) {
-                const content = fs.readFileSync(mainFile, 'utf8');
-                const modifiedContent = this.injectAngularStandaloneInit(content);
-                modifications.push({
-                    filePath: mainFile,
-                    action: 'modify',
-                    content: modifiedContent,
-                    description: 'Added HumanBehavior initialization to Angular main.ts'
-                });
-            }
+        // Create Angular service (docs pattern)
+        const serviceDir = path.join(this.projectRoot, 'src', 'app', 'services');
+        const servicePath = path.join(serviceDir, 'hb.service.ts');
+        const serviceContent = `import { Injectable, NgZone, Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { HumanBehaviorTracker } from 'humanbehavior-js';
+import { environment } from '../../environments/environment';
+
+@Injectable({ providedIn: 'root' })
+export class HumanBehavior {
+  private tracker: ReturnType<typeof HumanBehaviorTracker.init> | null = null;
+
+  constructor(private ngZone: NgZone, @Inject(PLATFORM_ID) private platformId: Object) {
+    if (isPlatformBrowser(this.platformId)) {
+      this.ngZone.runOutsideAngular(() => {
+        this.tracker = HumanBehaviorTracker.init(environment.humanBehaviorApiKey);
+      });
+    }
+  }
+
+  capture(event: string, props?: Record<string, any>) {
+    this.tracker?.customEvent(event, props);
+  }
+
+  identify(user: Record<string, any>) {
+    this.tracker?.identifyUser({ userProperties: user });
+  }
+
+  trackPageView(path?: string) {
+    this.tracker?.trackPageView(path);
+  }
+}
+`;
+        if (!fs.existsSync(serviceDir)) {
+            fs.mkdirSync(serviceDir, { recursive: true });
         }
-        else if (fs.existsSync(appModuleFile)) {
-            // Legacy Angular with NgModule
-            const content = fs.readFileSync(appModuleFile, 'utf8');
-            const modifiedContent = this.injectAngularModule(content);
+        if (!fs.existsSync(servicePath)) {
             modifications.push({
-                filePath: appModuleFile,
-                action: 'modify',
-                content: modifiedContent,
-                description: 'Added HumanBehaviorModule to Angular app'
+                filePath: servicePath,
+                action: 'create',
+                content: serviceContent,
+                description: 'Created Angular HumanBehavior service (singleton)'
             });
         }
         // Handle Angular environment files (proper Angular way)
@@ -670,6 +676,26 @@ export default defineNuxtPlugin(() => {
         }
         // For Angular, we don't need .env files since we use environment.ts
         // The environment files are already created above
+        // Inject service into app component
+        const appComponentPath = path.join(this.projectRoot, 'src', 'app', 'app.ts');
+        if (fs.existsSync(appComponentPath)) {
+            const appContent = fs.readFileSync(appComponentPath, 'utf8');
+            // Check if already has HumanBehavior service
+            if (!appContent.includes('HumanBehavior')) {
+                let modifiedAppContent = appContent
+                    .replace(/import { Component } from '@angular\/core';/, `import { Component } from '@angular/core';
+import { HumanBehavior } from './services/hb.service';`)
+                    .replace(/export class App {/, `export class App {
+  constructor(private readonly humanBehavior: HumanBehavior) {}`);
+                // Do not modify standalone setting; leave component decorator unchanged
+                modifications.push({
+                    action: 'modify',
+                    filePath: appComponentPath,
+                    content: modifiedAppContent,
+                    description: 'Injected HumanBehavior service into Angular app component'
+                });
+            }
+        }
         return modifications;
     }
     /**
@@ -690,7 +716,7 @@ export default defineNuxtPlugin(() => {
                     filePath: layoutFile,
                     action: 'modify',
                     content: modifiedContent,
-                    description: 'Added HumanBehavior store to SvelteKit layout'
+                    description: 'Added HumanBehavior tracker init to SvelteKit layout'
                 });
             }
         }
@@ -704,7 +730,7 @@ export default defineNuxtPlugin(() => {
                     filePath: mainFile,
                     action: 'modify',
                     content: modifiedContent,
-                    description: 'Added HumanBehavior store to Svelte app'
+                    description: 'Added HumanBehavior tracker init to Svelte app'
                 });
             }
         }
@@ -758,14 +784,9 @@ export default defineNuxtPlugin(() => {
                 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');
+    HumanBehaviorTracker.init(apiKey);
   }
 };`,
                 description: 'Created gatsby-browser.js with HumanBehavior initialization'
@@ -815,8 +836,33 @@ export const onClientEntry = () => {
         if (this.framework?.type === 'react' || this.framework?.type === 'nextjs') {
             steps.push('💡 Use the useHumanBehavior() hook to track custom events');
         }
+        // Append any manual notes gathered during transformation
+        if (this.manualNotes.length) {
+            steps.push(...this.manualNotes.map((n) => `⚠️ ${n}`));
+        }
         return steps;
     }
+    /**
+     * Helper: apply a file transform or record a manual instruction if unchanged/missing
+     */
+    applyOrNotify(filePath, transform, description, manualNote) {
+        if (!fs.existsSync(filePath)) {
+            this.manualNotes.push(`${manualNote} (file missing: ${path.relative(this.projectRoot, filePath)})`);
+            return null;
+        }
+        const original = fs.readFileSync(filePath, 'utf8');
+        const updated = transform(original);
+        if (updated !== original) {
+            return {
+                filePath,
+                action: 'modify',
+                content: updated,
+                description
+            };
+        }
+        this.manualNotes.push(manualNote);
+        return null;
+    }
     // Helper methods for file detection and content injection
     findReactAppFile() {
         const possibleFiles = [
@@ -875,7 +921,7 @@ export const onClientEntry = () => {
         const isVite = this.framework?.bundler === 'vite';
         const envVar = isVite
             ? 'import.meta.env.VITE_HUMANBEHAVIOR_API_KEY!'
-            : 'process.env.HUMANBEHAVIOR_API_KEY!';
+            : 'process.env.REACT_APP_HUMANBEHAVIOR_API_KEY!';
         const importStatement = `import { HumanBehaviorProvider } from 'humanbehavior-js/react';`;
         // Enhanced parsing for React 18+ features
         const hasReact18 = this.framework?.features?.hasReact18;
@@ -888,7 +934,7 @@ export const onClientEntry = () => {
                 modifiedContent = `${importStatement}\n\n${modifiedContent}`;
             }
             // Wrap the App component return with HumanBehaviorProvider
-            modifiedContent = modifiedContent.replace(/(return\s*\([\s\S]*?\)\s*;)/, `return (
+            modifiedContent = modifiedContent.replace(/return\s*\(([\s\S]*?)\)\s*;/, `return (
     <HumanBehaviorProvider apiKey={${envVar}}>
       $1
     </HumanBehaviorProvider>
@@ -947,107 +993,89 @@ export const onClientEntry = () => {
         if (content.includes('HumanBehaviorProvider')) {
             return content;
         }
-        const importStatement = `import { HumanBehaviorProvider, createHumanBehaviorLoader } from 'humanbehavior-js/remix';`;
-        const useLoaderDataImport = `import { useLoaderData } from "@remix-run/react";`;
-        // Add imports more robustly
         let modifiedContent = content;
-        // Add HumanBehaviorProvider import - find the last import and add after it
+        // Step 1: Add useLoaderData import
+        if (!content.includes('useLoaderData')) {
+            modifiedContent = modifiedContent.replace(/(} from ['"]@remix-run\/react['"];?\s*)/, `$1import { useLoaderData } from '@remix-run/react';
+`);
+        }
+        // Step 2: Add HumanBehaviorProvider import
         if (!content.includes('HumanBehaviorProvider')) {
-            const lastImportIndex = modifiedContent.lastIndexOf('import');
-            if (lastImportIndex !== -1) {
-                const nextLineIndex = modifiedContent.indexOf('\n', lastImportIndex);
-                if (nextLineIndex !== -1) {
-                    modifiedContent = modifiedContent.slice(0, nextLineIndex + 1) +
-                        importStatement + '\n' +
-                        modifiedContent.slice(nextLineIndex + 1);
-                }
-                else {
-                    modifiedContent = modifiedContent + '\n' + importStatement;
-                }
-            }
-            else {
-                modifiedContent = importStatement + '\n' + modifiedContent;
-            }
+            modifiedContent = modifiedContent.replace(/(} from ['"]@remix-run\/react['"];?\s*)/, `$1import { HumanBehaviorProvider } from 'humanbehavior-js/react';
+`);
         }
-        // Add useLoaderData import - find the last import and add after it
-        if (!content.includes('useLoaderData')) {
-            const lastImportIndex = modifiedContent.lastIndexOf('import');
-            if (lastImportIndex !== -1) {
-                const nextLineIndex = modifiedContent.indexOf('\n', lastImportIndex);
-                if (nextLineIndex !== -1) {
-                    modifiedContent = modifiedContent.slice(0, nextLineIndex + 1) +
-                        useLoaderDataImport + '\n' +
-                        modifiedContent.slice(nextLineIndex + 1);
-                }
-                else {
-                    modifiedContent = modifiedContent + '\n' + useLoaderDataImport;
-                }
-            }
-            else {
-                modifiedContent = useLoaderDataImport + '\n' + modifiedContent;
-            }
+        // Step 3: Add LoaderFunctionArgs import
+        if (!content.includes('LoaderFunctionArgs')) {
+            modifiedContent = modifiedContent.replace(/(} from ['"]@remix-run\/node['"];?\s*)/, `$1import type { LoaderFunctionArgs } from '@remix-run/node';
+`);
         }
-        // Add loader function before the App component
+        // Step 4: Add loader function before Layout function
         if (!content.includes('export const loader')) {
-            modifiedContent = modifiedContent.replace(/export default function App\(\)/, `export const loader = createHumanBehaviorLoader();
+            modifiedContent = modifiedContent.replace(/(export function Layout)/, `export const loader = async ({ request }: LoaderFunctionArgs) => {
+  return {
+    ENV: {
+      HUMANBEHAVIOR_API_KEY: process.env.HUMANBEHAVIOR_API_KEY,
+    },
+  };
+};
 
-export default function App()`);
+$1`);
         }
-        // Wrap the App component content with HumanBehaviorProvider
-        modifiedContent = modifiedContent.replace(/export default function App\(\) \{[\s\S]*?return \(([\s\S]*?)\);[\s\S]*?\}/, `export default function App() {
-  const data = useLoaderData<typeof loader>();
+        // Step 5: Add useLoaderData call and wrap App function's return content with HumanBehaviorProvider
+        if (!content.includes('const data = useLoaderData')) {
+            modifiedContent = modifiedContent.replace(/(export default function App\(\) \{\s*)(return \(\s*<div[^>]*>[\s\S]*?<\/div>\s*\);\s*\})/, `$1const data = useLoaderData<typeof loader>();
   
   return (
     <HumanBehaviorProvider apiKey={data.ENV.HUMANBEHAVIOR_API_KEY}>
-      $1
+      <div className="min-h-screen bg-gray-50">
+        <Navigation />
+        <Outlet />
+      </div>
     </HumanBehaviorProvider>
   );
 }`);
+        }
         return modifiedContent;
     }
     injectVuePlugin(content) {
-        if (content.includes('HumanBehaviorPlugin')) {
+        // New: use composable/tracker pattern per docs; idempotent and migrates from plugin
+        if (content.includes('useHumanBehavior')) {
             return content;
         }
-        const importStatement = `import { HumanBehaviorPlugin } from 'humanbehavior-js/vue';`;
-        // 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
-});`;
-            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}`;
+        const isVue3ByContent = content.includes('createApp') || content.includes('import { createApp }');
+        let modifiedContent = content
+            .replace(/import\s*\{\s*HumanBehaviorPlugin\s*\}\s*from\s*['\"]humanbehavior-js\/vue['\"];?/g, '')
+            .replace(/app\.use\(\s*HumanBehaviorPlugin[\s\S]*?\);?/g, '');
+        if (hasVue3 || isVue3ByContent) {
+            const importComposable = `import { useHumanBehavior } from './composables/useHumanBehavior';`;
+            if (!modifiedContent.includes(importComposable)) {
+                const lastImportIndex = modifiedContent.lastIndexOf('import');
+                if (lastImportIndex !== -1) {
+                    const nextLineIndex = modifiedContent.indexOf('\n', lastImportIndex);
+                    if (nextLineIndex !== -1) {
+                        modifiedContent = modifiedContent.slice(0, nextLineIndex + 1) + importComposable + '\n' + modifiedContent.slice(nextLineIndex + 1);
+                    }
+                    else {
+                        modifiedContent = modifiedContent + '\n' + importComposable;
+                    }
+                }
+                else {
+                    modifiedContent = importComposable + '\n' + modifiedContent;
                 }
             }
-            // Handle createApp pattern
-            if (content.includes('createApp')) {
-                modifiedContent = modifiedContent.replace(/(app\.mount\(.*?\))/, `${pluginUsage}\n\n$1`);
+            if (modifiedContent.includes('createApp')) {
+                modifiedContent = modifiedContent.replace(/(const\s+app\s*=\s*createApp\([^)]*\))/, `$1\nconst { tracker } = useHumanBehavior();`);
             }
             return modifiedContent;
         }
         else {
-            // 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}`;
-                }
+            const trackerImport = `import { HumanBehaviorTracker } from 'humanbehavior-js';`;
+            if (!modifiedContent.includes(trackerImport)) {
+                modifiedContent = `${trackerImport}\n${modifiedContent}`;
             }
-            // Handle new Vue pattern
-            if (content.includes('new Vue')) {
-                modifiedContent = modifiedContent.replace(/(new Vue\(.*?\))/, `${pluginUsage}\n\n$1`);
+            if (modifiedContent.includes('new Vue')) {
+                modifiedContent = modifiedContent.replace(/(new\s+Vue\s*\()/, `HumanBehaviorTracker.init(process.env.VUE_APP_HUMANBEHAVIOR_API_KEY || import.meta?.env?.VITE_HUMANBEHAVIOR_API_KEY);\n$1`);
             }
             return modifiedContent;
         }
@@ -1088,33 +1116,31 @@ if (typeof window !== 'undefined') {
         return modifiedContent;
     }
     injectSvelteStore(content) {
-        if (content.includes('humanBehaviorStore')) {
+        // Direct tracker init for non-SSR Svelte
+        if (content.includes('HumanBehaviorTracker.init')) {
             return content;
         }
-        const importStatement = `import { humanBehaviorStore } from 'humanbehavior-js/svelte';`;
-        const initCode = `humanBehaviorStore.init(process.env.PUBLIC_HUMANBEHAVIOR_API_KEY || '');`;
+        const importStatement = `import { HumanBehaviorTracker } from 'humanbehavior-js';`;
+        const initCode = `// Initialize HumanBehavior SDK\nHumanBehaviorTracker.init(import.meta.env?.VITE_HUMANBEHAVIOR_API_KEY || process.env.PUBLIC_HUMANBEHAVIOR_API_KEY || '');`;
         return `${importStatement}\n${initCode}\n\n${content}`;
     }
     injectSvelteKitLayout(content) {
-        if (content.includes('humanBehaviorStore')) {
+        // Direct tracker init with browser guard for SvelteKit
+        if (content.includes('HumanBehaviorTracker.init')) {
             return content;
         }
-        const importStatement = `import { humanBehaviorStore } from 'humanbehavior-js/svelte';`;
         const envImport = `import { PUBLIC_HUMANBEHAVIOR_API_KEY } from '$env/static/public';`;
-        const initCode = `humanBehaviorStore.init(PUBLIC_HUMANBEHAVIOR_API_KEY || '');`;
-        // Add to script section - handle different script tag patterns
+        const hbImport = `import { HumanBehaviorTracker } from 'humanbehavior-js';`;
+        const browserImport = `import { browser } from '$app/environment';`;
+        const initCode = `if (browser) {\n  const apiKey = PUBLIC_HUMANBEHAVIOR_API_KEY || import.meta.env.VITE_HUMANBEHAVIOR_API_KEY;\n  if (apiKey) {\n    HumanBehaviorTracker.init(apiKey);\n  }\n}`;
         if (content.includes('<script lang="ts">')) {
-            return content.replace(/<script lang="ts">/, `<script lang="ts">\n\t${envImport}\n\t${importStatement}\n\t${initCode}`);
+            return content.replace(/<script lang="ts">/, `<script lang="ts">\n\t${browserImport}\n\t${envImport}\n\t${hbImport}\n\t${initCode}`);
         }
         else if (content.includes('<script>')) {
-            return content.replace(/<script>/, `<script>\n\t${envImport}\n\t${importStatement}\n\t${initCode}`);
-        }
-        else if (content.includes('<script context="module">')) {
-            return content.replace(/<script\s+context="module">/, `<script context="module">\n\t${envImport}\n\t${importStatement}\n\t${initCode}`);
+            return content.replace(/<script>/, `<script>\n\t${browserImport}\n\t${envImport}\n\t${hbImport}\n\t${initCode}`);
         }
         else {
-            // If no script tag found, add one at the beginning
-            return content.replace(/<svelte:head>/, `<script lang="ts">\n\t${envImport}\n\t${importStatement}\n\t${initCode}\n</script>\n\n<svelte:head>`);
+            return `<script lang="ts">\n${browserImport}\n${envImport}\n${hbImport}\n${initCode}\n</script>\n\n${content}`;
         }
     }
     injectVanillaScript(content) {
@@ -1167,13 +1193,25 @@ if (typeof window !== 'undefined') {
         // 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
-    }
-  },`);
+            // Nuxt 3 with runtime config (robust match for opening object)
+            const pattern = /export\s+default\s+defineNuxtConfig\s*\(\s*\{/;
+            if (pattern.test(content)) {
+                const replaced = content.replace(pattern, `export default defineNuxtConfig({\n  runtimeConfig: {\n    public: {\n      humanBehaviorApiKey: process.env.NUXT_PUBLIC_HUMANBEHAVIOR_API_KEY\n    }\n  },`);
+                if (replaced !== content)
+                    return replaced;
+            }
+            // Fallback: insert runtimeConfig after opening brace of defineNuxtConfig
+            const startIdx = content.indexOf('defineNuxtConfig(');
+            if (startIdx !== -1) {
+                const braceIdx = content.indexOf('{', startIdx);
+                if (braceIdx !== -1) {
+                    const insertion = `\n  runtimeConfig: {\n    public: {\n      humanBehaviorApiKey: process.env.NUXT_PUBLIC_HUMANBEHAVIOR_API_KEY\n    }\n  },`;
+                    const before = content.slice(0, braceIdx + 1);
+                    const after = content.slice(braceIdx + 1);
+                    return `${before}${insertion}${after}`;
+                }
+            }
+            return content;
         }
         else {
             // Nuxt 2 with env config
@@ -1196,31 +1234,26 @@ if (typeof window !== 'undefined') {
         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}`;
+        // If an onClientEntry already exists, merge init into it idempotently
+        if (/export\s+const\s+onClientEntry\s*=\s*\(/.test(content)) {
+            let modified = content;
+            // Ensure import exists
+            if (!modified.includes("from 'humanbehavior-js'")) {
+                modified = `${importStatement}\n${modified}`;
+            }
+            // If init already present, return as-is
+            if (modified.includes('HumanBehaviorTracker.init(')) {
+                return modified;
+            }
+            // Inject minimal init at start of onClientEntry body
+            modified = modified.replace(/(export\s+const\s+onClientEntry\s*=\s*\([^)]*\)\s*=>\s*\{)/, `$1\n  const apiKey = process.env.GATSBY_HUMANBEHAVIOR_API_KEY;\n  if (apiKey) {\n    HumanBehaviorTracker.init(apiKey);\n  }\n`);
+            return modified;
         }
+        // No existing onClientEntry: create minimal file content or prepend to existing
+        const block = `export const onClientEntry = () => {\n  const apiKey = process.env.GATSBY_HUMANBEHAVIOR_API_KEY;\n  if (apiKey) {\n    HumanBehaviorTracker.init(apiKey);\n  }\n};`;
+        const header = content.trim() ? `${importStatement}\n` : `${importStatement}\n`;
+        return `${header}${block}${content.trim() ? `\n\n${content}` : ''}`;
     }
     /**
      * Helper method to find the best environment file for a framework
@@ -1243,7 +1276,7 @@ export const onClientEntry = () => {
             }
             // Framework-specific mappings
             const envVarNames = {
-                react: 'HUMANBEHAVIOR_API_KEY',
+                react: 'REACT_APP_HUMANBEHAVIOR_API_KEY',
                 nextjs: 'NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY',
                 vue: 'VITE_HUMANBEHAVIOR_API_KEY',
                 svelte: 'PUBLIC_HUMANBEHAVIOR_API_KEY',