humanbehavior-js 0.5.25 → 0.5.27

package/packages/wizard/dist/cli/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',
@@ -1328,417 +1361,6 @@ export const onClientEntry = () => {
     }
 }
 
-/**
- * Remote AI Service Implementation
- *
- * This connects to your deployed Lambda function via API Gateway
- */
-class RemoteAIService {
-    constructor(config) {
-        this.config = {
-            timeout: 10000, // 10 seconds
-            ...config
-        };
-    }
-    /**
-     * Analyze code patterns using your deployed AI service
-     */
-    async analyzeCodePatterns(codeSamples) {
-        try {
-            const response = await fetch(`${this.config.apiEndpoint}/analyze`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ codeSamples }),
-                signal: AbortSignal.timeout(this.config.timeout || 10000)
-            });
-            if (!response.ok) {
-                throw new Error(`AI service returned ${response.status}: ${response.statusText}`);
-            }
-            const result = await response.json();
-            return result.analysis;
-        }
-        catch (error) {
-            console.warn('Remote AI service failed, falling back to heuristic analysis:', error);
-            return this.performHeuristicAnalysis(codeSamples);
-        }
-    }
-    /**
-     * Resolve conflicts using your deployed AI service
-     */
-    async resolveConflicts(conflicts, framework) {
-        try {
-            const response = await fetch(`${this.config.apiEndpoint}/resolve-conflicts`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ conflicts, framework }),
-                signal: AbortSignal.timeout(this.config.timeout || 10000)
-            });
-            if (!response.ok) {
-                throw new Error(`AI service returned ${response.status}: ${response.statusText}`);
-            }
-            const result = await response.json();
-            return result.resolutions || [];
-        }
-        catch (error) {
-            console.warn('Remote AI conflict resolution failed, using heuristic approach:', error);
-            return this.resolveConflictsHeuristic(conflicts, framework);
-        }
-    }
-    /**
-     * Generate optimizations using your deployed AI service
-     */
-    async generateOptimizations(framework, patterns) {
-        try {
-            const response = await fetch(`${this.config.apiEndpoint}/optimize`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ framework, patterns }),
-                signal: AbortSignal.timeout(this.config.timeout || 10000)
-            });
-            if (!response.ok) {
-                throw new Error(`AI service returned ${response.status}: ${response.statusText}`);
-            }
-            const result = await response.json();
-            return result.optimizations || [];
-        }
-        catch (error) {
-            console.warn('Remote AI optimization generation failed, using heuristic approach:', error);
-            return this.generateOptimizationsHeuristic(framework, patterns);
-        }
-    }
-    /**
-     * Heuristic analysis fallback
-     */
-    performHeuristicAnalysis(codeSamples) {
-        const patterns = codeSamples.join(' ').toLowerCase();
-        // Framework detection
-        let framework = { name: 'vanilla', type: 'vanilla' };
-        let confidence = 0.5;
-        if (patterns.includes('nuxt') || patterns.includes('nuxtjs') || patterns.includes('defineNuxtConfig') || patterns.includes('nuxt.config') || patterns.includes('@nuxt/') || patterns.includes('useNuxtApp') || patterns.includes('useRuntimeConfig') || patterns.includes('useSeoMeta') || patterns.includes('useHead') || patterns.includes('useLazyFetch') || patterns.includes('useFetch') || patterns.includes('useAsyncData') || patterns.includes('#app')) {
-            framework = { name: 'nuxt', type: 'nuxt' };
-            confidence = 0.95;
-        }
-        else if (patterns.includes('next') || patterns.includes('nextjs') || patterns.includes('next/link') || patterns.includes('next/image') || patterns.includes('next/navigation') || patterns.includes('next/router') || patterns.includes('getserverSideProps') || patterns.includes('getstaticProps') || patterns.includes('getstaticPaths') || patterns.includes('app/layout') || patterns.includes('app/page') || patterns.includes('pages/')) {
-            framework = { name: 'nextjs', type: 'nextjs' };
-            confidence = 0.95;
-        }
-        else if (patterns.includes('gatsby') || patterns.includes('gatsby-browser') || patterns.includes('gatsby-ssr') || patterns.includes('gatsby-node') || patterns.includes('gatsby-config') || patterns.includes('useStaticQuery') || patterns.includes('graphql')) {
-            framework = { name: 'gatsby', type: 'gatsby' };
-            confidence = 0.95;
-        }
-        else if (patterns.includes('react')) {
-            framework = { name: 'react', type: 'react' };
-            confidence = 0.9;
-        }
-        else if (patterns.includes('vue')) {
-            framework = { name: 'vue', type: 'vue' };
-            confidence = 0.9;
-        }
-        else if (patterns.includes('angular')) {
-            framework = { name: 'angular', type: 'angular' };
-            confidence = 0.9;
-        }
-        else if (patterns.includes('svelte')) {
-            framework = { name: 'svelte', type: 'svelte' };
-            confidence = 0.9;
-        }
-        else if (patterns.includes('astro')) {
-            framework = { name: 'astro', type: 'astro' };
-            confidence = 0.9;
-        }
-        // Integration strategy
-        let integrationStrategy = 'script';
-        if (framework.type === 'react' || framework.type === 'nextjs' || framework.type === 'gatsby') {
-            integrationStrategy = 'provider';
-        }
-        else if (framework.type === 'vue') {
-            integrationStrategy = 'plugin';
-        }
-        else if (framework.type === 'angular') {
-            integrationStrategy = 'module';
-        }
-        // Compatibility mode
-        let compatibilityMode = 'modern';
-        if (patterns.includes('require(') || patterns.includes('var ')) {
-            compatibilityMode = 'legacy';
-        }
-        return {
-            framework,
-            confidence,
-            patterns: codeSamples,
-            conflicts: [],
-            recommendations: [],
-            integrationStrategy,
-            compatibilityMode
-        };
-    }
-    /**
-     * Heuristic conflict resolution
-     */
-    resolveConflictsHeuristic(conflicts, framework) {
-        const resolutions = [];
-        for (const conflict of conflicts) {
-            switch (conflict) {
-                case 'existing_humanbehavior_code':
-                    resolutions.push('update_existing_integration');
-                    break;
-                case 'existing_provider':
-                    resolutions.push('merge_providers');
-                    break;
-                case 'module_system_conflict':
-                    resolutions.push('hybrid_module_support');
-                    break;
-                default:
-                    resolutions.push('skip_conflict');
-            }
-        }
-        return resolutions;
-    }
-    /**
-     * Heuristic optimization generation
-     */
-    generateOptimizationsHeuristic(framework, patterns) {
-        const optimizations = [];
-        switch (framework.type) {
-            case 'react':
-                optimizations.push('Use React.memo for performance optimization');
-                optimizations.push('Implement error boundaries for better error tracking');
-                optimizations.push('Consider using React.lazy for code splitting');
-                break;
-            case 'vue':
-                optimizations.push('Use Vue 3 Composition API for better performance');
-                optimizations.push('Implement proper error handling in components');
-                optimizations.push('Consider using Vue Router for navigation tracking');
-                break;
-            case 'angular':
-                optimizations.push('Use Angular standalone components for better tree-shaking');
-                optimizations.push('Implement proper error handling with ErrorHandler');
-                optimizations.push('Consider using Angular signals for state management');
-                break;
-            default:
-                optimizations.push('Enable performance tracking');
-                optimizations.push('Implement error tracking');
-                optimizations.push('Consider progressive enhancement');
-        }
-        return optimizations;
-    }
-}
-
-/**
- * Manual Framework Installation Wizard
- *
- * This wizard allows users to manually specify their framework instead of auto-detection.
- * Useful when auto-detection fails or users want more control.
- */
-class ManualFrameworkInstallationWizard extends AutoInstallationWizard {
-    constructor(apiKey, projectRoot = process.cwd(), framework) {
-        super(apiKey, projectRoot);
-        this.selectedFramework = framework.toLowerCase();
-        this.framework = this.createFrameworkInfo(this.selectedFramework);
-    }
-    /**
-     * Manual installation with user-specified framework
-     */
-    async install() {
-        try {
-            // Step 1: Handle framework selection
-            if (this.selectedFramework === 'auto') {
-                // Use full AI detection for "Other" option
-                this.framework = await this.runFullDetection();
-            }
-            else {
-                // Set framework based on user selection
-                this.framework = this.createFrameworkInfo(this.selectedFramework);
-                if (!this.framework) {
-                    this.framework = { name: 'unknown', type: 'vanilla' };
-                }
-                // Step 2: Run full detection logic to find entry points, file names, etc.
-                const detectedFramework = await this.runFullDetection();
-                // Step 3: Merge manual framework with detected details
-                this.framework = {
-                    ...detectedFramework,
-                    name: this.framework.name,
-                    type: this.framework.type
-                };
-            }
-            // Step 4: Install package
-            await this.installPackage();
-            // Step 5: Generate and apply code modifications
-            const modifications = await this.generateModifications();
-            await this.applyModifications(modifications);
-            // Step 6: Generate next steps
-            const nextSteps = this.generateManualNextSteps();
-            return {
-                success: true,
-                framework: this.framework,
-                modifications,
-                errors: [],
-                nextSteps,
-                selectedFramework: this.selectedFramework,
-                manualMode: true
-            };
-        }
-        catch (error) {
-            return {
-                success: false,
-                framework: this.framework || { name: 'unknown', type: 'vanilla' },
-                modifications: [],
-                errors: [error instanceof Error ? error.message : 'Unknown error'],
-                nextSteps: [],
-                selectedFramework: this.selectedFramework,
-                manualMode: true
-            };
-        }
-    }
-    /**
-     * Run full detection logic to find entry points, file names, bundler, etc.
-     */
-    async runFullDetection() {
-        if (this.selectedFramework === 'auto') {
-            // Use AI service for auto-detection
-            const aiService = new RemoteAIService({
-                apiEndpoint: 'https://ik3zxh4790.execute-api.us-east-1.amazonaws.com/prod'
-            });
-            // Use AI service directly for detection
-            const projectFiles = await this.scanProjectFiles();
-            const codeSamples = await this.extractCodeSamples(projectFiles);
-            const aiAnalysis = await aiService.analyzeCodePatterns(codeSamples);
-            return aiAnalysis.framework;
-        }
-        else {
-            // Use traditional detection for manual frameworks
-            const tempWizard = new AutoInstallationWizard(this.apiKey, this.projectRoot);
-            const detected = await tempWizard.detectFramework();
-            return detected;
-        }
-    }
-    /**
-     * Scan project files for analysis
-     */
-    async scanProjectFiles() {
-        const files = [];
-        const scanDir = (dir, depth = 0) => {
-            if (depth > 3)
-                return; // Limit depth
-            try {
-                const items = fs.readdirSync(dir);
-                for (const item of items) {
-                    const fullPath = path.join(dir, item);
-                    const stat = fs.statSync(fullPath);
-                    if (stat.isDirectory() && !item.startsWith('.') && item !== 'node_modules') {
-                        scanDir(fullPath, depth + 1);
-                    }
-                    else if (stat.isFile() && this.isRelevantFile(item)) {
-                        files.push(fullPath);
-                    }
-                }
-            }
-            catch (error) {
-                // Skip inaccessible directories
-            }
-        };
-        scanDir(this.projectRoot);
-        return files;
-    }
-    /**
-     * Check if file is relevant for analysis
-     */
-    isRelevantFile(filename) {
-        const relevantExtensions = [
-            '.js', '.jsx', '.ts', '.tsx', '.vue', '.svelte', '.html',
-            '.json', '.config.js', '.config.ts', '.babelrc', '.eslintrc'
-        ];
-        const relevantNames = [
-            'package.json', 'tsconfig.json', 'vite.config', 'webpack.config',
-            'next.config', 'nuxt.config', 'angular.json', 'svelte.config'
-        ];
-        return relevantExtensions.some(ext => filename.endsWith(ext)) ||
-            relevantNames.some(name => filename.includes(name));
-    }
-    /**
-     * Extract code samples for AI analysis
-     */
-    async extractCodeSamples(files) {
-        const samples = [];
-        for (const file of files.slice(0, 20)) { // Limit to 20 files
-            try {
-                const content = fs.readFileSync(file, 'utf8');
-                const relativePath = path.relative(this.projectRoot, file);
-                samples.push(`File: ${relativePath}\n${content.substring(0, 1000)}`);
-            }
-            catch (error) {
-                // Skip unreadable files
-            }
-        }
-        return samples;
-    }
-    /**
-     * Create framework info based on user selection
-     */
-    createFrameworkInfo(framework) {
-        const frameworkMap = {
-            'react': { name: 'react', type: 'react' },
-            'nextjs': { name: 'nextjs', type: 'nextjs' },
-            'next': { name: 'nextjs', type: 'nextjs' },
-            'vue': { name: 'vue', type: 'vue' },
-            'nuxt': { name: 'nuxt', type: 'nuxt' },
-            'nuxtjs': { name: 'nuxt', type: 'nuxt' },
-            'angular': { name: 'angular', type: 'angular' },
-            'svelte': { name: 'svelte', type: 'svelte' },
-            'sveltekit': { name: 'svelte', type: 'svelte' },
-            'remix': { name: 'remix', type: 'remix' },
-            'astro': { name: 'astro', type: 'astro' },
-            'gatsby': { name: 'gatsby', type: 'gatsby' },
-            'vanilla': { name: 'vanilla', type: 'vanilla' },
-            'node': { name: 'node', type: 'node' },
-            'auto': { name: 'auto-detected', type: 'auto' }
-        };
-        return frameworkMap[framework] || { name: framework, type: 'vanilla' };
-    }
-    /**
-     * Override framework detection to use manual selection
-     */
-    async detectFramework() {
-        return this.framework || { name: 'unknown', type: 'vanilla' };
-    }
-    /**
-     * Generate next steps with manual mode info
-     */
-    generateManualNextSteps() {
-        return [
-            '✅ Manual framework installation completed!',
-            `🎯 Selected framework: ${this.framework?.name || 'unknown'}`,
-            `🔧 Integration strategy: ${this.getIntegrationStrategy()}`,
-            '🚀 Your app is now ready to track user behavior',
-            '📊 View sessions in your HumanBehavior dashboard'
-        ];
-    }
-    /**
-     * Get integration strategy based on framework
-     */
-    getIntegrationStrategy() {
-        if (!this.framework?.type)
-            return 'script';
-        switch (this.framework.type) {
-            case 'react':
-            case 'nextjs':
-                return 'provider';
-            case 'vue':
-                return 'plugin';
-            case 'angular':
-                return 'module';
-            default:
-                return 'script';
-        }
-    }
-}
-
 /**
  * HumanBehavior SDK Auto-Installation CLI
  *
@@ -1762,15 +1384,9 @@ class AutoInstallCLI {
             }
             // Get project path
             const projectPath = this.options.projectPath || process.cwd();
-            // Choose framework
-            const framework = await this.chooseFramework();
-            if (!framework) {
-                clack.cancel('Installation cancelled.');
-                process.exit(0);
-            }
             // Confirm installation
             if (!this.options.yes) {
-                const confirmed = await this.confirmInstallation(projectPath, framework);
+                const confirmed = await this.confirmInstallation(projectPath);
                 if (!confirmed) {
                     clack.cancel('Installation cancelled.');
                     process.exit(0);
@@ -1778,10 +1394,10 @@ class AutoInstallCLI {
             }
             // Run installation
             const spinner = clack.spinner();
-            spinner.start('🔍 Analyzing your project...');
-            const wizard = new ManualFrameworkInstallationWizard(apiKey, projectPath, framework);
+            spinner.start('🔍 Detecting framework and applying integration...');
+            const wizard = new AutoInstallationWizard(apiKey, projectPath);
             const result = await wizard.install();
-            spinner.stop('Detection complete!');
+            spinner.stop('Installation complete!');
             // Display results
             this.displayResults(result);
         }
@@ -1807,27 +1423,10 @@ class AutoInstallCLI {
         });
         return apiKey;
     }
-    async chooseFramework() {
-        const framework = await clack.select({
-            message: 'Select your framework:',
-            options: [
-                { label: 'React', value: 'react' },
-                { label: 'Next.js', value: 'nextjs' },
-                { label: 'Vue', value: 'vue' },
-                { label: 'Angular', value: 'angular' },
-                { label: 'Svelte', value: 'svelte' },
-                { label: 'Nuxt.js', value: 'nuxt' },
-                { label: 'Remix', value: 'remix' },
-                { label: 'Astro', value: 'astro' },
-                { label: 'Gatsby', value: 'gatsby' },
-                { label: 'Vanilla JS/TS', value: 'vanilla' }
-            ]
-        });
-        return framework;
-    }
-    async confirmInstallation(projectPath, framework) {
+    // Framework selection no longer needed; AutoInstallationWizard auto-detects
+    async confirmInstallation(projectPath) {
         const confirmed = await clack.confirm({
-            message: `Ready to install HumanBehavior SDK in ${projectPath} for ${framework}?`
+            message: `Ready to install HumanBehavior SDK in ${projectPath}?`
         });
         return confirmed;
     }
@@ -1905,8 +1504,10 @@ Examples:
   npx humanbehavior-js auto-install --project ./my-app --yes
 `);
 }
-// Main execution
-if (import.meta.url === `file://${process.argv[1]}`) {
+// Main execution (CommonJS compatible)
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const isMain = typeof require !== 'undefined' && require.main === module;
+if (isMain) {
     const options = parseArgs();
     const cli = new AutoInstallCLI(options);
     cli.run().catch((error) => {