humanbehavior-js 0.4.13 → 0.4.14

package/dist/esm/wizard/index.js

@@ -1,6 +1,6 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import * as readline from 'readline';
+import * as clack from '@clack/prompts';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -164,6 +164,24 @@ class AutoInstallationWizard {
                     projectRoot: this.projectRoot
                 };
             }
+            else if (dependencies.astro) {
+                framework = {
+                    name: 'astro',
+                    type: 'astro',
+                    hasTypeScript: !!dependencies.typescript || !!dependencies['@astrojs/ts-plugin'],
+                    hasRouter: true,
+                    projectRoot: this.projectRoot
+                };
+            }
+            else if (dependencies.gatsby) {
+                framework = {
+                    name: 'gatsby',
+                    type: 'gatsby',
+                    hasTypeScript: !!dependencies.typescript || !!dependencies['@types/react'],
+                    hasRouter: true,
+                    projectRoot: this.projectRoot
+                };
+            }
             // Detect bundler
             if (dependencies.vite) {
                 framework.bundler = 'vite';
@@ -195,13 +213,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' });
             }
@@ -227,6 +250,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;
@@ -338,6 +367,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.join(this.projectRoot, 'src', 'components', 'HumanBehavior.astro');
+            const astroComponentContent = `---
+// This component will only run on the client side
+---
+
+<script>
+  import { HumanBehaviorTracker } from 'humanbehavior-js';
+  
+  // Get API key from environment variable
+  const apiKey = import.meta.env.PUBLIC_HUMANBEHAVIOR_API_KEY;
+  
+  console.log('HumanBehavior: API key found:', apiKey ? 'Yes' : 'No');
+  
+  if (apiKey) {
+    try {
+      const tracker = HumanBehaviorTracker.init(apiKey);
+      console.log('HumanBehavior: Tracker initialized successfully');
+      
+      // Test event to verify tracking is working
+      setTimeout(() => {
+        tracker.customEvent('astro_page_view', {
+          page: window.location.pathname,
+          framework: 'astro'
+        }).then(() => {
+          console.log('HumanBehavior: Test event sent successfully');
+        }).catch((error) => {
+          console.error('HumanBehavior: Failed to send test event:', error);
+        });
+      }, 1000);
+      
+    } catch (error) {
+      console.error('HumanBehavior: Failed to initialize tracker:', error);
+    }
+  } else {
+    console.error('HumanBehavior: No API key found');
+  }
+</script>`;
+            modifications.push({
+                filePath: astroComponentPath,
+                action: 'create',
+                content: astroComponentContent,
+                description: 'Created Astro component for HumanBehavior SDK'
+            });
+            // Find and update layout file
+            const layoutFiles = [
+                path.join(this.projectRoot, 'src', 'layouts', 'Layout.astro'),
+                path.join(this.projectRoot, 'src', 'layouts', 'layout.astro'),
+                path.join(this.projectRoot, 'src', 'layouts', 'BaseLayout.astro')
+            ];
+            let layoutFile = null;
+            for (const file of layoutFiles) {
+                if (fs.existsSync(file)) {
+                    layoutFile = file;
+                    break;
+                }
+            }
+            if (layoutFile) {
+                const content = fs.readFileSync(layoutFile, 'utf8');
+                const modifiedContent = this.injectAstroLayout(content);
+                modifications.push({
+                    filePath: layoutFile,
+                    action: 'modify',
+                    content: modifiedContent,
+                    description: 'Added HumanBehavior component to Astro layout'
+                });
+            }
+            // Add environment variable
+            modifications.push(this.createEnvironmentModification(this.framework));
+            return modifications;
+        });
+    }
     /**
      * Generate Nuxt-specific modifications
      */
