@keak/sdk 1.0.9 → 2.0.1

package/src/cli/install.js

@@ -3,7 +3,7 @@
 import fs from 'fs';
 import path from 'path';
 import { execSync } from 'child_process';
-import { AIHelper, LocalAIHelper } from './ai-helper.js';
+import { LocalAIHelper } from './ai-helper.js';
 import ConversionDetector from './conversion-detector.js';
 import { FrameworkConfigManager } from './framework-config.js';
 
@@ -33,23 +33,23 @@ ${colors.cyan}${colors.bright}
 ╚═══════════════════════════════════════╝
 ${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}  
+• Files modified: ${report.stats.filesModified}
 • Elements wrapped: ${report.stats.elementsWrapped}
 `);
 
@@ -60,7 +60,7 @@ ${colors.blue}📊 Results:${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  
+2. Clickable elements (buttons, links, etc.) were wrapped with <Conversion> components
 3. Backup files (.keak-backup) were created for all changes
 4. Your components now automatically track conversion events
 
@@ -70,7 +70,7 @@ ${colors.green}🚀 Your conversion tracking is now active!${colors.reset}
     console.error(`${colors.red}❌ Failed to setup conversion tracking: ${result.error}${colors.reset}`);
     process.exit(1);
   }
-  
+
   process.exit(0);
 }
 
@@ -89,7 +89,6 @@ class KeakInstaller {
     this.projectRoot = process.cwd();
     this.framework = null;
     this.entryFile = null;
-    this.aiApiKey = process.env.OPENAI_API_KEY || process.env.ANTHROPIC_API_KEY;
   }
 
   async run() {
@@ -139,14 +138,14 @@ class KeakInstaller {
 
   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`);
@@ -213,7 +212,7 @@ class KeakInstaller {
     };
 
     const entries = possibleEntries[this.framework] || possibleEntries.react;
