@keak/sdk 1.0.1

package/src/cli/install.js

@@ -0,0 +1,618 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { execSync } from 'child_process';
+import { AIHelper, LocalAIHelper } from './ai-helper.js';
+import ConversionDetector from './conversion-detector.js';
+import { FrameworkConfigManager } from './framework-config.js';
+
+// ANSI color codes for terminal output
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+  red: '\x1b[31m',
+};
+
+// Check for command-line arguments
+const args = process.argv.slice(2);
+const command = args[0];
+
+// Handle conversions command
+if (command === 'conversions') {
+  console.log(`
+${colors.cyan}${colors.bright}
+╔═══════════════════════════════════════╗
+║                                       ║
+║   🎯 Keak Conversion Tracking Setup   ║
+║                                       ║
+╚═══════════════════════════════════════╝
+${colors.reset}
+`);
+  
+  const detector = new ConversionDetector();
+  const targetDir = args[1] || process.cwd();
+  
+  console.log(`${colors.blue}🎯 Setting up conversion tracking...${colors.reset}\n`);
+  
+  const result = detector.createConversionFiles(targetDir);
+  
+  if (result.success) {
+    const report = result.report;
+    
+    console.log(`${colors.green}✅ Conversion tracking setup complete!${colors.reset}`);
+    console.log(`${colors.cyan}🌐 Results page: ${result.htmlPath}${colors.reset}`);
+    console.log(`
+${colors.blue}📊 Results:${colors.reset}
+• Files processed: ${report.stats.filesProcessed}
+• Files modified: ${report.stats.filesModified}  
+• Elements wrapped: ${report.stats.elementsWrapped}
+`);
+
+    if (result.errors && result.errors.length > 0) {
+      console.log(`${colors.yellow}⚠️  ${result.errors.length} files had issues - check the results page for details${colors.reset}`);
+    }
+
+    console.log(`
+${colors.yellow}🔧 What happened:${colors.reset}
+1. All React files were scanned automatically
+2. Clickable elements (buttons, links, etc.) were wrapped with components  
+3. Backup files (.keak-backup) were created for all changes
+4. Your components now automatically track conversion events
+
+${colors.green}🚀 Your conversion tracking is now active!${colors.reset}
+`);
+  } else {
+    console.error(`${colors.red}❌ Failed to setup conversion tracking: ${result.error}${colors.reset}`);
+    process.exit(1);
+  }
+  
+  process.exit(0);
+}
+
+console.log(`
+${colors.cyan}${colors.bright}
+╔═══════════════════════════════════════╗
+║                                       ║
+║   🚀 Keak SDK Auto-Setup Wizard       ║
+║                                       ║
+╚═══════════════════════════════════════╝
+${colors.reset}
+`);
+
+class KeakInstaller {
+  constructor() {
+    this.projectRoot = process.cwd();
+    this.framework = null;
+    this.entryFile = null;
+    this.aiApiKey = process.env.OPENAI_API_KEY || process.env.ANTHROPIC_API_KEY;
+  }
+
+  async run() {
+    try {
+      console.log(`${colors.blue}🔍 Detecting project setup...${colors.reset}\n`);
+
+      // Step 1: Detect framework
+      this.detectFramework();
+
+      // Step 2: Find entry file
+      this.findEntryFile();
+
+      // Step 3: Setup framework configuration (Babel, etc.)
+      console.log(`\n${colors.blue}🔧 Configuring build tools for optimal Keak performance...${colors.reset}\n`);
+      const configManager = new FrameworkConfigManager(this.projectRoot);
+      const configSuccess = await configManager.setupBabelConfig();
+
+      if (configSuccess) {
+        console.log(`${colors.green}✅ Build configuration complete${colors.reset}\n`);
+      } else {
+        console.log(`${colors.yellow}⚠️  Build configuration incomplete - Keak may have limited functionality${colors.reset}\n`);
+      }
+
+      // Step 4: Check if already installed
+      if (this.isAlreadyInstalled()) {
+        console.log(`${colors.green}✅ Keak is already installed!${colors.reset}`);
+        this.showUsageInstructions();
+        return;
+      }
+
+      // Step 5: Attempt automatic installation
+      const installed = await this.autoInstall();
+
+      if (installed) {
+        console.log(`\n${colors.green}${colors.bright}✨ Success! Keak has been installed.${colors.reset}`);
+        this.showPostInstallInstructions();
+      } else {
+        // Step 6: Use AI for complex cases
+        await this.aiAssistedInstall();
+      }
+
+    } catch (error) {
+      console.error(`${colors.red}❌ Installation failed: ${error.message}${colors.reset}`);
+      this.showManualInstructions();
+    }
+  }
+
+  detectFramework() {
+    const packageJsonPath = path.join(this.projectRoot, 'package.json');
+    
+    if (!fs.existsSync(packageJsonPath)) {
+      throw new Error('No package.json found. Are you in a Node.js project?');
+    }
+    
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+    const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+    
+    if (deps['next']) {
+      this.framework = 'nextjs';
+      console.log(`${colors.green}✓${colors.reset} Detected: Next.js`);
+    } else if (deps['react-scripts']) {
+      this.framework = 'create-react-app';
+      console.log(`${colors.green}✓${colors.reset} Detected: Create React App`);
+    } else if (deps['vite'] && deps['react']) {
+      this.framework = 'vite-react';
+      console.log(`${colors.green}✓${colors.reset} Detected: Vite + React`);
+    } else if (deps['gatsby']) {
+      this.framework = 'gatsby';
+      console.log(`${colors.green}✓${colors.reset} Detected: Gatsby`);
+    } else if (deps['react']) {
+      this.framework = 'react';
+      console.log(`${colors.green}✓${colors.reset} Detected: React (custom setup)`);
+    } else {
+      throw new Error('Could not detect React in your project. Keak currently supports React applications.');
+    }
+  }
+
+  findEntryFile() {
+    const possibleEntries = {
+      'nextjs': [
+        'app/layout.tsx',
+        'app/layout.jsx',
+        'app/layout.js',
+        'pages/_app.tsx',
+        'pages/_app.jsx',
+        'pages/_app.js',
+      ],
+      'create-react-app': [
+        'src/index.tsx',
+        'src/index.jsx',
+        'src/index.js',
+        'src/App.tsx',
+        'src/App.jsx',
+        'src/App.js',
+      ],
+      'vite-react': [
+        'src/main.tsx',
+        'src/main.jsx',
+        'src/App.tsx',
+        'src/App.jsx',
+      ],
+      'gatsby': [
+        'src/pages/_app.tsx',
+        'src/pages/_app.js',
+        'gatsby-browser.js',
+      ],
+      'react': [
+        'src/index.tsx',
+        'src/index.jsx',
+        'src/index.js',
+        'index.tsx',
+        'index.jsx',
+        'index.js',
+        'src/App.tsx',
+        'src/App.jsx',
+        'src/App.js',
+        'App.tsx',
+        'App.jsx',
+        'App.js',
+      ]
+    };
+
+    const entries = possibleEntries[this.framework] || possibleEntries.react;
+    
+    for (const entry of entries) {
+      const fullPath = path.join(this.projectRoot, entry);
+      if (fs.existsSync(fullPath)) {
+        this.entryFile = fullPath;
+        console.log(`${colors.green}✓${colors.reset} Found entry file: ${entry}`);
+        return;
+      }
+    }
+    
+    // If no entry file found, try to find any file with ReactDOM.render or createRoot
+    this.entryFile = this.findReactDOMRenderFile();
+    
+    if (!this.entryFile) {
+      throw new Error('Could not find React entry file. Please specify manually.');
+    }
+  }
+
+  findReactDOMRenderFile() {
+    const searchDirs = ['src', '.'];
+    
+    for (const dir of searchDirs) {
+      const fullDir = path.join(this.projectRoot, dir);
+      if (!fs.existsSync(fullDir)) continue;
+      
+      const files = this.getAllFiles(fullDir, ['.js', '.jsx', '.ts', '.tsx']);
+      
+      for (const file of files) {
+        const content = fs.readFileSync(file, 'utf-8');
+        if (content.includes('ReactDOM.render') || 
+            content.includes('ReactDOM.createRoot') ||
+            content.includes('createRoot(')) {
+          console.log(`${colors.green}✓${colors.reset} Found React render in: ${path.relative(this.projectRoot, file)}`);
+          return file;
+        }
+      }
+    }
+    
+    return null;
+  }
+
+  getAllFiles(dir, extensions) {
+    const files = [];
+    
+    const items = fs.readdirSync(dir);
+    for (const item of items) {
+      const fullPath = path.join(dir, item);
+      
+      // Skip node_modules and other common directories
+      if (item === 'node_modules' || item === '.git' || item === 'dist' || item === 'build') {
+        continue;
+      }
+      
+      const stat = fs.statSync(fullPath);
+      if (stat.isDirectory()) {
+        files.push(...this.getAllFiles(fullPath, extensions));
+      } else if (extensions.some(ext =item.endsWith(ext))) {
+        files.push(fullPath);
+      }
+    }
+    
+    return files;
+  }
+
+  isAlreadyInstalled() {
+    if (!this.entryFile) return false;
+    
+    const content = fs.readFileSync(this.entryFile, 'utf-8');
+    return content.includes('KeakProvider') || content.includes('keak-sdk');
+  }
+
+  async autoInstall() {
+    console.log(`\n${colors.blue}🔧 Attempting automatic installation...${colors.reset}\n`);
+    
+    const content = fs.readFileSync(this.entryFile, 'utf-8');
+    let modified = content;
+    
+    try {
+      if (this.framework === 'nextjs') {
+        modified = this.wrapNextJs(content);
+      } else if (this.framework === 'create-react-app' || this.framework === 'vite-react') {
+        modified = this.wrapCRA(content);
+      } else {
+        modified = this.wrapGenericReact(content);
+      }
+      
+      if (modified !== content) {
+        // Create backup
+        const backupPath = `${this.entryFile}.backup`;
+        fs.writeFileSync(backupPath, content);
+        console.log(`${colors.cyan}📋 Created backup: ${path.basename(backupPath)}${colors.reset}`);
+        
+        // Write modified file
+        fs.writeFileSync(this.entryFile, modified);
+        console.log(`${colors.green}✓${colors.reset} Modified: ${path.relative(this.projectRoot, this.entryFile)}`);
+        
+        return true;
+      }
+    } catch (error) {
+      console.log(`${colors.yellow}⚠️  Auto-installation needs help with your setup${colors.reset}`);
+    }
+    
+    return false;
+  }
+
+  wrapNextJs(content) {
+    const isAppDir = this.entryFile.includes('app/layout');
+
+    if (isAppDir) {
+      // Next.js 13+ App Directory
+      if (!content.includes('KeakProvider')) {
+        // Add import - include both KeakProvider and KeakToolbar
+        const importLine = "import { KeakProvider, KeakToolbar } from 'keak-sdk';\n";
+        let modified = content;
+
+        // Add import after existing imports
+        const lastImportIndex = modified.lastIndexOf('import ');
+        if (lastImportIndex !== -1) {
+          const endOfLine = modified.indexOf('\n', lastImportIndex);
+          modified = modified.slice(0, endOfLine + 1) + importLine + modified.slice(endOfLine + 1);
+        } else {
+          modified = importLine + modified;
+        }
+
+        // Wrap children in body with KeakProvider and add KeakToolbar
+        const bodyMatch = modified.match(/(<body[^>]*>)([\s\S]*?)(<\/body>)/);
+        if (bodyMatch) {
+          const bodyContent = bodyMatch[2].trim();
+          const wrapped = `${bodyMatch[1]}
+        <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+${bodyContent}
+          <KeakToolbar />
+        </KeakProvider>
+      ${bodyMatch[3]}`;
+          modified = modified.replace(bodyMatch[0], wrapped);
+        }
+
+        return modified;
+      }
+    } else {
+      // Next.js Pages Directory
+      if (!content.includes('KeakProvider')) {
+        // Add import - include both KeakProvider and KeakToolbar
+        const importLine = "import { KeakProvider, KeakToolbar } from 'keak-sdk';\n";
+        let modified = content;
+
+        const lastImportIndex = modified.lastIndexOf('import ');
+        if (lastImportIndex !== -1) {
+          const endOfLine = modified.indexOf('\n', lastImportIndex);
+          modified = modified.slice(0, endOfLine + 1) + importLine + modified.slice(endOfLine + 1);
+        } else {
+          modified = importLine + modified;
+        }
+
+        // Wrap Component with KeakProvider and add KeakToolbar
+        const componentMatch = modified.match(/(return\s*\(?\s*)([\s\S]*?)(\s*\)?;?\s*})/);
+        if (componentMatch) {
+          const wrapped = `${componentMatch[1]}
+    <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+      ${componentMatch[2]}
+      <KeakToolbar />
+    </KeakProvider>
+    ${componentMatch[3]}`;
+          modified = modified.replace(componentMatch[0], wrapped);
+        }
+
+        return modified;
+      }
+    }
+
+    return content;
+  }
+
+  wrapCRA(content) {
+    let modified = content;
+
+    // Add import - include both KeakProvider and KeakToolbar
+    if (!content.includes('KeakProvider')) {
+      const importLine = "import { KeakProvider, KeakToolbar } from 'keak-sdk';\n";
+
+      const lastImportIndex = modified.lastIndexOf('import ');
+      if (lastImportIndex !== -1) {
+        const endOfLine = modified.indexOf('\n', lastImportIndex);
+        modified = modified.slice(0, endOfLine + 1) + importLine + modified.slice(endOfLine + 1);
+      } else {
+        modified = importLine + modified;
+      }
+    }
+
+    // Find ReactDOM.render or createRoot
+    if (content.includes('ReactDOM.render')) {
+      // Old React 17 style
+      const renderMatch = modified.match(/(ReactDOM\.render\s*\(\s*)([\s\S]*?)(\s*,\s*document\.getElementById)/);
+      if (renderMatch) {
+        const wrapped = `${renderMatch[1]}
+  <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+    ${renderMatch[2]}
+    <KeakToolbar />
+  </KeakProvider>
+  ${renderMatch[3]}`;
+        modified = modified.replace(renderMatch[0], wrapped);
+      }
+    } else if (content.includes('createRoot')) {
+      // React 18 style
+      const renderMatch = modified.match(/(root\.render\s*\(\s*)([\s\S]*?)(\s*\))/);
+      if (renderMatch) {
+        const wrapped = `${renderMatch[1]}
+  <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+    ${renderMatch[2]}
+    <KeakToolbar />
+  </KeakProvider>
+  ${renderMatch[3]}`;
+        modified = modified.replace(renderMatch[0], wrapped);
+      }
+    }
+
+    return modified;
+  }
+
+  wrapGenericReact(content) {
+    // Generic React app wrapper
+    return this.wrapCRA(content);
+  }
+
+  async aiAssistedInstall() {
+    console.log(`\n${colors.cyan}🤖 Using AI to help with installation...${colors.reset}\n`);
+    
+    const content = fs.readFileSync(this.entryFile, 'utf-8');
+    const aiHelper = new AIHelper();
+    const localHelper = new LocalAIHelper();
+    
+    try {
+      // First try the Keak AI service (free, no API key needed)
+      console.log(`${colors.blue}Connecting to Keak AI service...${colors.reset}`);
+      const modifiedContent = await Promise.race([
+        aiHelper.getInstallationHelp(content, this.entryFile, this.framework),
+        new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), 5000))
+      ]);
+      
+      if (modifiedContent && modifiedContent !== content) {
+        // Create backup
+        const backupPath = `${this.entryFile}.backup`;
+        fs.writeFileSync(backupPath, content);
+        console.log(`${colors.cyan}📋 Created backup: ${path.basename(backupPath)}${colors.reset}`);
+        
+        // Write modified file
+        fs.writeFileSync(this.entryFile, modifiedContent);
+        console.log(`${colors.green}✓${colors.reset} AI successfully updated: ${path.relative(this.projectRoot, this.entryFile)}`);
+        
+        console.log(`\n${colors.green}${colors.bright}✨ Success! Keak has been installed with AI assistance.${colors.reset}`);
+        this.showPostInstallInstructions();
+        return;
+      }
+    } catch (error) {
+      console.log(`${colors.yellow}Online AI unavailable, using local intelligence...${colors.reset}`);
+    }
+    
+    // Fallback to local AI helper
+    try {
+      const isTypeScript = this.entryFile.endsWith('.ts') || this.entryFile.endsWith('.tsx');
+      const modifiedContent = localHelper.addKeakProvider(content, isTypeScript);
+      
+      if (modifiedContent && modifiedContent !== content) {
+        // Create backup
+        const backupPath = `${this.entryFile}.backup`;
+        fs.writeFileSync(backupPath, content);
+        console.log(`${colors.cyan}📋 Created backup: ${path.basename(backupPath)}${colors.reset}`);
+        
+        // Write modified file
+        fs.writeFileSync(this.entryFile, modifiedContent);
+        console.log(`${colors.green}✓${colors.reset} Successfully updated: ${path.relative(this.projectRoot, this.entryFile)}`);
+        
+        console.log(`\n${colors.green}${colors.bright}✨ Success! Keak has been installed.${colors.reset}`);
+        this.showPostInstallInstructions();
+        return;
+      }
+    } catch (error) {
+      console.log(`${colors.yellow}Automated installation needs manual help.${colors.reset}`);
+    }
+    
+    // If all else fails, show manual instructions
+    this.showManualInstructions();
+  }
+
+  showManualInstructions() {
+    const relativeEntry = this.entryFile 
+      ? path.relative(this.projectRoot, this.entryFile)
+      : 'your entry file (e.g., src/index.tsx or src/App.tsx)';
+    
+    console.log(`
+${colors.yellow}📝 Manual Installation Required${colors.reset}
+
+Please add Keak to your app manually:
+
+1. Open ${colors.cyan}${relativeEntry}${colors.reset}
+
+2. Add this import at the top:
+   ${colors.green}import { KeakProvider } from 'keak-sdk';${colors.reset}
+
+3. Wrap your main component:
+   ${colors.green}<KeakProvider config={{ apiKey: 'demo', debug: true }}><YourApp /></KeakProvider>${colors.reset}
+
+Example for ${this.framework}:
+${this.getFrameworkExample()}
+`);
+  }
+
+  getFrameworkExample() {
+    const examples = {
+      'nextjs': `
+// app/layout.tsx
+import { KeakProvider } from 'keak-sdk';
+
+export default function RootLayout({ children }) {
+  return (
+    <html><body>
+      <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+        {children}
+      </KeakProvider>
+    </body></html>);
+}`,
+      'create-react-app': `
+// src/index.js
+import { KeakProvider } from 'keak-sdk';
+
+root.render(
+  <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+    <App />
+  </KeakProvider>
+);`,
+      'vite-react': `
+// src/main.tsx
+import { KeakProvider } from 'keak-sdk';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+    <App />
+  </KeakProvider>
+);`
+    };
+    
+    return examples[this.framework] || examples['create-react-app'];
+  }
+
+  showPostInstallInstructions() {
+    console.log(`
+${colors.cyan}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${colors.reset}
+
+${colors.green}🎉 Keak is ready to use!${colors.reset}
+
+Start your development server and look for the ${colors.bright}Keak toolbar${colors.reset}
+in the ${colors.bright}bottom-right corner${colors.reset} of your app.
+
+${colors.blue}Quick Tips:${colors.reset}
+• Click the toolbar to expand it
+• Use "Select" to pick elements for testing
+• Try the AI prompts for optimization ideas
+• Press ${colors.bright}Cmd+Shift+K${colors.reset} to toggle the toolbar
+
+${colors.blue}🔧 Important for Next.js users:${colors.reset}
+• Keak requires Babel for source mapping
+• We've disabled Turbopack in your dev script
+• Use ${colors.bright}npm run dev:turbo${colors.reset} if you need Turbopack
+• ${colors.yellow}Restart your dev server${colors.reset} for changes to take effect
+
+${colors.blue}🎯 Want conversion tracking?${colors.reset}
+Run: ${colors.bright}npx keak-setup conversions${colors.reset}
+
+${colors.yellow}Need help?${colors.reset} Visit https://docs.keak.dev
+
+${colors.cyan}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${colors.reset}
+`);
+  }
+
+  showUsageInstructions() {
+    console.log(`
+The Keak toolbar should appear in your app when running in development mode.
+
+If you don't see it, make sure:
+1. Your app is running in development mode
+2. You've restarted your dev server after installation
+
+Press ${colors.bright}Cmd+Shift+K${colors.reset} in your app to toggle the toolbar.
+`);
+  }
+}
+
+// Run the installer
+const installer = new KeakInstaller();
+
+// Gracefully handle errors during postinstall (don't fail the install)
+installer.run().catch((error) => {
+  // Only show error in verbose mode or when run explicitly (not postinstall)
+  const isPostInstall = process.env.npm_lifecycle_event === 'postinstall';
+  
+  if (!isPostInstall) {
+    console.error(`${colors.red}Installation failed: ${error.message}${colors.reset}`);
+    process.exit(1);
+  } else {
+    // Silent fail for postinstall - don't block package installation
+    console.log(`${colors.yellow}ℹ️  Keak auto-setup skipped. Run 'npx keak-setup' manually when ready.${colors.reset}`);
+  }
+});

package/src/cli/keak-setup.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+// Main entry point for keak-setup commands
+const args = process.argv.slice(2);
+const command = args[0];
+
+if (!command) {
+  console.log(`
+🚀 Keak Setup Commands
+
+Usage: npx keak-setup <command>
+
+Commands:
+  install             Set up Keak SDK in your React app
+  conversions         Set up automatic conversion tracking
+  revert-conversions  Undo conversion tracking changes
+
+Examples:
+  npx keak-setup install
+  npx keak-setup conversions
+  npx keak-setup revert-conversions
+  
+For more help: https://docs.keak.dev
+`);
+  process.exit(0);
+}
+
+// Route to appropriate script
+(async () => {
+  if (command === 'install') {
+    await import('./install.js');
+  } else if (command === 'conversions') {
+    // Run conversions setup directly
+    await import('./install.js');
+  } else if (command === 'revert-conversions') {
+    // Run revert command
+    await import('./revert-conversions.js');
+  } else {
+    console.error(`Unknown command: ${command}`);
+    console.log('Available commands: install, conversions, revert-conversions');
+    process.exit(1);
+  }
+})();