@@ -558,6 +665,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.join(this.projectRoot, 'gatsby-browser.js');
+            if (fs.existsSync(gatsbyBrowserFile)) {
+                const content = fs.readFileSync(gatsbyBrowserFile, 'utf8');
+                const modifiedContent = this.injectGatsbyBrowser(content);
+                modifications.push({
+                    filePath: gatsbyBrowserFile,
+                    action: 'modify',
+                    content: modifiedContent,
+                    description: 'Added HumanBehavior initialization to Gatsby browser'
+                });
+            }
+            else {
+                // Create gatsby-browser.js if it doesn't exist
+                modifications.push({
+                    filePath: gatsbyBrowserFile,
+                    action: 'create',
+                    content: `import { HumanBehaviorTracker } from 'humanbehavior-js';
+
+export const onClientEntry = () => {
+  console.log('Gatsby browser entry point loaded');
+  const apiKey = process.env.GATSBY_HUMANBEHAVIOR_API_KEY;
+  console.log('API Key found:', apiKey ? 'Yes' : 'No');
+  if (apiKey) {
+    const tracker = HumanBehaviorTracker.init(apiKey);
+    console.log('HumanBehavior SDK initialized for Gatsby');
+  } else {
+    console.log('No API key found in environment variables');
+  }
+};`,
+                    description: 'Created gatsby-browser.js with HumanBehavior initialization'
+                });
+            }
+            // Create or append to environment file
+            modifications.push(this.createEnvironmentModification(this.framework));
+            return modifications;
+        });
+    }
     /**
      * Apply modifications to the codebase
      */
