claude-code-templates 1.15.0 → 1.15.1

package/src/index.js

@@ -13,6 +13,7 @@ const { runCommandStats } = require('./command-stats');
 const { runHookStats } = require('./hook-stats');
 const { runMCPStats } = require('./mcp-stats');
 const { runAnalytics } = require('./analytics');
+const { startChatsMobile } = require('./chats-mobile');
 const { runHealthCheck } = require('./health-check');
 const { trackingService } = require('./tracking-service');
 
@@ -30,9 +31,14 @@ async function showMainMenu() {
         short: 'Analytics Dashboard'
       },
       {
-        name: '💬 Chats Dashboard - View and analyze your Claude conversations',
+        name: '💬 Chats Mobile - AI-first mobile interface for conversations',
         value: 'chats',
-        short: 'Chats Dashboard'
+        short: 'Chats Mobile'
+      },
+      {
+        name: '🤖 Agents Dashboard - View and analyze Claude conversations with agent tools',
+        value: 'agents',
+        short: 'Agents Dashboard'
       },
       {
         name: '⚙️ Project Setup - Configure Claude Code for your project',
@@ -56,12 +62,20 @@ async function showMainMenu() {
   }
   
   if (initialChoice.action === 'chats') {
-    console.log(chalk.blue('💬 Launching Claude Code Chats Dashboard...'));
+    console.log(chalk.blue('💬 Launching Claude Code Mobile Chats...'));
+    trackingService.trackAnalyticsDashboard({ page: 'chats-mobile', source: 'interactive_menu' });
+    await startChatsMobile({});
+    return;
+  }
+  
+  if (initialChoice.action === 'agents') {
+    console.log(chalk.blue('🤖 Launching Claude Code Agents Dashboard...'));
     trackingService.trackAnalyticsDashboard({ page: 'agents', source: 'interactive_menu' });
     await runAnalytics({ openTo: 'agents' });
     return;
   }
   
+  
   if (initialChoice.action === 'health') {
     console.log(chalk.blue('🔍 Running Health Check...'));
     const healthResult = await runHealthCheck();
@@ -90,19 +104,29 @@ async function showMainMenu() {
 async function createClaudeConfig(options = {}) {
   const targetDir = options.directory || process.cwd();
   
-  // Handle individual component installation
-  if (options.agent) {
-    await installIndividualAgent(options.agent, targetDir, options);
+  // Validate --tunnel usage
+  if (options.tunnel && !options.analytics && !options.chats && !options.agents && !options.chatsMobile) {
+    console.log(chalk.red('❌ Error: --tunnel can only be used with --analytics, --chats, or --chats-mobile'));
+    console.log(chalk.yellow('💡 Examples:'));
+    console.log(chalk.gray('  cct --analytics --tunnel'));
+    console.log(chalk.gray('  cct --chats --tunnel'));
+    console.log(chalk.gray('  cct --chats-mobile'));
     return;
   }
   
-  if (options.command) {
-    await installIndividualCommand(options.command, targetDir, options);
+  // Handle multiple components installation (new approach)
+  if (options.agent || options.command || options.mcp) {
+    // If --workflow is used with components, treat it as YAML
+    if (options.workflow) {
+      options.yaml = options.workflow;
+    }
+    await installMultipleComponents(options, targetDir);
     return;
   }
   
-  if (options.mcp) {
-    await installIndividualMCP(options.mcp, targetDir, options);
+  // Handle workflow installation (hash-based)
+  if (options.workflow) {
+    await installWorkflow(options.workflow, targetDir, options);
     return;
   }
   
@@ -131,13 +155,27 @@ async function createClaudeConfig(options = {}) {
     return;
   }
   
-  // Handle chats/agents dashboard
-  if (options.chats || options.agents) {
+  // Handle chats dashboard (now points to mobile chats interface)
+  if (options.chats) {
+    trackingService.trackAnalyticsDashboard({ page: 'chats-mobile', source: 'command_line' });
+    await startChatsMobile(options);
+    return;
+  }
+  
+  // Handle agents dashboard (separate from chats)
+  if (options.agents) {
     trackingService.trackAnalyticsDashboard({ page: 'agents', source: 'command_line' });
     await runAnalytics({ ...options, openTo: 'agents' });
     return;
   }
   
+  // Handle mobile chats interface
+  if (options.chatsMobile) {
+    trackingService.trackAnalyticsDashboard({ page: 'chats-mobile', source: 'command_line' });
+    await startChatsMobile(options);
+    return;
+  }
+  
   // Handle health check
   let shouldRunSetup = false;
   if (options.healthCheck || options.health || options.check || options.verify) {
@@ -175,8 +213,8 @@ async function createClaudeConfig(options = {}) {
   
   let config;
   if (options.yes) {
-    // Use defaults
-    const selectedLanguage = options.language || projectInfo.detectedLanguage || 'common';
+    // Use defaults - prioritize --template over --language for backward compatibility
+    const selectedLanguage = options.template || options.language || projectInfo.detectedLanguage || 'common';
     
     // Check if selected language is coming soon
     if (selectedLanguage && TEMPLATES_CONFIG[selectedLanguage] && TEMPLATES_CONFIG[selectedLanguage].comingSoon) {
@@ -265,7 +303,7 @@ async function createClaudeConfig(options = {}) {
   console.log(chalk.white('  3. Start using Claude Code with: claude'));
   console.log('');
   console.log(chalk.blue('🌐 View all available templates at: https://aitmpl.com/'));
-  console.log(chalk.blue('📖 Read the complete documentation at: https://aitmpl.com/docu/'));
+  console.log(chalk.blue('📖 Read the complete documentation at: https://docs.aitmpl.com/'));
   
   if (config.language !== 'common') {
     console.log(chalk.yellow(`💡 Language-specific features for ${config.language} have been configured`));
@@ -298,6 +336,11 @@ async function createClaudeConfig(options = {}) {
   if (!options.dryRun) {
     await runPostInstallationValidation(targetDir, templateConfig);
   }
+  
+  // Handle prompt execution if provided
+  if (options.prompt) {
+    await handlePromptExecution(options.prompt, targetDir);
+  }
 }
 
 // Individual component installation functions
@@ -305,15 +348,23 @@ async function installIndividualAgent(agentName, targetDir, options) {
   console.log(chalk.blue(`🤖 Installing agent: ${agentName}`));
   
   try {
-    // Download agent directly from GitHub
-    const githubUrl = `https://raw.githubusercontent.com/davila7/claude-code-templates/main/cli-tool/components/agents/${agentName}.md`;
+    // Support both category/agent-name and direct agent-name formats
+    let githubUrl;
+    if (agentName.includes('/')) {
+      // Category/agent format: deep-research-team/academic-researcher
+      githubUrl = `https://raw.githubusercontent.com/davila7/claude-code-templates/main/cli-tool/components/agents/${agentName}.md`;
+    } else {
+      // Direct agent format: api-security-audit
+      githubUrl = `https://raw.githubusercontent.com/davila7/claude-code-templates/main/cli-tool/components/agents/${agentName}.md`;
+    }
+    
     console.log(chalk.gray(`📥 Downloading from GitHub (main branch)...`));
     
     const response = await fetch(githubUrl);
     if (!response.ok) {
       if (response.status === 404) {
         console.log(chalk.red(`❌ Agent "${agentName}" not found`));
-        console.log(chalk.yellow('Available agents: api-security-audit, database-optimization, react-performance-optimization'));
+        await showAvailableAgents();
         return;
       }
       throw new Error(`HTTP ${response.status}: ${response.statusText}`);
@@ -321,35 +372,32 @@ async function installIndividualAgent(agentName, targetDir, options) {
     
     const agentContent = await response.text();
     
-    // For agents, they are typically part of templates, so we need to determine
-    // the appropriate language/framework and install the complete template
-    const language = extractLanguageFromAgent(agentContent, agentName);
-    const framework = extractFrameworkFromAgent(agentContent, agentName);
-    
-    console.log(chalk.yellow(`📝 Agent "${agentName}" is part of ${language}/${framework} template`));
-    console.log(chalk.blue('🚀 Installing complete template with this agent...'));
-    
-    // Install the template that contains this agent (avoid recursion)
-    const setupOptions = {
-      ...options,
-      language,
-      framework,
-      yes: true,
-      targetDirectory: targetDir,
-      agent: null // Remove agent to avoid recursion
-    };
-    delete setupOptions.agent;
-    await createClaudeConfig(setupOptions);
+    // Create .claude/agents directory if it doesn't exist
+    const agentsDir = path.join(targetDir, '.claude', 'agents');
+    await fs.ensureDir(agentsDir);
     
-    console.log(chalk.green(`✅ Agent "${agentName}" installed successfully!`));
-    console.log(chalk.cyan(`📦 Downloaded from: ${githubUrl}`));
+    // Write the agent file - always to flat .claude/agents directory
+    let fileName;
+    if (agentName.includes('/')) {
+      const [category, filename] = agentName.split('/');
+      fileName = filename; // Extract just the filename, ignore category for installation
+    } else {
+      fileName = agentName;
+    }
+    
+    const targetFile = path.join(agentsDir, `${fileName}.md`);
+    await fs.writeFile(targetFile, agentContent, 'utf8');
+    
+    if (!options.silent) {
+      console.log(chalk.green(`✅ Agent "${agentName}" installed successfully!`));
+      console.log(chalk.cyan(`📁 Installed to: ${path.relative(targetDir, targetFile)}`));
+      console.log(chalk.cyan(`📦 Downloaded from: ${githubUrl}`));
+    }
     
     // Track successful agent installation
     trackingService.trackDownload('agent', agentName, {
-      language: language,
-      framework: framework,
-      installation_type: 'individual_agent',
-      template_installed: true,
+      installation_type: 'individual_component',
+      target_directory: path.relative(process.cwd(), targetDir),
       source: 'github_main'
     });
     
@@ -362,8 +410,16 @@ async function installIndividualCommand(commandName, targetDir, options) {
   console.log(chalk.blue(`⚡ Installing command: ${commandName}`));
   
   try {
-    // Download command directly from GitHub
-    const githubUrl = `https://raw.githubusercontent.com/davila7/claude-code-templates/main/cli-tool/components/commands/${commandName}.md`;
+    // Support both category/command-name and direct command-name formats
+    let githubUrl;
+    if (commandName.includes('/')) {
+      // Category/command format: security/vulnerability-scan
+      githubUrl = `https://raw.githubusercontent.com/davila7/claude-code-templates/main/cli-tool/components/commands/${commandName}.md`;
+    } else {
+      // Direct command format: check-file
+      githubUrl = `https://raw.githubusercontent.com/davila7/claude-code-templates/main/cli-tool/components/commands/${commandName}.md`;
+    }
+    
     console.log(chalk.gray(`📥 Downloading from GitHub (main branch)...`));
     
     const response = await fetch(githubUrl);
@@ -382,13 +438,24 @@ async function installIndividualCommand(commandName, targetDir, options) {
     const commandsDir = path.join(targetDir, '.claude', 'commands');
     await fs.ensureDir(commandsDir);
     
-    // Write the command file
-    const targetFile = path.join(commandsDir, `${commandName}.md`);
+    // Write the command file - always to flat .claude/commands directory
+    let fileName;
+    if (commandName.includes('/')) {
+      const [category, filename] = commandName.split('/');
+      fileName = filename; // Extract just the filename, ignore category for installation
+    } else {
+      fileName = commandName;
+    }
+    
+    const targetFile = path.join(commandsDir, `${fileName}.md`);
+    
     await fs.writeFile(targetFile, commandContent, 'utf8');
     
-    console.log(chalk.green(`✅ Command "${commandName}" installed successfully!`));
-    console.log(chalk.cyan(`📁 Installed to: ${path.relative(targetDir, targetFile)}`));
-    console.log(chalk.cyan(`📦 Downloaded from: ${githubUrl}`));
+    if (!options.silent) {
+      console.log(chalk.green(`✅ Command "${commandName}" installed successfully!`));
+      console.log(chalk.cyan(`📁 Installed to: ${path.relative(targetDir, targetFile)}`));
+      console.log(chalk.cyan(`📦 Downloaded from: ${githubUrl}`));
+    }
     
     // Track successful command installation
     trackingService.trackDownload('command', commandName, {
@@ -406,8 +473,16 @@ async function installIndividualMCP(mcpName, targetDir, options) {
   console.log(chalk.blue(`🔌 Installing MCP: ${mcpName}`));
   
   try {
-    // Download MCP directly from GitHub
-    const githubUrl = `https://raw.githubusercontent.com/davila7/claude-code-templates/main/cli-tool/components/mcps/${mcpName}.json`;
+    // Support both category/mcp-name and direct mcp-name formats
+    let githubUrl;
+    if (mcpName.includes('/')) {
+      // Category/mcp format: database/mysql-integration
+      githubUrl = `https://raw.githubusercontent.com/davila7/claude-code-templates/main/cli-tool/components/mcps/${mcpName}.json`;
+    } else {
+      // Direct mcp format: web-fetch
+      githubUrl = `https://raw.githubusercontent.com/davila7/claude-code-templates/main/cli-tool/components/mcps/${mcpName}.json`;
+    }
+    
     console.log(chalk.gray(`📥 Downloading from GitHub (main branch)...`));
     
     const response = await fetch(githubUrl);
@@ -422,6 +497,15 @@ async function installIndividualMCP(mcpName, targetDir, options) {
     
     const mcpConfigText = await response.text();
     const mcpConfig = JSON.parse(mcpConfigText);
+
+    // Remove description field from each MCP server before merging
+    if (mcpConfig.mcpServers) {
+      for (const serverName in mcpConfig.mcpServers) {
+        if (mcpConfig.mcpServers[serverName] && typeof mcpConfig.mcpServers[serverName] === 'object') {
+          delete mcpConfig.mcpServers[serverName].description;
+        }
+      }
+    }
     
     // Check if .mcp.json exists in target directory
     const targetMcpFile = path.join(targetDir, '.mcp.json');
@@ -432,18 +516,28 @@ async function installIndividualMCP(mcpName, targetDir, options) {
       console.log(chalk.yellow('📝 Existing .mcp.json found, merging configurations...'));
     }
     
-    // Merge configurations
+    // Merge configurations with deep merge for mcpServers
     const mergedConfig = {
       ...existingConfig,
       ...mcpConfig
     };
     
+    // Deep merge mcpServers specifically to avoid overwriting existing servers
+    if (existingConfig.mcpServers && mcpConfig.mcpServers) {
+      mergedConfig.mcpServers = {
+        ...existingConfig.mcpServers,
+        ...mcpConfig.mcpServers
+      };
+    }
+    
     // Write the merged configuration
     await fs.writeJson(targetMcpFile, mergedConfig, { spaces: 2 });
     
-    console.log(chalk.green(`✅ MCP "${mcpName}" installed successfully!`));
-    console.log(chalk.cyan(`📁 Configuration merged into: ${path.relative(targetDir, targetMcpFile)}`));
-    console.log(chalk.cyan(`📦 Downloaded from: ${githubUrl}`));
+    if (!options.silent) {
+      console.log(chalk.green(`✅ MCP "${mcpName}" installed successfully!`));
+      console.log(chalk.cyan(`📁 Configuration merged into: ${path.relative(targetDir, targetMcpFile)}`));
+      console.log(chalk.cyan(`📦 Downloaded from: ${githubUrl}`));
+    }
     
     // Track successful MCP installation
     trackingService.trackDownload('mcp', mcpName, {
@@ -485,4 +579,798 @@ function extractFrameworkFromAgent(content, agentName) {
   return 'none';
 }
 
+/**
+ * Fetch available agents dynamically from GitHub repository
+ */
+async function getAvailableAgentsFromGitHub() {
+  try {
+    const response = await fetch('https://api.github.com/repos/davila7/claude-code-templates/contents/cli-tool/components/agents');
+    if (!response.ok) {
+      throw new Error(`GitHub API error: ${response.status}`);
+    }
+    
+    const contents = await response.json();
+    const agents = [];
+    
+    for (const item of contents) {
+      if (item.type === 'file' && item.name.endsWith('.md')) {
+        // Direct agent file
+        agents.push({
+          name: item.name.replace('.md', ''),
+          path: item.name.replace('.md', ''),
+          category: 'root'
+        });
+      } else if (item.type === 'dir') {
+        // Category directory, fetch its contents
+        try {
+          const categoryResponse = await fetch(`https://api.github.com/repos/davila7/claude-code-templates/contents/cli-tool/components/agents/${item.name}`);
+          if (categoryResponse.ok) {
+            const categoryContents = await categoryResponse.json();
+            for (const categoryItem of categoryContents) {
+              if (categoryItem.type === 'file' && categoryItem.name.endsWith('.md')) {
+                agents.push({
+                  name: categoryItem.name.replace('.md', ''),
+                  path: `${item.name}/${categoryItem.name.replace('.md', '')}`,
+                  category: item.name
+                });
+              }
+            }
+          }
+        } catch (error) {
+          console.warn(`Warning: Could not fetch category ${item.name}:`, error.message);
+        }
+      }
+    }
+    
+    return agents;
+  } catch (error) {
+    console.warn('Warning: Could not fetch agents from GitHub, using fallback list');
+    // Fallback to basic list if GitHub API fails
+    return [
+      { 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' }
+    ];
+  }
+}
+
+/**
+ * Install multiple components with optional YAML workflow
+ */
+async function installMultipleComponents(options, targetDir) {
+  console.log(chalk.blue('🔧 Installing multiple components...'));
+  
+  try {
+    const components = {
+      agents: [],
+      commands: [],
+      mcps: []
+    };
+    
+    // Parse comma-separated values for each component type
+    if (options.agent) {
+      const agentsInput = Array.isArray(options.agent) ? options.agent.join(',') : options.agent;
+      components.agents = agentsInput.split(',').map(a => a.trim()).filter(a => a);
+    }
+    
+    if (options.command) {
+      const commandsInput = Array.isArray(options.command) ? options.command.join(',') : options.command;
+      components.commands = commandsInput.split(',').map(c => c.trim()).filter(c => c);
+    }
+    
+    if (options.mcp) {
+      const mcpsInput = Array.isArray(options.mcp) ? options.mcp.join(',') : options.mcp;
+      components.mcps = mcpsInput.split(',').map(m => m.trim()).filter(m => m);
+    }
+    
+    const totalComponents = components.agents.length + components.commands.length + components.mcps.length;
+    
+    if (totalComponents === 0) {
+      console.log(chalk.yellow('⚠️  No components specified to install.'));
+      return;
+    }
+    
+    console.log(chalk.cyan(`📦 Installing ${totalComponents} components:`));
+    console.log(chalk.gray(`   Agents: ${components.agents.length}`));
+    console.log(chalk.gray(`   Commands: ${components.commands.length}`));
+    console.log(chalk.gray(`   MCPs: ${components.mcps.length}`));
+    
+    // Install agents
+    for (const agent of components.agents) {
+      console.log(chalk.gray(`   Installing agent: ${agent}`));
+      await installIndividualAgent(agent, targetDir, { ...options, silent: true });
+    }
+    
+    // Install commands
+    for (const command of components.commands) {
+      console.log(chalk.gray(`   Installing command: ${command}`));
+      await installIndividualCommand(command, targetDir, { ...options, silent: true });
+    }
+    
+    // Install MCPs
+    for (const mcp of components.mcps) {
+      console.log(chalk.gray(`   Installing MCP: ${mcp}`));
+      await installIndividualMCP(mcp, targetDir, { ...options, silent: true });
+    }
+    
+    // Handle YAML workflow if provided
+    if (options.yaml) {
+      console.log(chalk.blue('\n📄 Processing workflow YAML...'));
+      
+      try {
+        // Decode the YAML from base64
+        const yamlContent = Buffer.from(options.yaml, 'base64').toString('utf8');
+        
+        // Parse workflow name from YAML (try to extract from name: field)
+        let workflowName = 'custom-workflow';
+        const nameMatch = yamlContent.match(/name:\s*["']?([^"'\n]+)["']?/);
+        if (nameMatch) {
+          workflowName = nameMatch[1].trim().replace(/[^a-z0-9]/gi, '_').toLowerCase();
+        }
+        
+        // Save YAML to workflows directory
+        const workflowsDir = path.join(targetDir, '.claude', 'workflows');
+        const workflowFile = path.join(workflowsDir, `${workflowName}.yaml`);
+        
+        await fs.ensureDir(workflowsDir);
+        await fs.writeFile(workflowFile, yamlContent, 'utf8');
+        
+        console.log(chalk.green(`✅ Workflow YAML saved: ${path.relative(targetDir, workflowFile)}`));
+        
+      } catch (yamlError) {
+        console.log(chalk.red(`❌ Error processing YAML: ${yamlError.message}`));
+      }
+    }
+    
+    console.log(chalk.green(`\n✅ Successfully installed ${totalComponents} components!`));
+    console.log(chalk.cyan(`📁 Components installed to: .claude/`));
+    
+    if (options.yaml) {
+      console.log(chalk.cyan(`📄 Workflow file created in: .claude/workflows/`));
+      console.log(chalk.cyan(`🚀 Use the workflow file with Claude Code to execute the complete setup`));
+    }
+    
+    // Track installation
+    trackingService.trackDownload('multi-component', 'batch', {
+      installation_type: 'multi-component',
+      agents_count: components.agents.length,
+      commands_count: components.commands.length,
+      mcps_count: components.mcps.length,
+      has_yaml: !!options.yaml,
+      target_directory: path.relative(process.cwd(), targetDir)
+    });
+    
+    // Handle prompt execution if provided
+    if (options.prompt) {
+      await handlePromptExecution(options.prompt, targetDir);
+    }
+    
+  } catch (error) {
+    console.log(chalk.red(`❌ Error installing components: ${error.message}`));
+  }
+}
+
+/**
+ * Show available agents organized by category
+ */
+async function showAvailableAgents() {
+  console.log(chalk.yellow('\n📋 Available Agents:'));
+  console.log(chalk.gray('Use format: category/agent-name or just agent-name for root level\n'));
+  console.log(chalk.gray('⏳ Fetching latest agents from GitHub...\n'));
+  
+  const agents = await getAvailableAgentsFromGitHub();
+  
+  // Group agents by category
+  const groupedAgents = agents.reduce((acc, agent) => {
+    const category = agent.category === 'root' ? '🤖 General Agents' : `📁 ${agent.category}`;
+    if (!acc[category]) acc[category] = [];
+    acc[category].push(agent);
+    return acc;
+  }, {});
+  
+  // Display agents by category
+  Object.entries(groupedAgents).forEach(([category, categoryAgents]) => {
+    console.log(chalk.cyan(category));
+    categoryAgents.forEach(agent => {
+      console.log(chalk.gray(`  • ${agent.path}`));
+    });
+    console.log('');
+  });
+  
+  console.log(chalk.blue('Examples:'));
+  console.log(chalk.gray('  cct --agent api-security-audit'));
+  console.log(chalk.gray('  cct --agent deep-research-team/academic-researcher'));
+  console.log('');
+}
+
+/**
+ * Install workflow from hash
+ */
+async function installWorkflow(workflowHash, targetDir, options) {
+  console.log(chalk.blue(`🔧 Installing workflow from hash: ${workflowHash}`));
+  
+  try {
+    // Extract hash from format #hash
+    const hash = workflowHash.startsWith('#') ? workflowHash.substring(1) : workflowHash;
+    
+    if (!hash || hash.length < 3) {
+      throw new Error('Invalid workflow hash format. Expected format: #hash');
+    }
+    
+    console.log(chalk.gray(`📥 Fetching workflow configuration...`));
+    
+    // Fetch workflow configuration from a remote service
+    // For now, we'll simulate this by using a local storage approach
+    // In production, this would fetch from a workflow registry
+    const workflowData = await fetchWorkflowData(hash);
+    
+    if (!workflowData) {
+      throw new Error(`Workflow with hash "${hash}" not found. Please check the hash and try again.`);
+    }
+    
+    console.log(chalk.green(`✅ Workflow found: ${workflowData.name}`));
+    console.log(chalk.cyan(`📝 Description: ${workflowData.description}`));
+    console.log(chalk.cyan(`🏷️  Tags: ${workflowData.tags.join(', ')}`));
+    console.log(chalk.cyan(`📊 Steps: ${workflowData.steps.length}`));
+    
+    // Install all required components
+    const installPromises = [];
+    
+    // Group components by type
+    const agents = workflowData.steps.filter(step => step.type === 'agent');
+    const commands = workflowData.steps.filter(step => step.type === 'command');
+    const mcps = workflowData.steps.filter(step => step.type === 'mcp');
+    
+    console.log(chalk.blue(`\n📦 Installing workflow components...`));
+    console.log(chalk.gray(`   Agents: ${agents.length}`));
+    console.log(chalk.gray(`   Commands: ${commands.length}`));
+    console.log(chalk.gray(`   MCPs: ${mcps.length}`));
+    
+    // Install components from workflow data (not from GitHub)
+    if (workflowData.components) {
+      console.log(chalk.blue(`📦 Installing components from workflow package...`));
+      
+      // Install agents
+      if (workflowData.components.agent) {
+        for (const agent of workflowData.components.agent) {
+          console.log(chalk.gray(`   Installing agent: ${agent.name}`));
+          await installComponentFromWorkflow(agent, 'agent', targetDir, options);
+        }
+      }
+      
+      // Install commands  
+      if (workflowData.components.command) {
+        for (const command of workflowData.components.command) {
+          console.log(chalk.gray(`   Installing command: ${command.name}`));
+          await installComponentFromWorkflow(command, 'command', targetDir, options);
+        }
+      }
+      
+      // Install MCPs
+      if (workflowData.components.mcp) {
+        for (const mcp of workflowData.components.mcp) {
+          console.log(chalk.gray(`   Installing MCP: ${mcp.name}`));
+          await installComponentFromWorkflow(mcp, 'mcp', targetDir, options);
+        }
+      }
+    } else {
+      // Fallback to old method for legacy workflows
+      console.log(chalk.yellow(`⚠️  Using legacy component installation method...`));
+      
+      // Install agents
+      for (const agent of agents) {
+        console.log(chalk.gray(`   Installing agent: ${agent.name}`));
+        await installIndividualAgent(agent.path, targetDir, { ...options, silent: true });
+      }
+      
+      // Install commands
+      for (const command of commands) {
+        console.log(chalk.gray(`   Installing command: ${command.name}`));
+        await installIndividualCommand(command.path, targetDir, { ...options, silent: true });
+      }
+    }
+    
+    // Install MCPs
+    for (const mcp of mcps) {
+      console.log(chalk.gray(`   Installing MCP: ${mcp.name}`));
+      await installIndividualMCP(mcp.path, targetDir, { ...options, silent: true });
+    }
+    
+    // Generate and save workflow YAML
+    let yamlContent;
+    if (workflowData.yaml) {
+      // Use YAML from workflow package
+      yamlContent = workflowData.yaml;
+    } else {
+      // Generate YAML (legacy)
+      yamlContent = generateWorkflowYAML(workflowData);
+    }
+    
+    const workflowsDir = path.join(targetDir, '.claude', 'workflows');
+    const workflowFile = path.join(workflowsDir, `${workflowData.name.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.yaml`);
+    
+    // Ensure .claude/workflows directory exists
+    await fs.ensureDir(workflowsDir);
+    await fs.writeFile(workflowFile, yamlContent, 'utf8');
+    
+    console.log(chalk.green(`\n✅ Workflow "${workflowData.name}" installed successfully!`));
+    console.log(chalk.cyan(`📁 Components installed to: .claude/`));
+    console.log(chalk.cyan(`📄 Workflow file: ${path.relative(targetDir, workflowFile)}`));
+    console.log(chalk.cyan(`🚀 Use the workflow file with Claude Code to execute the complete workflow`));
+    
+    // Track successful workflow installation
+    trackingService.trackDownload('workflow', hash, {
+      installation_type: 'workflow',
+      workflow_name: workflowData.name,
+      components_count: workflowData.steps.length,
+      agents_count: agents.length,
+      commands_count: commands.length,
+      mcps_count: mcps.length,
+      target_directory: path.relative(process.cwd(), targetDir)
+    });
+    
+    // Handle prompt execution if provided
+    if (options.prompt) {
+      await handlePromptExecution(options.prompt, targetDir);
+    }
+    
+  } catch (error) {
+    console.log(chalk.red(`❌ Error installing workflow: ${error.message}`));
+    
+    if (error.message.includes('not found')) {
+      console.log(chalk.yellow('\n💡 Possible solutions:'));
+      console.log(chalk.gray('   • Check that the workflow hash is correct'));
+      console.log(chalk.gray('   • Verify the workflow was generated successfully'));
+      console.log(chalk.gray('   • Try generating a new workflow from the builder'));
+    }
+  }
+}
+
+/**
+ * Decompress string with Unicode support
+ */
+function decompressString(compressed) {
+  try {
+    // Simple Base64 decoding with Unicode support
+    const decoded = Buffer.from(compressed, 'base64').toString('utf8');
+    // Convert URI encoded characters back
+    return decodeURIComponent(decoded.replace(/(.)/g, function(m, p) {
+      let code = p.charCodeAt(0).toString(16).toUpperCase();
+      if (code.length < 2) code = '0' + code;
+      return '%' + code;
+    }));
+  } catch (error) {
+    throw new Error(`Decompression failed: ${error.message}`);
+  }
+}
+
+/**
+ * Fetch workflow data from hash
+ * In production, this would fetch from a remote workflow registry
+ * For now, we'll simulate this functionality
+ */
+async function fetchWorkflowData(hash) {
+  try {
+    // Check if hash contains encoded data (new format: shortHash_encodedData)
+    if (hash.includes('_')) {
+      console.log(chalk.green('🔓 Decoding workflow from hash...'));
+      
+      const [shortHash, encodedData] = hash.split('_', 2);
+      
+      if (!encodedData) {
+        throw new Error('Invalid hash format: missing encoded data');
+      }
+      
+      // Decode compressed data
+      let decodedData;
+      try {
+        // First try to decompress the data (new compressed format)
+        const decompressedString = decompressString(encodedData);
+        decodedData = JSON.parse(decompressedString);
+      } catch (decompressError) {
+        // Fallback to old Base64 format for compatibility
+        try {
+          const decodedString = decodeURIComponent(escape(atob(encodedData)));
+          decodedData = JSON.parse(decodedString);
+        } catch (base64Error) {
+          throw new Error('Failed to decode workflow data from hash');
+        }
+      }
+      
+      // Validate decoded data structure
+      if (!decodedData.metadata || !decodedData.steps || !decodedData.components) {
+        throw new Error('Invalid workflow data structure in hash');
+      }
+      
+      console.log(chalk.green('✅ Workflow decoded successfully!'));
+      console.log(chalk.gray(`   Short hash: ${shortHash}`));
+      console.log(chalk.gray(`   Timestamp: ${decodedData.timestamp}`));
+      console.log(chalk.gray(`   Version: ${decodedData.version}`));
+      
+      // Convert to expected format
+      return {
+        name: decodedData.metadata.name,
+        description: decodedData.metadata.description,
+        tags: decodedData.metadata.tags || [],
+        version: decodedData.version,
+        hash: shortHash,
+        steps: decodedData.steps,
+        components: decodedData.components,
+        yaml: decodedData.yaml,
+        timestamp: decodedData.timestamp
+      };
+    }
+    
+    // Legacy demo workflows for testing
+    if (hash === 'demo123' || hash === 'abc123test') {
+      console.log(chalk.green('🎯 Demo workflow found! Using sample configuration...'));
+      return {
+        name: 'Full Stack Development Workflow',
+        description: 'Complete workflow for setting up a full-stack development environment with React frontend, Node.js backend, and security auditing',
+        tags: ['development', 'fullstack', 'react', 'security'],
+        version: '1.0.0',
+        hash: hash,
+        steps: [
+          {
+            type: 'agent',
+            name: 'frontend-developer',
+            path: 'development-team/frontend-developer',
+            category: 'development-team',
+            description: 'Setup React frontend development environment'
+          },
+          {
+            type: 'agent',
+            name: 'backend-architect',
+            path: 'development-team/backend-architect',
+            category: 'development-team',
+            description: 'Configure Node.js backend architecture'
+          },
+          {
+            type: 'command',
+          name: 'generate-tests',
+          path: 'testing/generate-tests',
+          category: 'testing',
+          description: 'Generate comprehensive test suite'
+        },
+        {
+          type: 'agent',
+          name: 'api-security-audit',
+          path: 'security/api-security-audit',
+          category: 'security',
+          description: 'Perform security audit on APIs'
+        },
+        {
+          type: 'mcp',
+          name: 'github-integration',
+          path: 'integration/github-integration',
+          category: 'integration',
+          description: 'Setup GitHub integration for repository management'
+        }
+      ]
+    };
+  }
+  
+    // This is where we would integrate with a workflow registry API
+    // For now, return null to indicate workflow not found for other hashes
+    console.log(chalk.yellow('\n⚠️  Workflow registry not yet implemented.'));
+    console.log(chalk.gray('To test with demo workflow, use hash: demo123'));
+    console.log(chalk.gray('Example: --workflow "#demo123"'));
+    
+    return null;
+    
+  } catch (error) {
+    console.error(chalk.red(`❌ Error fetching workflow data: ${error.message}`));
+    return null;
+  }
+}
+
+/**
+ * Install component from workflow package data
+ */
+async function installComponentFromWorkflow(componentData, type, targetDir, options) {
+  try {
+    let targetPath;
+    let fileName = componentData.name;
+    
+    if (type === 'agent') {
+      // Create .claude/agents directory if it doesn't exist
+      const agentsDir = path.join(targetDir, '.claude', 'agents');
+      await fs.ensureDir(agentsDir);
+      
+      // For agents, handle category subdirectories
+      if (componentData.category && componentData.category !== 'general') {
+        const categoryDir = path.join(agentsDir, componentData.category);
+        await fs.ensureDir(categoryDir);
+        targetPath = path.join(categoryDir, `${fileName}.md`);
+      } else {
+        targetPath = path.join(agentsDir, `${fileName}.md`);
+      }
+      
+    } else if (type === 'command') {
+      // Create .claude/commands directory if it doesn't exist
+      const commandsDir = path.join(targetDir, '.claude', 'commands');
+      await fs.ensureDir(commandsDir);
+      targetPath = path.join(commandsDir, `${fileName}.md`);
+      
+    } else if (type === 'mcp') {
+      // For MCPs, merge with existing .mcp.json
+      const targetMcpFile = path.join(targetDir, '.mcp.json');
+      let existingConfig = {};
+      
+      if (await fs.pathExists(targetMcpFile)) {
+        existingConfig = await fs.readJson(targetMcpFile);
+      }
+      
+      // Parse MCP content and merge
+      let mcpConfig;
+      try {
+        mcpConfig = JSON.parse(componentData.content);
+      } catch (error) {
+        throw new Error(`Failed to parse MCP content for ${componentData.name}: ${error.message}`);
+      }
+      
+      // Remove description field before merging (CLI processing)
+      if (mcpConfig.mcpServers) {
+        for (const serverName in mcpConfig.mcpServers) {
+          if (mcpConfig.mcpServers[serverName] && typeof mcpConfig.mcpServers[serverName] === 'object') {
+            delete mcpConfig.mcpServers[serverName].description;
+          }
+        }
+      }
+      
+      // Merge configurations
+      const mergedConfig = {
+        ...existingConfig,
+        ...mcpConfig
+      };
+      
+      // Deep merge mcpServers
+      if (existingConfig.mcpServers && mcpConfig.mcpServers) {
+        mergedConfig.mcpServers = {
+          ...existingConfig.mcpServers,
+          ...mcpConfig.mcpServers
+        };
+      }
+      
+      await fs.writeJson(targetMcpFile, mergedConfig, { spaces: 2 });
+      return;
+    }
+    
+    // Write content for agents and commands
+    if (targetPath) {
+      await fs.writeFile(targetPath, componentData.content, 'utf8');
+    }
+    
+  } catch (error) {
+    console.error(chalk.red(`❌ Error installing ${type} "${componentData.name}": ${error.message}`));
+    throw error;
+  }
+}
+
+/**
+ * Generate workflow YAML from workflow data
+ */
+function generateWorkflowYAML(workflowData) {
+  const yaml = `#═══════════════════════════════════════════════════════════════════════════════
+# 🤖 CLAUDE CODE WORKFLOW CONFIGURATION
+#═══════════════════════════════════════════════════════════════════════════════
+#
+# WORKFLOW: ${workflowData.name}
+# DESCRIPTION: ${workflowData.description}
+# GENERATED: ${new Date().toISOString()}
+# HASH: ${workflowData.hash || 'generated'}
+#
+#═══════════════════════════════════════════════════════════════════════════════
+# 📋 INSTRUCTIONS FOR CLAUDE CODE
+#═══════════════════════════════════════════════════════════════════════════════
+#
+# This is a WORKFLOW EXECUTION FILE for Claude Code. When you encounter this file,
+# you should execute it as a complete automated workflow. Here's how:
+#
+# 🎯 EXECUTION BEHAVIOR:
+# 1. READ this entire YAML file to understand the workflow structure
+# 2. EXECUTE each step in the exact order listed below (sequential mode)
+# 3. For AGENTS: Use the agent specified to perform the task described
+# 4. For COMMANDS: Execute the Claude Code command as specified
+# 5. For MCPs: Ensure the MCP server is available and use it as needed
+# 6. STOP if any step fails (on_error: stop)
+# 7. PROVIDE progress updates after each step completion
+#
+# 🔧 STEP EXECUTION PATTERN:
+# - Announce: "Executing Step X: [step.name]"
+# - Action: Perform the task using the specified component
+# - Confirm: "✅ Step X completed successfully"
+# - Continue to next step
+#
+# 💡 IMPORTANT NOTES:
+# - All components are already installed in .claude/ directories
+# - Each step builds upon the previous ones
+# - Follow the descriptions exactly as specified
+# - Use confirmation_required: true for user approval before starting
+# - Maintain context and outputs between steps for workflow continuity
+#
+#═══════════════════════════════════════════════════════════════════════════════
+
+name: "${workflowData.name}"
+description: "${workflowData.description}"
+tags: [${workflowData.tags.map(tag => `"${tag}"`).join(', ')}]
+version: "${workflowData.version || '1.0.0'}"
+
+#═══════════════════════════════════════════════════════════════════════════════
+# 🚀 WORKFLOW STEPS - EXECUTE IN ORDER
+#═══════════════════════════════════════════════════════════════════════════════
+
+steps:
+${workflowData.steps.map((step, index) => `  - step: ${index + 1}
+    type: ${step.type}
+    name: "${step.name}"
+    path: "${step.path}"
+    category: "${step.category}"
+    description: "${step.description}"
+    
+    # CLAUDE CODE INSTRUCTIONS FOR THIS STEP:
+    claude_instructions: |
+      Execute this step using the ${step.type} located at .claude/${step.type}s/${step.name}.${step.type === 'mcp' ? 'json' : 'md'}
+      Task: ${step.description}
+      ${step.type === 'agent' ? 'Use this agent to perform the specified task with full context from previous steps.' : ''}
+      ${step.type === 'command' ? 'Execute this command with appropriate parameters based on workflow context.' : ''}
+      ${step.type === 'mcp' ? 'Ensure MCP server is running and utilize its capabilities for the task.' : ''}
+      
+    action_template: |
+      echo "🔄 Executing Step ${index + 1}: ${step.name}"
+      echo "📝 Task: ${step.description}"
+      echo "🎯 Using ${step.type}: ${step.path}"
+      # [CLAUDE CODE WILL REPLACE THIS WITH ACTUAL EXECUTION]
+      echo "✅ Step ${index + 1} completed successfully"
+`).join('\n')}
+
+#═══════════════════════════════════════════════════════════════════════════════
+# ⚙️ EXECUTION CONFIGURATION
+#═══════════════════════════════════════════════════════════════════════════════
+
+execution:
+  mode: "sequential"           # Execute steps one by one, in order
+  on_error: "stop"            # Stop workflow if any step fails
+  timeout: 300                # Maximum time per step (5 minutes)
+  continue_on_warning: true   # Continue if warnings occur
+  save_outputs: true          # Save outputs between steps for context
+
+#═══════════════════════════════════════════════════════════════════════════════
+# 📦 INSTALLED COMPONENTS REFERENCE
+#═══════════════════════════════════════════════════════════════════════════════
+
+components:
+  agents: [${workflowData.steps.filter(s => s.type === 'agent').map(s => `"${s.path}"`).join(', ')}]
+  commands: [${workflowData.steps.filter(s => s.type === 'command').map(s => `"${s.path}"`).join(', ')}]
+  mcps: [${workflowData.steps.filter(s => s.type === 'mcp').map(s => `"${s.path}"`).join(', ')}]
+
+#═══════════════════════════════════════════════════════════════════════════════
+# 🤖 CLAUDE CODE INTEGRATION SETTINGS
+#═══════════════════════════════════════════════════════════════════════════════
+
+claudecode:
+  workflow_mode: true         # Enable workflow execution mode
+  auto_execute: false         # Require user confirmation before starting
+  confirmation_required: true # Ask user before each step
+  show_progress: true         # Display progress indicators
+  save_context: true          # Maintain context between steps
+  
+  # WORKFLOW EXECUTION INSTRUCTIONS FOR CLAUDE:
+  execution_instructions: |
+    When executing this workflow:
+    
+    1. 🎯 PREPARATION PHASE:
+       - Confirm all components are installed in .claude/ directories
+       - Verify user wants to execute this workflow
+       - Explain what will happen in each step
+    
+    2. 🚀 EXECUTION PHASE:
+       - Execute each step sequentially
+       - Use the exact agent/command/mcp specified for each step
+       - Maintain outputs and context between steps
+       - Provide clear progress updates
+    
+    3. ✅ COMPLETION PHASE:
+       - Summarize what was accomplished
+       - Highlight any outputs or files created
+       - Suggest next steps if applicable
+    
+    4. ❌ ERROR HANDLING:
+       - If a step fails, stop execution immediately
+       - Provide clear error message and suggested fixes
+       - Offer to retry the failed step after fixes
+    
+    Remember: This workflow was designed to work as a complete automation.
+    Each step builds upon the previous ones. Execute with confidence!
+
+#═══════════════════════════════════════════════════════════════════════════════
+# 📋 WORKFLOW SUMMARY
+#═══════════════════════════════════════════════════════════════════════════════
+# 
+# This workflow will execute ${workflowData.steps.length} steps in sequence:
+${workflowData.steps.map((step, index) => `# ${index + 1}. ${step.description} (${step.type}: ${step.name})`).join('\n')}
+#
+# Total estimated time: ${Math.ceil(workflowData.steps.length * 2)} minutes
+# Components required: ${workflowData.steps.filter(s => s.type === 'agent').length} agents, ${workflowData.steps.filter(s => s.type === 'command').length} commands, ${workflowData.steps.filter(s => s.type === 'mcp').length} MCPs
+#═══════════════════════════════════════════════════════════════════════════════
+`;
+  
+  return yaml;
+}
+
+/**
+ * Handle prompt execution in Claude Code
+ */
+async function handlePromptExecution(prompt, targetDir) {
+  console.log(chalk.blue('\n🎯 Prompt execution requested...'));
+  
+  // Ask user if they want to execute the prompt in Claude Code
+  const { shouldExecute } = await inquirer.prompt([{
+    type: 'confirm',
+    name: 'shouldExecute',
+    message: `Do you want to execute this prompt in Claude Code?\n${chalk.cyan(`"${prompt}"`)}`,
+    default: true
+  }]);
+  
+  if (!shouldExecute) {
+    console.log(chalk.yellow('⏹️  Prompt execution skipped by user.'));
+    return;
+  }
+  
+  console.log(chalk.blue('🚀 Preparing to launch Claude Code with your prompt...'));
+  
+  try {
+    // Check if claude command is available in PATH
+    const { spawn } = require('child_process');
+    const open = require('open');
+    
+    // First try to execute claude command directly
+    const claudeProcess = spawn('claude', [prompt], {
+      cwd: targetDir,
+      stdio: ['inherit', 'inherit', 'inherit'],
+      shell: true
+    });
+    
+    claudeProcess.on('error', async (error) => {
+      if (error.code === 'ENOENT') {
+        // Claude command not found, try alternative approaches
+        console.log(chalk.yellow('⚠️  Claude Code CLI not found in PATH.'));
+        console.log(chalk.blue('💡 Alternative ways to execute your prompt:'));
+        console.log(chalk.gray('   1. Install Claude Code CLI: https://claude.ai/code'));
+        console.log(chalk.gray('   2. Copy and paste this prompt in Claude Code interface:'));
+        console.log(chalk.cyan(`\n   "${prompt}"\n`));
+        
+        // Ask if user wants to open Claude Code web interface
+        const { openWeb } = await inquirer.prompt([{
+          type: 'confirm',
+          name: 'openWeb',
+          message: 'Would you like to open Claude Code in your browser?',
+          default: true
+        }]);
+        
+        if (openWeb) {
+          await open('https://claude.ai/code');
+          console.log(chalk.green('✅ Claude Code opened in your browser!'));
+          console.log(chalk.cyan(`Don't forget to paste your prompt: "${prompt}"`));
+        }
+      } else {
+        throw error;
+      }
+    });
+    
+    claudeProcess.on('close', (code) => {
+      if (code === 0) {
+        console.log(chalk.green('✅ Claude Code executed successfully!'));
+      } else if (code !== null) {
+        console.log(chalk.yellow(`⚠️  Claude Code exited with code ${code}`));
+      }
+    });
+    
+  } catch (error) {
+    console.log(chalk.red(`❌ Error executing prompt: ${error.message}`));
+    console.log(chalk.blue('💡 You can manually execute this prompt in Claude Code:'));
+    console.log(chalk.cyan(`"${prompt}"`));
+  }
+}
+
 module.exports = { createClaudeConfig, showMainMenu };