-    
+
     for (const entry of entries) {
       const fullPath = path.join(this.projectRoot, entry);
       if (fs.existsSync(fullPath)) {
@@ -222,10 +221,10 @@ class KeakInstaller {
         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.');
     }
@@ -233,16 +232,16 @@ class KeakInstaller {
 
   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') || 
+        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)}`);
@@ -250,46 +249,46 @@ class KeakInstaller {
         }
       }
     }
-    
+
     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))) {
+      } 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');
+    return content.includes('useKeak') || 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);
@@ -298,23 +297,23 @@ class KeakInstaller {
       } 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;
   }
 
@@ -323,10 +322,15 @@ class KeakInstaller {
 
     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";
+      if (!content.includes('useKeak')) {
+        // Add 'use client' directive if not present
         let modified = content;
+        if (!modified.includes("'use client'") && !modified.includes('"use client"')) {
+          modified = "'use client';\n\n" + modified;
+        }
+
+        // Add import
+        const importLine = "import { useKeak, KeakToolbar } from '@keak/sdk';\n";
 
         // Add import after existing imports
         const lastImportIndex = modified.lastIndexOf('import ');
@@ -337,26 +341,34 @@ class KeakInstaller {
           modified = importLine + modified;
         }
 
-        // Wrap children in body with KeakProvider and add KeakToolbar
-        const bodyMatch = modified.match(/(<body[^>]*>)([\s\S]*?)(<\/body>)/);
+        // Add useKeak() hook at the start of the layout component
+        const componentMatch = modified.match(/(export\s+default\s+function\s+\w+\s*\([^)]*\)\s*\{)\s*/);
+        if (componentMatch) {
+          modified = modified.replace(
+            componentMatch[0],
+            `${componentMatch[1]}
+  useKeak({ debug: true });
+  `
+          );
+        }
+
+        // Add KeakToolbar before closing body tag
+        const bodyMatch = modified.match(/(<\/body>)/);
         if (bodyMatch) {
-          const bodyContent = bodyMatch[2].trim();
-          const wrapped = `${bodyMatch[1]}
-        <KeakProvider>
-${bodyContent}
-          <KeakToolbar />
-        </KeakProvider>
-      ${bodyMatch[3]}`;
-          modified = modified.replace(bodyMatch[0], wrapped);
+          modified = modified.replace(
+            bodyMatch[0],
+            `      <KeakToolbar position="bottom-right" />
+    ${bodyMatch[0]}`
+          );
         }
 
         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";
+      // Next.js Pages Directory (_app.tsx/jsx/js)
+      if (!content.includes('useKeak')) {
+        // Add import
+        const importLine = "import { useKeak, KeakToolbar } from '@keak/sdk';\n";
         let modified = content;
 
         const lastImportIndex = modified.lastIndexOf('import ');
@@ -367,16 +379,25 @@ ${bodyContent}
           modified = importLine + modified;
         }
 
-        // Wrap Component with KeakProvider and add KeakToolbar
-        const componentMatch = modified.match(/(return\s*\(?\s*)([\s\S]*?)(\s*\)?;?\s*})/);
+        // Add useKeak() hook at the start of MyApp component
+        const componentMatch = modified.match(/(function\s+\w+\s*\([^)]*\)\s*\{)\s*/);
         if (componentMatch) {
-          const wrapped = `${componentMatch[1]}
-    <KeakProvider>
-      ${componentMatch[2]}
-      <KeakToolbar />
-    </KeakProvider>
-    ${componentMatch[3]}`;
-          modified = modified.replace(componentMatch[0], wrapped);
+          modified = modified.replace(
+            componentMatch[0],
+            `${componentMatch[1]}
+  useKeak({ debug: true });
+  `
+          );
+        }
+
+        // Add KeakToolbar after Component
+        const componentRenderMatch = modified.match(/(<Component\s+[^>]*\/>)/);
+        if (componentRenderMatch) {
+          modified = modified.replace(
+            componentRenderMatch[0],
+            `${componentRenderMatch[0]}
+      <KeakToolbar position="bottom-right" />`
+          );
         }
 
         return modified;
@@ -389,9 +410,9 @@ ${bodyContent}
   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";
+    // Add import
+    if (!content.includes('useKeak')) {
+      const importLine = "import { useKeak, KeakToolbar } from '@keak/sdk';\n";
 
       const lastImportIndex = modified.lastIndexOf('import ');
       if (lastImportIndex !== -1) {
@@ -402,36 +423,122 @@ ${bodyContent}
       }
     }
 
-    // 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>
-    ${renderMatch[2]}
-    <KeakToolbar />
-  </KeakProvider>
-  ${renderMatch[3]}`;
-        modified = modified.replace(renderMatch[0], wrapped);
+    // Check if this is App component (has a component function)
+    const hasComponentFunction = content.match(/function\s+\w+\s*\(|const\s+\w+\s*=\s*\([^)]*\)\s*=>/);
+
+    if (hasComponentFunction) {
+      // This is App.tsx/jsx - add hook to component
+      const hookAdded = this.addUseKeakHookToComponent(modified);
+      if (hookAdded) {
+        modified = hookAdded;
       }
-    } 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>
-    ${renderMatch[2]}
-    <KeakToolbar />
-  </KeakProvider>
-  ${renderMatch[3]}`;
-        modified = modified.replace(renderMatch[0], wrapped);
+
+      // Add toolbar before the closing tag of return
+      const returnMatch = modified.match(/(<\/(?:[^>]+)>)\s*\n?\s*(\);?\s*[}$])/m);
+      if (returnMatch) {
+        modified = modified.replace(
+          returnMatch[0],
+          `${returnMatch[1]}
+      <KeakToolbar position="bottom-right" />
+  ${returnMatch[2]}`
+        );
+      }
+    } else {
+      // This is index.tsx/jsx - create wrapper component
+      // Find ReactDOM.render or createRoot and wrap with a component
+      if (content.includes('ReactDOM.render') || content.includes('createRoot')) {
+        // Add wrapper component before ReactDOM
+        const wrapperComponent = `
+// Keak wrapper component with hook
+function KeakWrapper({ children }) {
+  useKeak({ debug: true });
+  return (
+    <>
+      {children}
+      <KeakToolbar position="bottom-right" />
+    </>
+  );
+}
+
+`;
+        const reactDOMIndex = modified.search(/(ReactDOM\.render|createRoot)/);
+        if (reactDOMIndex !== -1) {
+          modified = modified.slice(0, reactDOMIndex) + wrapperComponent + modified.slice(reactDOMIndex);
+        }
+
+        // Wrap the rendered component
+        if (content.includes('ReactDOM.render')) {
+          // Old React 17 style
+          const renderMatch = modified.match(/(ReactDOM\.render\s*\(\s*)(<)/);
+          if (renderMatch) {
+            modified = modified.replace(
+              renderMatch[0],
+              `${renderMatch[1]}<KeakWrapper>
+        ${renderMatch[2]}`
+            );
+
+            const closeMatch = modified.match(/(<\/(?:[^>]+)>)\s*\n?\s*(,\s*document\.getElementById)/);
+            if (closeMatch) {
+              modified = modified.replace(
+                closeMatch[0],
+                `${closeMatch[1]}
+      </KeakWrapper>${closeMatch[2]}`
+              );
+            }
+          }
+        } else if (content.includes('createRoot')) {
+          // React 18 style
+          const renderMatch = modified.match(/(root\.render\s*\(\s*)(<)/);
+          if (renderMatch) {
+            modified = modified.replace(
+              renderMatch[0],
+              `${renderMatch[1]}<KeakWrapper>
+        ${renderMatch[2]}`
+            );
+
+            const closeMatch = modified.match(/(<\/(?:[^>]+)>)\s*\n?\s*(\))/);
+            if (closeMatch) {
+              modified = modified.replace(
+                closeMatch[0],
+                `${closeMatch[1]}
+      </KeakWrapper>${closeMatch[2]}`
+              );
+            }
+          }
+        }
       }
     }
 
     return modified;
   }
 
+  addUseKeakHookToComponent(content) {
+    // Try to add useKeak() hook at the start of the component
+    // Match function components
+    const functionMatch = content.match(/(function\s+\w+\s*\([^)]*\)\s*\{)\s*/);
+    if (functionMatch) {
+      return content.replace(
+        functionMatch[0],
+        `${functionMatch[1]}
+  useKeak({ debug: true });
+  `
+      );
+    }
+
+    // Match arrow function components
+    const arrowMatch = content.match(/(const\s+\w+\s*=\s*\([^)]*\)\s*=>\s*\{)\s*/);
+    if (arrowMatch) {
+      return content.replace(
+        arrowMatch[0],
+        `${arrowMatch[1]}
+  useKeak({ debug: true });
+  `
+      );
+    }
+
+    return null;
+  }
+
   wrapGenericReact(content) {
     // Generic React app wrapper
     return this.wrapCRA(content);
@@ -439,52 +546,25 @@ ${bodyContent}
 
   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
+
+    // Use local AI helper (updated to use hook-based format)
     try {
       const isTypeScript = this.entryFile.endsWith('.ts') || this.entryFile.endsWith('.tsx');
-      const modifiedContent = localHelper.addKeakProvider(content, isTypeScript);
-      
+      const modifiedContent = localHelper.addKeakHook(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;
@@ -492,16 +572,16 @@ ${bodyContent}
     } 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 
+    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}
 
@@ -510,10 +590,13 @@ 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}
+   ${colors.green}import { useKeak, KeakToolbar } from '@keak/sdk';${colors.reset}
 
-3. Wrap your main component:
-   ${colors.green}<KeakProvider><YourApp /></KeakProvider>${colors.reset}
+3. Add the hook in your component:
+   ${colors.green}useKeak({ debug: true });${colors.reset}
+
+4. Add the toolbar to your JSX:
+   ${colors.green}<KeakToolbar position="bottom-right" />${colors.reset}
 
 Example for ${this.framework}:
 ${this.getFrameworkExample()}
@@ -524,36 +607,52 @@ ${this.getFrameworkExample()}
     const examples = {
       'nextjs': `
 // app/layout.tsx
-import { KeakProvider } from '@keak/sdk';
+'use client';
+
+import { useKeak, KeakToolbar } from '@keak/sdk';
 
 export default function RootLayout({ children }) {
+  useKeak({ debug: true });
+
   return (
-    <html><body>
-      <KeakProvider>
+    <html>
+      <body>
         {children}
-      </KeakProvider>
-    </body></html>);
+        <KeakToolbar position="bottom-right" />
+      </body>
+    </html>
+  );
 }`,
       'create-react-app': `