@@ -863,6 +1014,37 @@ 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) {
         if (content.includes('humanBehaviorApiKey')) {
             return content;
@@ -875,6 +1057,45 @@ if (typeof window !== 'undefined') {
     }
   },`);
     }
+    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
      */
@@ -904,6 +1125,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'
             };
@@ -927,6 +1150,8 @@ if (typeof window !== 'undefined') {
             nuxt: '.env',
             remix: '.env.local',
             vanilla: '.env',
+            astro: '.env',
+            gatsby: '.env.development',
             node: '.env',
             auto: '.env'
         };
@@ -941,6 +1166,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.existsSync(filePath)) {
             // Check if the variable already exists
             const content = fs.readFileSync(filePath, 'utf8');
@@ -958,7 +1185,7 @@ if (typeof window !== 'undefined') {
                 return {
                     filePath,
                     action: 'append',
-                    content: `\n${envVarName}=${this.apiKey}`,
+                    content: `\n${envVarName}=${cleanApiKey}`,
                     description: `Added API key to existing ${path.basename(filePath)}`
                 };
             }
@@ -968,7 +1195,7 @@ if (typeof window !== 'undefined') {
             return {
                 filePath,
                 action: 'create',
-                content: `${envVarName}=${this.apiKey}`,
+                content: `${envVarName}=${cleanApiKey}`,
                 description: `Created ${path.basename(filePath)} with API key`
             };
         }
@@ -1064,6 +1291,10 @@ class DefaultAIService {
             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;
@@ -1082,7 +1313,7 @@ class DefaultAIService {
         }
         // Integration strategy
         let integrationStrategy = 'script';
-        if (framework.type === 'react' || framework.type === 'nextjs') {
+        if (framework.type === 'react' || framework.type === 'nextjs' || framework.type === 'gatsby') {
             integrationStrategy = 'provider';
         }
         else if (framework.type === 'vue') {
@@ -1877,6 +2108,10 @@ class RemoteAIService {
             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;
@@ -1893,9 +2128,13 @@ class RemoteAIService {
             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') {
+        if (framework.type === 'react' || framework.type === 'nextjs' || framework.type === 'gatsby') {
             integrationStrategy = 'provider';
         }
         else if (framework.type === 'vue') {
@@ -2138,6 +2377,8 @@ class ManualFrameworkInstallationWizard extends AutoInstallationWizard {
             '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' }
@@ -2197,67 +2438,46 @@ class ManualFrameworkInstallationWizard extends AutoInstallationWizard {
 class AIAutoInstallCLI {
     constructor(options) {
         this.options = options;
-        this.rl = readline.createInterface({
-            input: process.stdin,
-            output: process.stdout
-        });
     }
     run() {
         return __awaiter(this, void 0, void 0, function* () {
-            console.log('🤖 AI-Enhanced HumanBehavior SDK Auto-Installation');
-            console.log('================================================\n');
+            clack.intro('🤖 AI-Enhanced HumanBehavior SDK Auto-Installation');
             try {
                 // Get API key
                 const apiKey = yield this.getApiKey();
                 if (!apiKey) {
-                    console.error('❌ API key is required');
+                    clack.cancel('API key is required');
                     process.exit(1);
                 }
                 // Get project path
                 const projectPath = this.options.projectPath || process.cwd();
-                // Choose installation mode
-                const installationMode = yield this.chooseInstallationMode();
+                // Choose framework
+                const framework = yield this.chooseFramework();
+                if (!framework) {
+                    clack.cancel('Installation cancelled.');
+                    process.exit(0);
+                }
                 // Confirm installation
                 if (!this.options.yes) {
-                    const confirmed = yield this.confirmInstallation(projectPath, installationMode);
+                    const confirmed = yield this.confirmInstallation(projectPath, framework);
                     if (!confirmed) {
-                        console.log('Installation cancelled.');
+                        clack.cancel('Installation cancelled.');
                         process.exit(0);
                     }
                 }
                 // Run installation
-                console.log('🔍 Analyzing your project with AI...');
-                let result;
-                if (this.options.browser) {
-                    const wizard = new AIBrowserInstallationWizard(apiKey);
-                    result = yield wizard.install();
-                }
-                else if (installationMode === 'manual') {
-                    // Manual AI-Enhanced framework selection
-                    const framework = yield this.chooseFramework();
-                    const wizard = new ManualFrameworkInstallationWizard(apiKey, projectPath, framework);
-                    result = yield wizard.install();
-                }
-                else if (installationMode.startsWith('manual:')) {
-                    // Manual framework selection with pre-selected framework
-                    const framework = installationMode.split(':')[1];
-                    const wizard = new ManualFrameworkInstallationWizard(apiKey, projectPath, framework);
-                    result = yield wizard.install();
-                }
-                else {
-                    const wizard = new AutoInstallationWizard(apiKey, projectPath);
-                    result = yield wizard.install();
-                }
+                const spinner = clack.spinner();
+                spinner.start('🔍 Analyzing your project with AI...');
+                const wizard = new ManualFrameworkInstallationWizard(apiKey, projectPath, framework);
+                const result = yield wizard.install();
+                spinner.stop('Analysis complete!');
                 // Display results
-                this.displayResults(result, installationMode);
+                this.displayResults(result, framework);
             }
             catch (error) {
-                console.error('❌ Error:', error instanceof Error ? error.message : error);
+                clack.cancel(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
                 process.exit(1);
             }
-            finally {
-                this.rl.close();
-            }
         });
     }
     getApiKey() {
@@ -2265,262 +2485,143 @@ class AIAutoInstallCLI {
             if (this.options.apiKey) {
                 return this.options.apiKey;
             }
-            return new Promise((resolve) => {
-                this.rl.question('Enter your HumanBehavior API key: ', (answer) => {
-                    resolve(answer.trim());
-                });
-            });
-        });
-    }
-    chooseInstallationMode() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.options.manual && this.options.framework) {
-                return `manual:${this.options.framework}`;
-            }
-            if (this.options.useAI !== undefined) {
-                return this.options.useAI ? 'ai' : 'traditional';
-            }
-            console.log('🤖 Choose installation mode:');
-            console.log('1. Manual AI-Enhanced (recommended) - Choose your framework and use AI for optimization');
-            console.log('2. Traditional - Standard framework detection and installation');
-            console.log('3. Browser - Browser-based AI detection and code generation\n');
-            return new Promise((resolve) => {
-                this.rl.question('Select mode (1-3, default: 1): ', (answer) => {
-                    const choice = answer.trim() || '1';
-                    if (choice === '1')
-                        resolve('manual');
-                    else if (choice === '2')
-                        resolve('traditional');
-                    else if (choice === '3')
-                        resolve('browser');
-                    else
-                        resolve('manual');
-                });
+            const apiKey = yield clack.text({
+                message: 'Enter your HumanBehavior API key:',
+                placeholder: 'hb_...',
+                validate: (value) => {
+                    if (!value)
+                        return 'API key is required';
+                    if (!value.startsWith('hb_'))
+                        return 'API key should start with "hb_"';
+                    return undefined;
+                }
             });
+            return apiKey;
         });
     }
-    confirmInstallation(projectPath, installationMode) {
+    confirmInstallation(projectPath, framework) {
         return __awaiter(this, void 0, void 0, function* () {
-            console.log(`📁 Project path: ${projectPath}`);
-            console.log(`🤖 Installation mode: ${this.getInstallationModeDisplay(installationMode)}`);
-            console.log('⚠️  This will modify your codebase to integrate HumanBehavior SDK.');
-            console.log('   The following changes will be made:');
-            console.log('   - Install humanbehavior-js package');
-            console.log('   - Analyze code patterns with AI (if enabled)');
-            console.log('   - Modify your main app file');
-            console.log('   - Create environment files');
-            console.log('   - Add AI-optimized SDK initialization code\n');
-            return new Promise((resolve) => {
-                this.rl.question('Continue with installation? (y/n): ', (answer) => {
-                    resolve(answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes');
-                });
+            const confirmed = yield clack.confirm({
+                message: `Ready to install HumanBehavior SDK in ${projectPath} for ${framework}?`
             });
+            return confirmed;
         });
     }
-    getInstallationModeDisplay(mode) {
-        if (mode === 'manual')
-            return 'Manual AI-Enhanced';
-        if (mode === 'traditional')
-            return 'Traditional';
-        if (mode.startsWith('manual:')) {
-            const framework = mode.split(':')[1];
-            return `Manual AI-Enhanced (${framework})`;
-        }
-        if (mode === 'browser')
-            return 'Browser';
-        return 'Unknown';
-    }
     chooseFramework() {
         return __awaiter(this, void 0, void 0, function* () {
-            console.log('\n🎯 Choose your framework:');
-            console.log('1. Vanilla JS (HTML)');
-            console.log('2. React');
-            console.log('3. Next.js');
-            console.log('4. Vue');
-            console.log('5. Nuxt');
-            console.log('6. Angular');
-            console.log('7. Svelte');
-            console.log('8. Remix');
-            console.log('9. Node.js');
-            console.log('10. Other (Auto-detect)\n');
-            return new Promise((resolve) => {
-                this.rl.question('Select framework (1-10, default: 1): ', (answer) => {
-                    const choice = answer.trim() || '1';
-                    const frameworks = ['vanilla', 'react', 'nextjs', 'vue', 'nuxt', 'angular', 'svelte', 'remix', 'node', 'auto'];
-                    const index = parseInt(choice) - 1;
-                    resolve(frameworks[index] || 'vanilla');
-                });
+            const framework = yield 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;
         });
     }
-    displayResults(result, installationMode) {
+    displayResults(result, framework) {
         if (result.success) {
-            console.log('\n✅ Installation completed successfully!');
-            if (installationMode === 'ai' && result.aiAnalysis) {
-                console.log(`🎯 AI Analysis Results:`);
-                console.log(`   Framework: ${result.aiAnalysis.framework.name} (confidence: ${Math.round(result.aiAnalysis.confidence * 100)}%)`);
-                console.log(`   Integration Strategy: ${result.aiAnalysis.integrationStrategy}`);
-                console.log(`   Compatibility Mode: ${result.aiAnalysis.compatibilityMode}`);
-                if (result.aiAnalysis.patterns.length > 0) {
-                    console.log(`   Detected Patterns: ${result.aiAnalysis.patterns.length} patterns`);
-                }
-                if (result.aiAnalysis.recommendations.length > 0) {
-                    console.log(`   AI Recommendations:`);
-                    result.aiAnalysis.recommendations.forEach((rec) => {
-                        console.log(`     • ${rec}`);
-                    });
+            clack.outro('🎉 Installation completed successfully!');
+            // Display framework info
+            clack.note(`Framework detected: ${result.framework.name} (${result.framework.type})`, 'Framework Info');
+            // Display modifications
+            if (result.modifications && result.modifications.length > 0) {
+                const modifications = result.modifications.map((mod) => `${mod.action}: ${mod.filePath} - ${mod.description}`);
+                clack.note(modifications.join('\n'), 'Files Modified');
+            }
+            // Display next steps
+            if (result.nextSteps && result.nextSteps.length > 0) {
+                clack.note(result.nextSteps.join('\n'), 'Next Steps');
+            }
+            // Display AI insights if available
+            if (result.aiAnalysis) {
+                clack.note(`Confidence: ${Math.round(result.aiAnalysis.confidence * 100)}%`, 'AI Analysis');
+                if (result.aiAnalysis.recommendations && result.aiAnalysis.recommendations.length > 0) {
+                    clack.note(result.aiAnalysis.recommendations.join('\n'), 'AI Recommendations');
                 }
             }
-            else {
-                console.log(`📦 Framework detected: ${result.framework.name}`);
-            }
-            if (result.framework.bundler) {
-                console.log(`🔧 Bundler: ${result.framework.bundler}`);
-            }
-            if (result.framework.packageManager) {
-                console.log(`📋 Package Manager: ${result.framework.packageManager}`);
-            }
-            console.log('\n📝 Changes made:');
-            result.modifications.forEach((mod) => {
-                console.log(`   ${mod.action === 'create' ? '➕' : '✏️'}  ${mod.description}`);
-                console.log(`      ${mod.filePath}`);
-            });
-            console.log('\n🎯 Next steps:');
-            result.nextSteps.forEach((step) => {
-                console.log(`   ${step}`);
-            });
-            if (installationMode === 'ai' && result.learningData) {
-                console.log('\n🧠 Learning Data:');
-                console.log(`   Framework: ${result.learningData.framework}`);
-                console.log(`   Patterns: ${result.learningData.patterns.length} detected`);
-                console.log(`   Success: ${result.learningData.success ? 'Yes' : 'No'}`);
-            }
-            console.log('\n🚀 Your app is now ready to track user behavior!');
-            console.log('📊 View sessions in your HumanBehavior dashboard');
         }
         else {
-            console.log('\n❌ Installation failed:');
-            result.errors.forEach((error) => {
-                console.log(`   ${error}`);
-            });
-            console.log('\n💡 Try running with --help for more options');
+            clack.cancel('Installation failed');
+            if (result.errors && result.errors.length > 0) {
+                clack.note(result.errors.join('\n'), 'Errors');
+            }
         }
     }
 }
-// CLI argument parsing
 function parseArgs$1() {
     const args = process.argv.slice(2);
     const options = {};
     for (let i = 0; i < args.length; i++) {
         const arg = args[i];
-        if (arg === '--yes' || arg === '-y') {
-            options.yes = true;
-        }
-        else if (arg === '--dry-run' || arg === '-d') {
-            options.dryRun = true;
-        }
-        else if (arg === '--project' || arg === '-p') {
-            options.projectPath = args[i + 1];
-            i++;
-        }
-        else if (arg === '--traditional' || arg === '-t') {
-            options.useAI = false;
-        }
-        else if (arg === '--browser' || arg === '-b') {
-            options.browser = true;
-        }
-        else if (arg === '--manual' || arg === '-m') {
-            options.manual = true;
-        }
-        else if (arg === '--framework' || arg === '-f') {
-            options.framework = args[i + 1];
-            i++;
-        }
-        else if (arg === '--help' || arg === '-h') {
-            showHelp$1();
-            process.exit(0);
-        }
-        else if (!options.apiKey) {
-            options.apiKey = arg;
+        switch (arg) {
+            case '--help':
+            case '-h':
+                showHelp$1();
+                process.exit(0);
+                break;
+            case '--yes':
+            case '-y':
+                options.yes = true;
+                break;
+            case '--dry-run':
+                options.dryRun = true;
+                break;
+            case '--project':
+            case '-p':
+                options.projectPath = args[++i];
+                break;
+            case '--framework':
+            case '-f':
+                options.framework = args[++i];
+                break;
+            default:
+                if (!options.apiKey && !arg.startsWith('-')) {
+                    options.apiKey = arg;
+                }
+                break;
         }
     }
     return options;
 }
 function showHelp$1() {
     console.log(`
-AI-Enhanced HumanBehavior SDK Auto-Installation CLI
+🤖 HumanBehavior SDK AI Auto-Installation
 
 Usage: npx humanbehavior-js ai-auto-install [api-key] [options]
 
-This tool uses AI to intelligently detect frameworks, analyze code patterns,
-and generate optimal integration code that's both future-proof and backward-compatible.
-
-Arguments:
-  api-key              Your HumanBehavior API key
-
 Options:
-  -y, --yes           Skip all prompts and use defaults
-  -d, --dry-run       Show what would be changed without making changes
-  -p, --project <path> Project directory (default: current directory)
-  -t, --traditional   Force traditional installation mode
-  -b, --browser       Browser-based AI installation
-  -m, --manual        Manual framework selection
-  -f, --framework <f> Specify framework for manual mode
-  -h, --help          Show this help message
+  -h, --help              Show this help message
+  -y, --yes               Skip all prompts and use defaults
+  --dry-run               Show what would be changed without making changes
 
-Installation Modes:
-  1. Manual AI-Enhanced (default): Choose your framework and use AI for optimization
-  2. Traditional: Standard framework detection and installation
-  3. Browser: Browser-based AI detection and code generation
+  -p, --project <path>    Specify project directory
+  -f, --framework <name>  Specify framework manually
 
 Examples:
-  npx humanbehavior-js ai-auto-install your-api-key
-  npx humanbehavior-js ai-auto-install your-api-key --manual --framework react
-  npx humanbehavior-js ai-auto-install your-api-key --traditional
-  npx humanbehavior-js ai-auto-install your-api-key --browser
-
-Supported Frameworks:
-  ✅ React (CRA, Vite, Webpack)
-  ✅ Next.js (App Router, Pages Router)
-  ✅ Vue (Vue CLI, Vite)
-  ✅ Angular
-  ✅ Svelte (SvelteKit, Vite)
-  ✅ Remix
-  ✅ Vanilla JS/TS
-  ✅ Node.js (CommonJS & ESM)
-
-AI Features:
-  🔍 Intelligent framework detection beyond package.json
-  📊 Code pattern analysis and optimization
-  🔄 Future-proof integration strategies
-  🔙 Backward compatibility with legacy frameworks
-  🧠 Learning from installation patterns
-  ⚡ Adaptive code generation for new frameworks
-  🔧 Smart conflict resolution
-  📈 Performance optimization recommendations
-
-The AI-enhanced tool will:
-1. 🔍 Analyze your codebase with AI to detect patterns
-2. 🎯 Determine optimal integration strategy
-3. 📦 Install the humanbehavior-js package
-4. ✏️  Generate AI-optimized integration code
-5. 🔧 Apply modifications with conflict resolution
-6. 🧠 Learn from the installation for future improvements
-7. 🚀 Make your app ready to track user behavior
+  npx humanbehavior-js ai-auto-install
+  npx humanbehavior-js ai-auto-install hb_your_api_key_here
+  npx humanbehavior-js ai-auto-install --project ./my-app --ai
+  npx humanbehavior-js ai-auto-install --framework react --yes
 `);
 }
 // Main execution
-const options$1 = parseArgs$1();
-// Check if we have enough arguments (api-key is required)
-if (process.argv.length < 3 || process.argv.includes('--help') || process.argv.includes('-h')) {
-    showHelp$1();
-    process.exit(0);
+if (import.meta.url === `file://${process.argv[1]}`) {
+    const options = parseArgs$1();
+    const cli = new AIAutoInstallCLI(options);
+    cli.run().catch((error) => {
+        clack.cancel(`Unexpected error: ${error.message}`);
+        process.exit(1);
+    });
 }
