claude-code-templates 1.21.13 → 1.21.14

package/cli-tool/src/analytics-web/chats_mobile.html

@@ -1576,20 +1576,20 @@
             async loadMoreMessages(conversationId, isInitialLoad = false) {
                 const chatMessages = document.getElementById('chatMessages');
                 if (!chatMessages) return;
-                
+
                 // Prevent concurrent loading
                 if (this.messagesPagination.isLoading || !this.messagesPagination.hasMore) {
                     return;
                 }
-                
+
                 // Ensure we're loading for the correct conversation
                 if (this.messagesPagination.conversationId !== conversationId) {
                     return;
                 }
-                
+
                 try {
                     this.messagesPagination.isLoading = true;
-                    
+
                     if (isInitialLoad) {
                         // Show loading state for initial load
                         chatMessages.innerHTML = `
@@ -1604,16 +1604,16 @@
                         // Show loading indicator at top for infinite scroll
                         this.showMessagesLoadingIndicator(true);
                     }
-                    
+
                     // Fetch paginated messages from the server
                     const response = await fetch(`/api/conversations/${conversationId}/messages?page=${this.messagesPagination.currentPage}&limit=${this.messagesPagination.limit}`);
-                    
+
                     if (!response.ok) {
                         throw new Error(`HTTP error! status: ${response.status}`);
                     }
-                    
+
                     const messagesData = await response.json();
-                    
+
                     if (messagesData && messagesData.messages) {
                         // Update pagination state - handle both paginated and non-paginated responses
                         if (messagesData.pagination) {
@@ -1625,24 +1625,25 @@
                             this.messagesPagination.hasMore = false;
                             this.messagesPagination.currentPage = 1;
                         }
-                        
+
                         // Get existing messages or initialize
                         let existingMessages = this.loadedMessages.get(conversationId) || [];
-                        
+
                         if (isInitialLoad) {
                             // For initial load, replace all messages (newest messages first)
                             existingMessages = messagesData.messages;
+                            // Render all messages for initial load
+                            this.renderCachedMessages(existingMessages, false);
                         } else {
                             // For infinite scroll, prepend older messages to the beginning
                             existingMessages = [...messagesData.messages, ...existingMessages];
+                            // Render ONLY the new messages (not all accumulated messages)
+                            this.renderCachedMessages(messagesData.messages, true);
                         }
-                        
+
                         // Cache the combined messages
                         this.loadedMessages.set(conversationId, existingMessages);
-                        
-                        // Render messages
-                        this.renderCachedMessages(existingMessages, !isInitialLoad);
-                        
+
                         // Setup scroll listener for infinite scroll (only on initial load)
                         if (isInitialLoad) {
                             this.setupMessagesScrollListener(conversationId);
@@ -1655,7 +1656,7 @@
                             // Update status based on conversation state
                             this.analyzeConversationStatus(existingMessages);
                         }
-                        
+
                     } else if (isInitialLoad) {
                         chatMessages.innerHTML = `
                             <div class="no-messages-found">

package/cli-tool/src/console-bridge.js

@@ -338,12 +338,12 @@ class ConsoleBridge extends EventEmitter {
       if (Math.random() > 0.7) { // Simulate occasional prompts
         this.handleDetectedPrompt(`Read file
 
-  Search(pattern: "(?:Yes|No|yes|no)(?:,\\s*and\\s*don't\\s*ask\\s*again)?", path: 
-  "../../../../../../../.claude/projects/-Users-danipower-Proyectos-Github-claude-code-templates", include: "*.jsonl")
+  Search(pattern: "(?:Yes|No|yes|no)(?:,\\s*and\\s*don't\\s*ask\\s*again)?", path:
+  "../../../../../../../.claude/projects/-Users-username-Projects-project-name", include: "*.jsonl")
 
 Do you want to proceed?
 ❯ 1. Yes
-  2. Yes, and add /Users/danipower/.claude/projects/-Users-danipower-Proyectos-Github-claude-code-templates as a working directory for this session
+  2. Yes, and add ~/.claude/projects/-Users-username-Projects-project-name as a working directory for this session
   3. No, and tell Claude what to do differently (esc)`);
       }
       

package/cli-tool/src/index.js

@@ -15,6 +15,7 @@ const { runMCPStats } = require('./mcp-stats');
 const { runAnalytics } = require('./analytics');
 const { startChatsMobile } = require('./chats-mobile');
 const { runHealthCheck } = require('./health-check');
+const { runPluginDashboard } = require('./plugin-dashboard');
 const { trackingService } = require('./tracking-service');
 const { createGlobalAgent, listGlobalAgents, removeGlobalAgent, updateGlobalAgent } = require('./sdk/global-agent-manager');
 
@@ -128,7 +129,7 @@ async function createClaudeConfig(options = {}) {
   }
   
   // Handle multiple components installation (new approach)
-  if (options.agent || options.command || options.mcp || options.setting || options.hook) {
+  if (options.agent || options.command || options.mcp || options.setting || options.hook || options.skill) {
     // If --workflow is used with components, treat it as YAML
     if (options.workflow) {
       options.yaml = options.workflow;
@@ -193,7 +194,14 @@ async function createClaudeConfig(options = {}) {
     await runAnalytics(options);
     return;
   }
-  
+
+  // Handle plugin dashboard
+  if (options.plugins) {
+    trackingService.trackAnalyticsDashboard({ page: 'plugins', source: 'command_line' });
+    await runPluginDashboard(options);
+    return;
+  }
+
   // Handle chats dashboard (now points to mobile chats interface)
   if (options.chats) {
     trackingService.trackAnalyticsDashboard({ page: 'chats-mobile', source: 'command_line' });
@@ -1383,6 +1391,131 @@ async function getAvailableAgentsFromGitHub() {
   }
 }
 
+async function installIndividualSkill(skillName, targetDir, options) {
+  console.log(chalk.blue(`💡 Installing skill: ${skillName}`));
+
+  try {
+    // Skills can be in format: "skill-name" or "category/skill-name"
+    // Extract the actual skill name (last part of the path)
+    const skillBaseName = skillName.includes('/') ? skillName.split('/').pop() : skillName;
+
+    // Use GitHub API to download ALL files and directories for the skill
+    const githubApiUrl = `https://api.github.com/repos/davila7/claude-code-templates/contents/cli-tool/components/skills/${skillName}`;
+
+    console.log(chalk.gray(`📥 Downloading skill from GitHub (main branch)...`));
+
+    const downloadedFiles = {};
+
+    // Recursive function to download all files and directories
+    async function downloadDirectory(apiUrl, relativePath = '') {
+      try {
+        const response = await fetch(apiUrl, {
+          headers: {
+            'Accept': 'application/vnd.github.v3+json',
+            'User-Agent': 'claude-code-templates'
+          }
+        });
+
+        if (!response.ok) {
+          if (response.status === 404) {
+            console.log(chalk.red(`❌ Skill "${skillName}" not found`));
+            console.log(chalk.yellow('💡 Tip: Use format "category/skill-name" (e.g., creative-design/algorithmic-art)'));
+            console.log(chalk.yellow('Available categories: creative-design, development, document-processing, enterprise-communication'));
+            return false;
+          }
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const contents = await response.json();
+
+        for (const item of contents) {
+          const itemPath = relativePath ? `${relativePath}/${item.name}` : item.name;
+
+          if (item.type === 'file') {
+            // Download file
+            try {
+              const fileResponse = await fetch(item.download_url);
+              if (fileResponse.ok) {
+                const fileContent = await fileResponse.text();
+                const isExecutable = item.name.endsWith('.py') || item.name.endsWith('.sh');
+
+                const targetPath = `.claude/skills/${skillBaseName}/${itemPath}`;
+                downloadedFiles[targetPath] = {
+                  content: fileContent,
+                  executable: isExecutable
+                };
+                console.log(chalk.green(`✓ Downloaded: ${itemPath}`));
+              }
+            } catch (err) {
+              console.log(chalk.gray(`  (Could not download ${itemPath})`));
+            }
+          } else if (item.type === 'dir') {
+            // Recursively download directory contents
+            console.log(chalk.gray(`📂 Downloading directory: ${itemPath}/`));
+            await downloadDirectory(item.url, itemPath);
+          }
+        }
+
+        return true;
+      } catch (error) {
+        console.log(chalk.gray(`  (Could not access GitHub API: ${error.message})`));
+        return false;
+      }
+    }
+
+    // Download all files from the skill directory
+    const success = await downloadDirectory(githubApiUrl);
+    if (!success) {
+      return false;
+    }
+
+    // Check if SKILL.md was downloaded (required)
+    const skillMdPath = `.claude/skills/${skillBaseName}/SKILL.md`;
+    if (!downloadedFiles[skillMdPath]) {
+      console.log(chalk.red(`❌ SKILL.md not found in skill directory`));
+      return false;
+    }
+
+    // Create .claude/skills/skill-name directory (Anthropic standard structure)
+    const skillsDir = path.join(targetDir, '.claude', 'skills');
+    await fs.ensureDir(skillsDir);
+
+    // Write all downloaded files
+    for (const [filePath, fileData] of Object.entries(downloadedFiles)) {
+      const fullPath = path.join(targetDir, filePath);
+      await fs.ensureDir(path.dirname(fullPath));
+      await fs.writeFile(fullPath, fileData.content, 'utf8');
+
+      if (fileData.executable) {
+        await fs.chmod(fullPath, '755');
+      }
+    }
+
+    const targetFile = path.join(skillsDir, skillBaseName, 'SKILL.md');
+
+    if (!options.silent) {
+      console.log(chalk.green(`✅ Skill "${skillName}" installed successfully!`));
+      console.log(chalk.cyan(`📁 Installed to: ${path.relative(targetDir, targetFile)}`));
+      console.log(chalk.cyan(`📄 Total files downloaded: ${Object.keys(downloadedFiles).length}`));
+      console.log(chalk.cyan(`📦 Downloaded from: ${githubApiUrl}`));
+    }
+
+    // Track successful skill installation
+    trackingService.trackDownload('skill', skillName, {
+      installation_type: 'individual_skill',
+      target_directory: path.relative(process.cwd(), targetDir),
+      source: 'github_main',
+      total_files: Object.keys(downloadedFiles).length
+    });
+
+    return true;
+
+  } catch (error) {
+    console.log(chalk.red(`❌ Error installing skill: ${error.message}`));
+    return false;
+  }
+}
+
 /**
  * Install multiple components with optional YAML workflow
  */
@@ -1395,7 +1528,8 @@ async function installMultipleComponents(options, targetDir) {
       commands: [],
       mcps: [],
       settings: [],
-      hooks: []
+      hooks: [],
+      skills: []
     };
     
     // Parse comma-separated values for each component type
@@ -1423,8 +1557,13 @@ async function installMultipleComponents(options, targetDir) {
       const hooksInput = Array.isArray(options.hook) ? options.hook.join(',') : options.hook;
       components.hooks = hooksInput.split(',').map(h => h.trim()).filter(h => h);
     }
-    
-    const totalComponents = components.agents.length + components.commands.length + components.mcps.length + components.settings.length + components.hooks.length;
+
+    if (options.skill) {
+      const skillsInput = Array.isArray(options.skill) ? options.skill.join(',') : options.skill;
+      components.skills = skillsInput.split(',').map(s => s.trim()).filter(s => s);
+    }
+
+    const totalComponents = components.agents.length + components.commands.length + components.mcps.length + components.settings.length + components.hooks.length + components.skills.length;
     
     if (totalComponents === 0) {
       console.log(chalk.yellow('⚠️  No components specified to install.'));
@@ -1437,6 +1576,7 @@ async function installMultipleComponents(options, targetDir) {
     console.log(chalk.gray(`   MCPs: ${components.mcps.length}`));
     console.log(chalk.gray(`   Settings: ${components.settings.length}`));
     console.log(chalk.gray(`   Hooks: ${components.hooks.length}`));
+    console.log(chalk.gray(`   Skills: ${components.skills.length}`));
     
     // Counter for successfully installed components
     let successfullyInstalled = 0;
@@ -1518,14 +1658,21 @@ async function installMultipleComponents(options, targetDir) {
     // Install hooks (using shared installation locations)
     for (const hook of components.hooks) {
       console.log(chalk.gray(`   Installing hook: ${hook}`));
-      const hookSuccess = await installIndividualHook(hook, targetDir, { 
-        ...options, 
-        silent: true, 
-        sharedInstallLocations: sharedInstallLocations 
+      const hookSuccess = await installIndividualHook(hook, targetDir, {
+        ...options,
+        silent: true,
+        sharedInstallLocations: sharedInstallLocations
       });
       if (hookSuccess > 0) successfullyInstalled++;
     }
-    
+
+    // Install skills
+    for (const skill of components.skills) {
+      console.log(chalk.gray(`   Installing skill: ${skill}`));
+      const skillSuccess = await installIndividualSkill(skill, targetDir, { ...options, silent: true });
+      if (skillSuccess) successfullyInstalled++;
+    }
+
     // Handle YAML workflow if provided
     if (options.yaml) {
       console.log(chalk.blue('\n📄 Processing workflow YAML...'));