-// src/index.js
-import { KeakProvider } from '@keak/sdk';
-
-root.render(
-  <KeakProvider>
-    <App />
-  </KeakProvider>
-);`,
+// src/App.tsx
+import { useKeak, KeakToolbar } from '@keak/sdk';
+
+function App() {
+  useKeak({ debug: true });
+
+  return (
+    <div className="App">
+      {/* Your app content */}
+      <KeakToolbar position="bottom-right" />
+    </div>
+  );
+}`,
       'vite-react': `
-// src/main.tsx
-import { KeakProvider } from '@keak/sdk';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <KeakProvider>
-    <App />
-  </KeakProvider>
-);`
+// src/App.tsx
+import { useKeak, KeakToolbar } from '@keak/sdk';
+
+function App() {
+  useKeak({ debug: true });
+
+  return (
+    <>
+      {/* Your app content */}
+      <KeakToolbar position="bottom-right" />
+    </>
+  );
+}`
     };
-    
+
     return examples[this.framework] || examples['create-react-app'];
   }
 
@@ -567,6 +666,7 @@ Start your development server and look for the ${colors.bright}Keak toolbar${col
 in the ${colors.bright}bottom-right corner${colors.reset} of your app.
 
 ${colors.blue}Quick Tips:${colors.reset}
+• The toolbar auto-shows in development mode only
 • Click the toolbar to expand it
 • Use "Select" to pick elements for testing
 • Try the AI prompts for optimization ideas
@@ -574,8 +674,7 @@ ${colors.blue}Quick Tips:${colors.reset}
 
 ${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
+• We've configured your build tools automatically
 • ${colors.yellow}Restart your dev server${colors.reset} for changes to take effect
 
 ${colors.blue}🎯 Want conversion tracking?${colors.reset}
@@ -607,7 +706,7 @@ const installer = new KeakInstaller();
 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);
@@ -615,4 +714,4 @@ installer.run().catch((error) => {
     // 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}`);
   }
-});
+});