claude-code-templates 1.20.3 → 1.21.1

package/{src → cli-tool/src}/index.js

@@ -115,6 +115,18 @@ async function createClaudeConfig(options = {}) {
     return;
   }
   
+  // Handle Claude Code Studio launch
+  if (options.studio) {
+    await launchClaudeCodeStudio(options, targetDir);
+    return;
+  }
+
+  // Handle sandbox execution FIRST (before individual components)
+  if (options.sandbox) {
+    await executeSandbox(options, targetDir);
+    return;
+  }
+  
   // Handle multiple components installation (new approach)
   if (options.agent || options.command || options.mcp || options.setting || options.hook) {
     // If --workflow is used with components, treat it as YAML
@@ -155,6 +167,8 @@ async function createClaudeConfig(options = {}) {
     return;
   }
   
+  // (Sandbox execution handled earlier)
+  
   // Handle command stats analysis (both singular and plural)
   if (options.commandStats || options.commandsStats) {
     await runCommandStats(options);
@@ -362,8 +376,8 @@ async function createClaudeConfig(options = {}) {
     await runPostInstallationValidation(targetDir, templateConfig);
   }
   
-  // Handle prompt execution if provided
-  if (options.prompt) {
+  // Handle prompt execution if provided (but not in sandbox mode)
+  if (options.prompt && !options.sandbox) {
     await handlePromptExecution(options.prompt, targetDir);
   }
 }
@@ -1204,8 +1218,65 @@ function extractFrameworkFromAgent(content, agentName) {
  */
 async function getAvailableAgentsFromGitHub() {
   try {
+    // First try to use local components.json file which has all agents cached
+    const fs = require('fs');
+    const path = require('path');
+    const componentsPath = path.join(__dirname, '../../docs/components.json');
+    
+    if (fs.existsSync(componentsPath)) {
+      const componentsData = JSON.parse(fs.readFileSync(componentsPath, 'utf8'));
+      
+      if (componentsData.agents && Array.isArray(componentsData.agents)) {
+        const agents = [];
+        
+        for (const agent of componentsData.agents) {
+          // Extract category from path
+          const pathParts = agent.path.split('/');
+          const category = pathParts.length > 1 ? pathParts[0] : 'root';
+          const name = pathParts[pathParts.length - 1];
+          
+          agents.push({
+            name: name,
+            path: agent.path,
+            category: category
+          });
+        }
+        
+        console.log(chalk.green(`✅ Loaded ${agents.length} agents from local cache`));
+        return agents;
+      }
+    }
+    
+    // Fallback to GitHub API if local file not found
+    console.log(chalk.yellow('⚠️  Local components.json not found, using GitHub API...'));
+    
     const response = await fetch('https://api.github.com/repos/davila7/claude-code-templates/contents/cli-tool/components/agents');
     if (!response.ok) {
+      // Check for rate limit error
+      if (response.status === 403) {
+        const responseText = await response.text();
+        if (responseText.includes('rate limit')) {
+          console.log(chalk.red('❌ GitHub API rate limit exceeded'));
+          console.log(chalk.yellow('💡 Install locally with: npm install -g claude-code-templates'));
+          
+          // Return comprehensive fallback list
+          return [
+            { name: 'frontend-developer', path: 'development-team/frontend-developer', category: 'development-team' },
+            { name: 'backend-developer', path: 'development-team/backend-developer', category: 'development-team' },
+            { name: 'fullstack-developer', path: 'development-team/fullstack-developer', category: 'development-team' },
+            { name: 'devops-engineer', path: 'development-team/devops-engineer', category: 'development-team' },
+            { name: 'nextjs-architecture-expert', path: 'web-tools/nextjs-architecture-expert', category: 'web-tools' },
+            { name: 'react-developer', path: 'web-tools/react-developer', category: 'web-tools' },
+            { name: 'vue-developer', path: 'web-tools/vue-developer', category: 'web-tools' },
+            { name: 'data-scientist', path: 'data-analytics/data-scientist', category: 'data-analytics' },
+            { name: 'data-analyst', path: 'data-analytics/data-analyst', category: 'data-analytics' },
+            { name: 'security-auditor', path: 'security/security-auditor', category: 'security' },
+            { name: 'api-security-audit', path: 'api-security-audit', category: 'root' },
+            { name: 'database-optimization', path: 'database-optimization', category: 'root' },
+            { name: 'react-performance-optimization', path: 'react-performance-optimization', category: 'root' }
+          ];
+        }
+      }
       throw new Error(`GitHub API error: ${response.status}`);
     }
     
@@ -1244,9 +1315,12 @@ async function getAvailableAgentsFromGitHub() {
     
     return agents;
   } catch (error) {
-    console.warn('Warning: Could not fetch agents from GitHub, using fallback list');
-    // Fallback to basic list if GitHub API fails
+    console.warn('Warning: Could not fetch agents, using fallback list');
+    // Comprehensive fallback list if all methods fail
     return [
+      { name: 'frontend-developer', path: 'development-team/frontend-developer', category: 'development-team' },
+      { name: 'backend-developer', path: 'development-team/backend-developer', category: 'development-team' },
+      { name: 'fullstack-developer', path: 'development-team/fullstack-developer', category: 'development-team' },
       { name: 'api-security-audit', path: 'api-security-audit', category: 'root' },
       { name: 'database-optimization', path: 'database-optimization', category: 'root' },
       { name: 'react-performance-optimization', path: 'react-performance-optimization', category: 'root' }
@@ -1444,8 +1518,8 @@ async function installMultipleComponents(options, targetDir) {
     
     // Note: Individual components are already tracked separately in their installation functions
     
-    // Handle prompt execution if provided
-    if (options.prompt) {
+    // Handle prompt execution if provided (but not in sandbox mode)
+    if (options.prompt && !options.sandbox) {
       await handlePromptExecution(options.prompt, targetDir);
     }
     
@@ -1613,8 +1687,8 @@ async function installWorkflow(workflowHash, targetDir, options) {
       target_directory: path.relative(process.cwd(), targetDir)
     });
     
-    // Handle prompt execution if provided
-    if (options.prompt) {
+    // Handle prompt execution if provided (but not in sandbox mode)
+    if (options.prompt && !options.sandbox) {
       await handlePromptExecution(options.prompt, targetDir);
     }
     
@@ -2077,4 +2151,448 @@ async function handlePromptExecution(prompt, targetDir) {
   }
 }
 
+async function launchClaudeCodeStudio(options, targetDir) {
+  console.log(chalk.blue('\n🎨 Claude Code Studio'));
+  console.log(chalk.cyan('═══════════════════════════════════════'));
+  console.log(chalk.white('🚀 Starting Claude Code Studio interface...'));
+  console.log(chalk.gray('💡 This interface supports both local and cloud execution'));
+  
+  const { spawn } = require('child_process');
+  const open = require('open');
+  const path = require('path');
+  
+  // Start the studio server
+  const serverPath = path.join(__dirname, 'sandbox-server.js');
+  const serverProcess = spawn('node', [serverPath], {
+    stdio: 'inherit'
+  });
+  
+  // Wait a moment for server to start, then open browser
+  setTimeout(async () => {
+    try {
+      await open('http://localhost:3444');
+      console.log(chalk.green('✅ Claude Code Studio launched at http://localhost:3444'));
+      console.log(chalk.gray('💡 Choose between Local Machine or E2B Cloud execution'));
+    } catch (error) {
+      console.log(chalk.yellow('💡 Please manually open: http://localhost:3444'));
+    }
+  }, 2000);
+  
+  // Handle process cleanup
+  process.on('SIGINT', () => {
+    console.log(chalk.yellow('\n🛑 Shutting down Claude Code Studio...'));
+    serverProcess.kill();
+    process.exit(0);
+  });
+  
+  return;
+}
+
+async function executeSandbox(options, targetDir) {
+  const { sandbox, command, mcp, setting, hook, e2bApiKey, anthropicApiKey } = options;
+  let { agent, prompt } = options;
+  
+  // Validate sandbox provider
+  if (sandbox !== 'e2b') {
+    console.log(chalk.red('❌ Error: Only E2B sandbox is currently supported'));
+    console.log(chalk.yellow('💡 Available providers: e2b'));
+    console.log(chalk.gray('   Example: --sandbox e2b --prompt "Create a web app"'));
+    return;
+  }
+  
+  // Interactive agent selection if not provided
+  if (!agent) {
+    const inquirer = require('inquirer');
+    
+    console.log(chalk.blue('\n🤖 Agent Selection'));
+    console.log(chalk.cyan('═══════════════════════════════════════'));
+    console.log(chalk.gray('Select one or more agents for your task (use SPACE to select, ENTER to confirm).\n'));
+    
+    // Fetch available agents
+    console.log(chalk.gray('⏳ Fetching available agents...'));
+    const agents = await getAvailableAgentsFromGitHub();
+    
+    // Format agents for selection with full path
+    const agentChoices = agents.map(a => ({
+      name: `${a.path} ${chalk.gray(`- ${a.category}`)}`,
+      value: a.path,  // This already includes folder/agent-name format
+      short: a.path
+    }));
+    
+    // First ask if they want to select agents
+    const { wantAgents } = await inquirer.prompt([{
+      type: 'confirm',
+      name: 'wantAgents',
+      message: 'Do you want to select specific agents for this task?',
+      default: true
+    }]);
+    
+    if (wantAgents) {
+      const { selectedAgents } = await inquirer.prompt([{
+        type: 'checkbox',
+        name: 'selectedAgents',
+        message: 'Select agents (use SPACE to select, ENTER when done):',
+        choices: agentChoices,
+        pageSize: 15
+        // Removed validation - allow empty selection
+      }]);
+      
+      if (selectedAgents && selectedAgents.length > 0) {
+        // Join multiple agents with comma
+        agent = selectedAgents.join(',');
+        console.log(chalk.green(`✅ Selected agents: ${chalk.cyan(selectedAgents.join(', '))}`));
+      } else {
+        // User didn't select any agents but pressed Enter
+        console.log(chalk.yellow('⚠️ Continuing without specific agents'));
+      }
+    } else {
+      console.log(chalk.yellow('⚠️ Continuing without specific agents'));
+    }
+  }
+  
+  // Get prompt from user if not provided
+  if (!prompt) {
+    console.log(chalk.blue('\n📝 Project Requirements'));
+    console.log(chalk.cyan('═══════════════════════════════════════'));
+    console.log(chalk.gray('Describe what you want to create in detail. The more specific you are,'));
+    console.log(chalk.gray('the better Claude Code will understand your requirements.\n'));
+    
+    const inquirer = require('inquirer');
+    
+    const { userPrompt } = await inquirer.prompt([{
+      type: 'input',
+      name: 'userPrompt',
+      message: 'What would you like to create?',
+      validate: (input) => {
+        if (!input || input.trim().length < 10) {
+          return 'Please provide a more detailed description (at least 10 characters)';
+        }
+        return true;
+      }
+    }]);
+    
+    prompt = userPrompt.trim();
+    console.log(chalk.green('✅ Project requirements captured!'));
+  }
+  
+  // Load .env file if it exists (for API keys)
+  try {
+    const fs = require('fs');
+    const path = require('path');
+    const envPath = path.join(targetDir, '.env');
+    
+    if (fs.existsSync(envPath)) {
+      const envContent = fs.readFileSync(envPath, 'utf8');
+      const envVars = envContent.split('\n')
+        .filter(line => line.trim() && !line.startsWith('#'))
+        .reduce((acc, line) => {
+          const [key, ...valueParts] = line.split('=');
+          if (key && valueParts.length > 0) {
+            const value = valueParts.join('=').trim();
+            acc[key.trim()] = value;
+          }
+          return acc;
+        }, {});
+      
+      // Set environment variables if not already set
+      Object.keys(envVars).forEach(key => {
+        if (!process.env[key]) {
+          process.env[key] = envVars[key];
+        }
+      });
+    }
+  } catch (error) {
+    // Ignore .env loading errors
+  }
+  
+  // Check for API keys (either from CLI parameters or environment variables)
+  const e2bKey = e2bApiKey || process.env.E2B_API_KEY;
+  const anthropicKey = anthropicApiKey || process.env.ANTHROPIC_API_KEY;
+  
+  if (!e2bKey) {
+    console.log(chalk.red('❌ Error: E2B API key is required'));
+    console.log(chalk.yellow('💡 Options:'));
+    console.log(chalk.gray('   1. Set environment variable: E2B_API_KEY=your_key'));
+    console.log(chalk.gray('   2. Use CLI parameter: --e2b-api-key your_key'));
+    console.log(chalk.blue('   Get your key at: https://e2b.dev/dashboard'));
+    return;
+  }
+  
+  if (!anthropicKey) {
+    console.log(chalk.red('❌ Error: Anthropic API key is required'));
+    console.log(chalk.yellow('💡 Options:'));
+    console.log(chalk.gray('   1. Set environment variable: ANTHROPIC_API_KEY=your_key'));
+    console.log(chalk.gray('   2. Use CLI parameter: --anthropic-api-key your_key'));
+    console.log(chalk.blue('   Get your key at: https://console.anthropic.com'));
+    return;
+  }
+  
+  // Sandbox execution confirmation
+  console.log(chalk.blue('\n☁️ E2B Sandbox Execution'));
+  console.log(chalk.cyan('═══════════════════════════════════════'));
+  
+  // Display agents properly (handle multiple agents)
+  if (agent) {
+    const agentList = agent.split(',');
+    if (agentList.length > 1) {
+      console.log(chalk.white(`📋 Agents (${agentList.length}):`));
+      agentList.forEach(a => console.log(chalk.yellow(`   • ${a.trim()}`)));
+    } else {
+      console.log(chalk.white(`📋 Agent: ${chalk.yellow(agent)}`));
+    }
+  } else {
+    console.log(chalk.white(`📋 Agent: ${chalk.yellow('default')}`));
+  }
+  
+  const truncatedPrompt = prompt.length > 80 ? prompt.substring(0, 80) + '...' : prompt;
+  console.log(chalk.white(`💭 Prompt: ${chalk.cyan('"' + truncatedPrompt + '"')}`));
+  console.log(chalk.white(`🌐 Provider: ${chalk.green('E2B Cloud')}`));
+  console.log(chalk.gray('\n🔧 Execution details:'));
+  console.log(chalk.gray('   • Execution logs will be displayed in real-time'));
+  console.log(chalk.gray(`   • Files will be downloaded to: ${chalk.cyan(targetDir)}`));  
+  console.log(chalk.gray('   • Extended timeout: 15 minutes for complex operations'));
+  console.log(chalk.yellow('   • Press ESC anytime to cancel execution\n'));
+  
+  const inquirer = require('inquirer');
+  
+  const { shouldExecuteSandbox } = await inquirer.prompt([{
+    type: 'confirm',
+    name: 'shouldExecuteSandbox',
+    message: `Execute this agent in E2B sandbox?`,
+    default: true
+  }]);
+  
+  if (!shouldExecuteSandbox) {
+    console.log(chalk.yellow('⏹️  E2B sandbox execution cancelled by user.'));
+    return;
+  }
+  
+  try {
+    console.log(chalk.blue('🔮 Setting up E2B sandbox environment...'));
+    
+    // Install E2B sandbox component
+    const spinner = ora('Installing E2B sandbox component...').start();
+    
+    // Create .claude/sandbox directory
+    const sandboxDir = path.join(targetDir, '.claude', 'sandbox');
+    await fs.ensureDir(sandboxDir);
+    
+    // Download E2B component files from new structure
+    const baseUrl = 'https://raw.githubusercontent.com/davila7/claude-code-templates/main/cli-tool/components/sandbox/e2b';
+    
+    // Download launcher script
+    const launcherResponse = await fetch(`${baseUrl}/e2b-launcher.py`);
+    if (!launcherResponse.ok) {
+      throw new Error(`Failed to download e2b-launcher.py: ${launcherResponse.status} ${launcherResponse.statusText}`);
+    }
+    const launcherContent = await launcherResponse.text();
+    await fs.writeFile(path.join(sandboxDir, 'e2b-launcher.py'), launcherContent, { mode: 0o755 });
+    
+    // Download requirements.txt
+    const requirementsResponse = await fetch(`${baseUrl}/requirements.txt`);
+    if (!requirementsResponse.ok) {
+      throw new Error(`Failed to download requirements.txt: ${requirementsResponse.status} ${requirementsResponse.statusText}`);
+    }
+    const requirementsContent = await requirementsResponse.text();
+    await fs.writeFile(path.join(sandboxDir, 'requirements.txt'), requirementsContent);
+    
+    // Download .env.example
+    const envExampleResponse = await fetch(`${baseUrl}/.env.example`);
+    if (!envExampleResponse.ok) {
+      throw new Error(`Failed to download .env.example: ${envExampleResponse.status} ${envExampleResponse.statusText}`);
+    }
+    const envExampleContent = await envExampleResponse.text();
+    await fs.writeFile(path.join(sandboxDir, '.env.example'), envExampleContent);
+    
+    spinner.succeed('E2B sandbox component installed successfully');
+    
+    // Check for Python and install dependencies
+    const pythonSpinner = ora('Checking Python environment...').start();
+    
+    try {
+      const { spawn } = require('child_process');
+      
+      // Helper function to check Python version availability
+      const checkPythonVersion = (pythonCmd) => {
+        return new Promise((resolve) => {
+          const check = spawn(pythonCmd, ['--version'], { stdio: 'pipe' });
+          check.on('close', (code) => resolve(code === 0));
+          check.on('error', () => resolve(false));
+        });
+      };
+      
+      // Check for Python 3.11 first, fallback to python3
+      let pythonCmd = 'python3';
+      const python311Available = await checkPythonVersion('python3.11');
+      if (python311Available) {
+        pythonCmd = 'python3.11';
+        console.log(chalk.blue('✓ Using Python 3.11 (recommended for E2B)'));
+      } else {
+        console.log(chalk.yellow('⚠ Python 3.11 not found, using python3 (may have package restrictions)'));
+      }
+      
+      // Verify chosen Python version works
+      const pythonAvailable = await checkPythonVersion(pythonCmd);
+      if (!pythonAvailable) {
+        pythonSpinner.fail('Python 3 not found');
+        console.log(chalk.red('❌ Python 3.11+ is required for E2B sandbox'));
+        console.log(chalk.yellow('💡 Please install Python 3.11+ and try again'));
+        console.log(chalk.blue('   Visit: https://python.org/downloads'));
+        return;
+      }
+      
+      pythonSpinner.succeed(`Python environment ready (${pythonCmd})`);
+      
+      // Install Python dependencies
+      const depSpinner = ora('Installing E2B Python SDK...').start();
+      
+      const pipInstall = spawn(pythonCmd, ['-m', 'pip', 'install', '-r', path.join(sandboxDir, 'requirements.txt')], {
+        cwd: sandboxDir,
+        stdio: 'pipe'
+      });
+      
+      let pipOutput = '';
+      let pipError = '';
+      
+      pipInstall.stdout.on('data', (data) => {
+        pipOutput += data.toString();
+      });
+      
+      pipInstall.stderr.on('data', (data) => {
+        pipError += data.toString();
+      });
+      
+      pipInstall.on('close', async (pipCode) => {
+        if (pipCode === 0) {
+          depSpinner.succeed('E2B Python SDK installed successfully');
+          
+          // Build components string for installation inside sandbox
+          let componentsToInstall = '';
+          if (agent) componentsToInstall += ` --agent ${agent}`;
+          if (command) componentsToInstall += ` --command ${command}`;
+          if (mcp) componentsToInstall += ` --mcp ${mcp}`;
+          if (setting) componentsToInstall += ` --setting ${setting}`;
+          if (hook) componentsToInstall += ` --hook ${hook}`;
+          
+          // Execute sandbox
+          console.log(chalk.blue('🚀 Launching E2B sandbox with Claude Code...'));
+          console.log(chalk.gray(`📝 Prompt: "${prompt.substring(0, 100)}${prompt.length > 100 ? '...' : ''}"`));
+          console.log(chalk.cyan('⏱️  Extended timeout: 15 minutes for complex operations'));
+          
+          if (componentsToInstall) {
+            console.log(chalk.gray(`📦 Components to install:${componentsToInstall}`));
+          }
+          
+          // Execute sandbox and wait for completion
+          console.log(chalk.blue('🚀 Starting E2B sandbox execution...'));
+          console.log(chalk.yellow('💡 Press ESC anytime to cancel the execution'));
+          
+          await new Promise((resolve, reject) => {
+            const sandboxExecution = spawn(pythonCmd, [
+              path.join(sandboxDir, 'e2b-launcher.py'),
+              prompt,
+              componentsToInstall.trim(),
+              e2bKey,
+              anthropicKey
+            ], {
+              cwd: targetDir, // Run from user's current directory to download files there
+              stdio: 'inherit',
+              timeout: 900000, // 15 minutes timeout for complex operations
+              env: { 
+                ...process.env,
+                E2B_API_KEY: e2bKey,
+                ANTHROPIC_API_KEY: anthropicKey
+              }
+            });
+            
+            // Setup ESC key listener for cancellation
+            process.stdin.setRawMode(true);
+            process.stdin.resume();
+            process.stdin.setEncoding('utf8');
+            
+            const keyListener = (key) => {
+              // ESC key (ASCII 27)
+              if (key === '\u001b') {
+                console.log(chalk.yellow('\n⏹️  Cancelling E2B sandbox execution...'));
+                sandboxExecution.kill('SIGTERM');
+                
+                // Cleanup
+                process.stdin.setRawMode(false);
+                process.stdin.pause();
+                process.stdin.removeListener('data', keyListener);
+                
+                resolve(); // Resolve to prevent hanging
+              }
+            };
+            
+            process.stdin.on('data', keyListener);
+            
+            sandboxExecution.on('close', (sandboxCode) => {
+              // Cleanup stdin listener
+              process.stdin.setRawMode(false);
+              process.stdin.pause();
+              process.stdin.removeListener('data', keyListener);
+              
+              if (sandboxCode === 0) {
+                console.log(chalk.green('🎉 Sandbox execution completed successfully!'));
+                console.log(chalk.blue('💡 Files were created inside the E2B sandbox environment'));
+                resolve();
+              } else if (sandboxCode === null) {
+                console.log(chalk.yellow('⏹️  Sandbox execution was cancelled'));
+                resolve();
+              } else {
+                console.log(chalk.yellow(`⚠️  Sandbox execution finished with exit code ${sandboxCode}`));
+                console.log(chalk.gray('💡 Check the output above for any error details'));
+                resolve(); // Still resolve even with non-zero exit code
+              }
+            });
+            
+            sandboxExecution.on('error', (error) => {
+              // Cleanup stdin listener
+              process.stdin.setRawMode(false);
+              process.stdin.pause();
+              process.stdin.removeListener('data', keyListener);
+              
+              if (error.code === 'TIMEOUT') {
+                console.log(chalk.yellow('⏱️  Sandbox execution timed out after 15 minutes'));
+                console.log(chalk.gray('💡 This may happen with very complex prompts or large projects'));
+                console.log(chalk.blue('💡 Try breaking down your prompt into smaller, more specific requests'));
+              } else {
+                console.log(chalk.red(`❌ Error executing sandbox: ${error.message}`));
+                console.log(chalk.yellow('💡 Make sure you have set E2B_API_KEY and ANTHROPIC_API_KEY environment variables'));
+                console.log(chalk.gray('   Create a .env file in the .claude/sandbox directory with your API keys'));
+              }
+              reject(error);
+            });
+          });
+          
+        } else {
+          depSpinner.fail('Failed to install E2B Python SDK');
+          console.log(chalk.red(`❌ pip install failed with exit code ${pipCode}`));
+          if (pipError) {
+            console.log(chalk.red('Error output:'));
+            console.log(chalk.gray(pipError.trim()));
+          }
+          if (pipOutput) {
+            console.log(chalk.blue('Full output:'));
+            console.log(chalk.gray(pipOutput.trim()));
+          }
+          console.log(chalk.yellow('💡 Please install dependencies manually:'));
+          console.log(chalk.gray(`   cd ${sandboxDir}`));
+          console.log(chalk.gray(`   ${pythonCmd} -m pip install -r requirements.txt`));
+          console.log(chalk.gray(`   ${pythonCmd} -m pip install e2b`));
+        }
+      });
+      
+    } catch (error) {
+      pythonSpinner.fail('Failed to check Python environment');
+      console.log(chalk.red(`❌ Error: ${error.message}`));
+    }
+    
+  } catch (error) {
+    console.log(chalk.red(`❌ Error setting up sandbox: ${error.message}`));
+    console.log(chalk.yellow('💡 Please check your internet connection and try again'));
+  }
+}
+
 module.exports = { createClaudeConfig, showMainMenu };