-const cli$1 = new AIAutoInstallCLI(options$1);
-cli$1.run().catch((error) => {
-    console.error('❌ Fatal error:', error);
-    process.exit(1);
-});
 
 /**
  * HumanBehavior SDK Auto-Installation CLI
@@ -2533,46 +2634,46 @@ cli$1.run().catch((error) => {
 class AutoInstallCLI {
     constructor(options) {
         this.options = options;
-        this.rl = readline.createInterface({
-            input: process.stdin,
-            output: process.stdout
-        });
     }
     run() {
         return __awaiter(this, void 0, void 0, function* () {
-            console.log('🚀 HumanBehavior SDK Auto-Installation');
-            console.log('=====================================\n');
+            clack.intro('🚀 HumanBehavior SDK Auto-Installation');
             try {
                 // Get API key
                 const apiKey = yield this.getApiKey();
                 if (!apiKey) {
-                    console.error('❌ API key is required');
+                    clack.cancel('API key is required');
                     process.exit(1);
                 }
                 // Get project path
                 const projectPath = this.options.projectPath || process.cwd();
+                // Choose framework
+                const framework = yield this.chooseFramework();
+                if (!framework) {
+                    clack.cancel('Installation cancelled.');
+                    process.exit(0);
+                }
                 // Confirm installation
                 if (!this.options.yes) {
-                    const confirmed = yield this.confirmInstallation(projectPath);
+                    const confirmed = yield this.confirmInstallation(projectPath, framework);
                     if (!confirmed) {
-                        console.log('Installation cancelled.');
+                        clack.cancel('Installation cancelled.');
                         process.exit(0);
                     }
                 }
-                // Run auto-installation
-                console.log('🔍 Detecting your project setup...');
-                const wizard = new AutoInstallationWizard(apiKey, projectPath);
+                // Run installation
+                const spinner = clack.spinner();
+                spinner.start('🔍 Analyzing your project...');
+                const wizard = new ManualFrameworkInstallationWizard(apiKey, projectPath, framework);
                 const result = yield wizard.install();
+                spinner.stop('Detection complete!');
                 // Display results
                 this.displayResults(result);
             }
             catch (error) {
-                console.error('❌ Error:', error instanceof Error ? error.message : error);
+                clack.cancel(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
                 process.exit(1);
             }
-            finally {
-                this.rl.close();
-            }
         });
     }
     getApiKey() {
@@ -2580,139 +2681,131 @@ class AutoInstallCLI {
             if (this.options.apiKey) {
                 return this.options.apiKey;
             }
-            return new Promise((resolve) => {
-                this.rl.question('Enter your HumanBehavior API key: ', (answer) => {
-                    resolve(answer.trim());
-                });
+            const apiKey = yield clack.text({
+                message: 'Enter your HumanBehavior API key:',
+                placeholder: 'hb_...',
+                validate: (value) => {
+                    if (!value)
+                        return 'API key is required';
+                    if (!value.startsWith('hb_'))
+                        return 'API key should start with "hb_"';
+                    return undefined;
+                }
             });
+            return apiKey;
         });
     }
-    confirmInstallation(projectPath) {
+    chooseFramework() {
         return __awaiter(this, void 0, void 0, function* () {
-            console.log(`📁 Project path: ${projectPath}`);
-            console.log('⚠️  This will modify your codebase to integrate HumanBehavior SDK.');
-            console.log('   The following changes will be made:');
-            console.log('   - Install humanbehavior-js package');
-            console.log('   - Modify your main app file');
-            console.log('   - Create environment files');
-            console.log('   - Add SDK initialization code\n');
-            return new Promise((resolve) => {
-                this.rl.question('Continue with auto-installation? (y/n): ', (answer) => {
-                    resolve(answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes');
-                });
+            const framework = yield 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;
+        });
+    }
+    confirmInstallation(projectPath, framework) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const confirmed = yield clack.confirm({
+                message: `Ready to install HumanBehavior SDK in ${projectPath} for ${framework}?`
             });
+            return confirmed;
         });
     }
     displayResults(result) {
         if (result.success) {
-            console.log('\n✅ Installation completed successfully!');
-            console.log(`📦 Framework detected: ${result.framework.name}`);
-            if (result.framework.bundler) {
-                console.log(`🔧 Bundler: ${result.framework.bundler}`);
-            }
-            if (result.framework.packageManager) {
-                console.log(`📋 Package Manager: ${result.framework.packageManager}`);
-            }
-            console.log('\n📝 Changes made:');
-            result.modifications.forEach((mod) => {
-                console.log(`   ${mod.action === 'create' ? '➕' : '✏️'}  ${mod.description}`);
-                console.log(`      ${mod.filePath}`);
-            });
-            console.log('\n🎯 Next steps:');
-            result.nextSteps.forEach((step) => {
-                console.log(`   ${step}`);
-            });
-            console.log('\n🚀 Your app is now ready to track user behavior!');
-            console.log('📊 View sessions in your HumanBehavior dashboard');
+            clack.outro('🎉 Installation completed successfully!');
+            // Display framework info
+            clack.note(`Framework detected: ${result.framework.name} (${result.framework.type})`, 'Framework Info');
+            // Display modifications
+            if (result.modifications && result.modifications.length > 0) {
+                const modifications = result.modifications.map((mod) => `${mod.action}: ${mod.filePath} - ${mod.description}`);
+                clack.note(modifications.join('\n'), 'Files Modified');
+            }
+            // Display next steps
+            if (result.nextSteps && result.nextSteps.length > 0) {
+                clack.note(result.nextSteps.join('\n'), 'Next Steps');
+            }
         }
         else {
-            console.log('\n❌ Installation failed:');
-            result.errors.forEach((error) => {
-                console.log(`   ${error}`);
-            });
-            console.log('\n💡 Try running with --help for more options');
+            clack.cancel('Installation failed');
+            if (result.errors && result.errors.length > 0) {
+                clack.note(result.errors.join('\n'), 'Errors');
+            }
         }
     }
 }
-// CLI argument parsing
 function parseArgs() {
     const args = process.argv.slice(2);
     const options = {};
     for (let i = 0; i < args.length; i++) {
         const arg = args[i];
-        if (arg === '--yes' || arg === '-y') {
-            options.yes = true;
-        }
-        else if (arg === '--dry-run' || arg === '-d') {
-            options.dryRun = true;
-        }
-        else if (arg === '--project' || arg === '-p') {
-            options.projectPath = args[i + 1];
-            i++;
-        }
-        else if (arg === '--help' || arg === '-h') {
-            showHelp();
-            process.exit(0);
-        }
-        else if (!options.apiKey) {
-            options.apiKey = arg;
+        switch (arg) {
+            case '--help':
+            case '-h':
+                showHelp();
+                process.exit(0);
+                break;
+            case '--yes':
+            case '-y':
+                options.yes = true;
+                break;
+            case '--dry-run':
+                options.dryRun = true;
+                break;
+            case '--project':
+            case '-p':
+                options.projectPath = args[++i];
+                break;
+            default:
+                if (!options.apiKey && !arg.startsWith('-')) {
+                    options.apiKey = arg;
+                }
+                break;
         }
     }
     return options;
 }
 function showHelp() {
     console.log(`
-HumanBehavior SDK Auto-Installation CLI
-
-Usage: npx humanbehavior-js [api-key] [options]
+🚀 HumanBehavior SDK Auto-Installation
 
-This tool automatically detects your project's framework and modifies your codebase
-to integrate the HumanBehavior SDK with minimal user intervention.
+Usage: npx humanbehavior-js auto-install [api-key] [options]
 
-Arguments:
-  api-key              Your HumanBehavior API key
+This tool automatically detects your framework and integrates the HumanBehavior SDK.
 
 Options:
-  -y, --yes           Skip all prompts and use defaults
-  -d, --dry-run       Show what would be changed without making changes
-  -p, --project <path> Project directory (default: current directory)
-  -h, --help          Show this help message
+  -h, --help              Show this help message
+  -y, --yes               Skip all prompts and use defaults
+  --dry-run               Show what would be changed without making changes
+  -p, --project <path>    Specify project directory
 
 Examples:
-  npx humanbehavior-js your-api-key
-  npx humanbehavior-js your-api-key --yes
-  npx humanbehavior-js your-api-key -p /path/to/project
-
-Supported Frameworks:
-  ✅ React (CRA, Vite, Webpack)
-  ✅ Next.js (App Router, Pages Router)
-  ✅ Vue (Vue CLI, Vite)
-  ✅ Angular
-  ✅ Svelte (SvelteKit, Vite)
-  ✅ Remix
-  ✅ Vanilla JS/TS
-  ✅ Node.js (CommonJS & ESM)
-
-The tool will:
-1. 🔍 Auto-detect your project's framework and setup
-2. 📦 Install the humanbehavior-js package
-3. ✏️  Modify your codebase to integrate the SDK
-4. 🔧 Create environment files with your API key
-5. 🚀 Make your app ready to track user behavior
+  npx humanbehavior-js auto-install
+  npx humanbehavior-js auto-install hb_your_api_key_here
+  npx humanbehavior-js auto-install --project ./my-app --yes
 `);
 }
 // Main execution
-const options = parseArgs();
-// Check if we have enough arguments (api-key is required)
-if (process.argv.length < 3 || process.argv.includes('--help') || process.argv.includes('-h')) {
-    showHelp();
-    process.exit(0);
+if (import.meta.url === `file://${process.argv[1]}`) {
+    const options = parseArgs();
+    const cli = new AutoInstallCLI(options);
+    cli.run().catch((error) => {
+        clack.cancel(`Unexpected error: ${error.message}`);
+        process.exit(1);
+    });
 }
-const cli = new AutoInstallCLI(options);
-cli.run().catch((error) => {
-    console.error('❌ Fatal error:', error);
-    process.exit(1);
-});
 
 /**
  * Centralized AI Service Implementation