claude-code-templates 1.21.12 → 1.21.13

package/api/track-download-supabase.js

@@ -0,0 +1,150 @@
+// Download tracking API endpoint using Supabase client
+import { createClient } from '@supabase/supabase-js';
+
+// Initialize Supabase client
+function getSupabaseClient() {
+  const supabaseUrl = process.env.SUPABASE_URL;
+  const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+  
+  if (!supabaseUrl || !supabaseServiceKey) {
+    throw new Error('Missing Supabase configuration');
+  }
+  
+  return createClient(supabaseUrl, supabaseServiceKey);
+}
+
+// Validate component data
+function validateComponentData(data) {
+  const { type, name, path, category } = data;
+  
+  if (!type || !name) {
+    return { valid: false, error: 'Component type and name are required' };
+  }
+  
+  const validTypes = ['agent', 'command', 'setting', 'hook', 'mcp', 'template'];
+  if (!validTypes.includes(type)) {
+    return { valid: false, error: 'Invalid component type' };
+  }
+  
+  if (name.length > 255) {
+    return { valid: false, error: 'Component name too long' };
+  }
+  
+  return { valid: true };
+}
+
+// Get IP address from request
+function getClientIP(req) {
+  return req.headers['x-forwarded-for']?.split(',')[0] ||
+         req.headers['x-real-ip'] ||
+         req.connection?.remoteAddress ||
+         req.socket?.remoteAddress ||
+         '127.0.0.1';
+}
+
+// Get country from Vercel geo headers
+function getCountry(req) {
+  return req.headers['x-vercel-ip-country'] || null;
+}
+
+export default async function handler(req, res) {
+  // Set CORS headers
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, User-Agent');
+  
+  // Handle preflight requests
+  if (req.method === 'OPTIONS') {
+    return res.status(200).json({ ok: true });
+  }
+  
+  // Only accept POST requests
+  if (req.method !== 'POST') {
+    return res.status(405).json({ 
+      error: 'Method not allowed', 
+      allowed: ['POST'] 
+    });
+  }
+  
+  try {
+    // Validate request body
+    const { type, name, path, category, cliVersion } = req.body;
+    const validation = validateComponentData({ type, name, path, category });
+    
+    if (!validation.valid) {
+      return res.status(400).json({ error: validation.error });
+    }
+    
+    // Get client information
+    const ipAddress = getClientIP(req);
+    const country = getCountry(req);
+    const userAgent = req.headers['user-agent'];
+    
+    // Initialize Supabase client
+    const supabase = getSupabaseClient();
+    
+    // Insert download record
+    const { data: insertData, error: insertError } = await supabase
+      .from('component_downloads')
+      .insert({
+        component_type: type,
+        component_name: name,
+        component_path: path,
+        category: category,
+        user_agent: userAgent,
+        ip_address: ipAddress,
+        country: country,
+        cli_version: cliVersion,
+        download_timestamp: new Date().toISOString(),
+        created_at: new Date().toISOString()
+      });
+    
+    if (insertError) {
+      console.error('Supabase insert error:', insertError);
+      throw new Error(`Database insert failed: ${insertError.message}`);
+    }
+    
+    // Update aggregated stats (upsert)
+    const { error: upsertError } = await supabase
+      .from('download_stats')
+      .upsert(
+        {
+          component_type: type,
+          component_name: name,
+          total_downloads: 1,
+          last_download: new Date().toISOString(),
+          updated_at: new Date().toISOString()
+        },
+        {
+          onConflict: 'component_type,component_name',
+          ignoreDuplicates: false
+        }
+      );
+    
+    if (upsertError) {
+      console.error('Supabase upsert error:', upsertError);
+      // Don't fail the request for stats update errors
+    }
+    
+    // Return success response
+    res.status(200).json({
+      success: true,
+      message: 'Download tracked successfully',
+      data: {
+        type,
+        name,
+        timestamp: new Date().toISOString()
+      }
+    });
+    
+  } catch (error) {
+    console.error('Download tracking error:', error);
+    
+    // Return error response
+    res.status(500).json({
+      error: 'Internal server error',
+      message: 'Failed to track download',
+      details: process.env.NODE_ENV === 'development' ? error.message : undefined
+    });
+  }
+}

package/cli-tool/Makefile

@@ -0,0 +1,102 @@
+# Makefile for claude-code-templates testing
+
+.PHONY: test test-basic test-detailed test-interactive install-dev uninstall-dev help
+
+# Install package locally for testing
+install-dev:
+	@echo "🔗 Linking package for local development..."
+	npm link
+
+# Uninstall local package
+uninstall-dev:
+	@echo "🔗 Unlinking package..."
+	npm unlink -g claude-code-templates
+
+# Run basic tests
+test-basic: install-dev
+	@echo "🧪 Running basic tests..."
+	./test-commands.sh
+
+# Run detailed tests
+test-detailed: install-dev
+	@echo "🔬 Running detailed tests..."
+	./test-detailed.sh
+
+# Test specific scenario
+test-react: install-dev
+	@echo "⚛️ Testing React scenario..."
+	@mkdir -p /tmp/test-react
+	@cd /tmp/test-react && claude-code-templates --language javascript-typescript --framework react --dry-run --yes
+	@echo "✅ React test completed"
+	@rm -rf /tmp/test-react
+
+test-vue: install-dev
+	@echo "💚 Testing Vue scenario..."
+	@mkdir -p /tmp/test-vue
+	@cd /tmp/test-vue && claude-code-templates --language javascript-typescript --framework vue --dry-run --yes
+	@echo "✅ Vue test completed"
+	@rm -rf /tmp/test-vue
+
+test-node: install-dev
+	@echo "🟢 Testing Node scenario..."
+	@mkdir -p /tmp/test-node
+	@cd /tmp/test-node && claude-code-templates --language javascript-typescript --framework node --dry-run --yes
+	@echo "✅ Node test completed"
+	@rm -rf /tmp/test-node
+
+test-hooks: install-dev
+	@echo "🔧 Testing Hooks functionality..."
+	@mkdir -p /tmp/test-hooks
+	@cd /tmp/test-hooks && claude-code-templates --language javascript-typescript --yes
+	@echo "Checking hooks installation..."
+	@cd /tmp/test-hooks && [ -f ".claude/settings.json" ] && echo "✅ settings.json created"
+	@cd /tmp/test-hooks && jq '.hooks' ".claude/settings.json" > /dev/null && echo "✅ Hooks structure valid"
+	@cd /tmp/test-hooks && [ $$(jq '.hooks | keys | length' ".claude/settings.json") -gt 0 ] && echo "✅ Hooks configured"
+	@rm -rf /tmp/test-hooks
+
+test-python-hooks: install-dev
+	@echo "🐍 Testing Python hooks..."
+	@mkdir -p /tmp/test-python-hooks
+	@cd /tmp/test-python-hooks && claude-code-templates --language python --yes
+	@cd /tmp/test-python-hooks && jq -r '.hooks.PostToolUse[].hooks[].command' ".claude/settings.json" | grep -q "black" && echo "✅ Python Black hook found"
+	@rm -rf /tmp/test-python-hooks
+
+test-all-hooks: test-hooks test-python-hooks
+	@echo "✅ All hooks tests completed"
+
+# Interactive test (manual)
+test-interactive: install-dev
+	@echo "🎯 Starting interactive test (you'll need to interact)..."
+	@mkdir -p /tmp/test-interactive
+	@cd /tmp/test-interactive && claude-code-templates --dry-run
+	@rm -rf /tmp/test-interactive
+
+# Run all tests
+test: test-basic test-detailed test-all-hooks
+	@echo "🎉 All automated tests completed!"
+
+# Check version works
+test-version:
+	@echo "📝 Testing version command..."
+	@claude-code-templates --version
+
+# Test before publish
+pre-publish: test test-version
+	@echo "✅ Ready for publishing!"
+
+# Help
+help:
+	@echo "Available commands:"
+	@echo "  make install-dev    - Install package locally for testing"
+	@echo "  make test-basic     - Run basic test suite"
+	@echo "  make test-detailed  - Run detailed test suite"
+	@echo "  make test-react     - Test React scenario"
+	@echo "  make test-vue       - Test Vue scenario"
+	@echo "  make test-node      - Test Node scenario"
+	@echo "  make test-hooks     - Test hooks functionality"
+	@echo "  make test-python-hooks - Test Python-specific hooks"
+	@echo "  make test-all-hooks - Test all hooks functionality"
+	@echo "  make test-interactive - Manual interactive test"
+	@echo "  make test           - Run all automated tests"
+	@echo "  make pre-publish    - Full test before publishing"
+	@echo "  make uninstall-dev  - Uninstall local package"

package/cli-tool/README.md

@@ -0,0 +1,126 @@
+[![npm version](https://img.shields.io/npm/v/claude-code-templates.svg)](https://www.npmjs.com/package/claude-code-templates)
+[![npm downloads](https://img.shields.io/npm/dt/claude-code-templates.svg)](https://www.npmjs.com/package/claude-code-templates)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Open Source](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://opensource.org/)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/davila7/claude-code-templates/blob/main/CONTRIBUTING.md)
+[![GitHub stars](https://img.shields.io/github/stars/davila7/claude-code-templates.svg?style=social&label=Star)](https://github.com/davila7/claude-code-templates)
+
+# Claude Code Templates
+
+**CLI tool for configuring and monitoring Claude Code** - Quick setup for any project with framework-specific commands and real-time monitoring dashboard.
+
+## 🚀 Quick Start
+
+```bash
+# Interactive setup (recommended)
+npx claude-code-templates@latest
+
+# Real-time analytics dashboard
+npx claude-code-templates@latest --analytics
+
+# System health check
+npx claude-code-templates@latest --health-check
+```
+
+## ✨ Core Features
+
+- **📋 Smart Project Setup** - Auto-detect and configure any project with framework-specific commands
+- **📊 Real-time Analytics** - Monitor Claude Code sessions with live state detection and performance metrics
+- **🔍 Health Check** - Comprehensive system validation with actionable recommendations
+- **🧩 Individual Components** - Install specialized agents, commands, and MCPs individually
+- **🌍 Global Agents** - Create AI agents accessible from anywhere using Claude Code SDK
+
+## 🎯 What You Get
+
+| Component | Description | Example |
+|-----------|-------------|---------|
+| **CLAUDE.md** | Project-specific Claude Code configuration | Framework best practices, coding standards |
+| **Commands** | Custom slash commands for development tasks | `/generate-tests`, `/check-file`, `/optimize-bundle` |
+| **Agents** | AI specialists for specific domains | API security audit, React performance, database optimization |
+| **MCPs** | External service integrations | GitHub, databases, development tools |
+| **Analytics** | Real-time monitoring dashboard | Live session tracking, usage statistics, exports |
+
+## 🛠️ Supported Technologies
+
+| Language | Frameworks | Status |
+|----------|------------|---------|
+| **JavaScript/TypeScript** | React, Vue, Angular, Node.js | ✅ Ready |
+| **Python** | Django, Flask, FastAPI | ✅ Ready |
+| **Common** | Universal configurations | ✅ Ready |
+| **Go** | Gin, Echo, Fiber | 🚧 Coming Soon |
+| **Rust** | Axum, Warp, Actix | 🚧 Coming Soon |
+
+## 🌍 Global Agents (Claude Code SDK Integration)
+
+Create AI agents that can be executed from anywhere using the Claude Code SDK:
+
+```bash
+# Create a global agent (one-time setup)
+npx claude-code-templates@latest --create-agent customer-support
+
+# Use the agent from anywhere
+customer-support "Help me with ticket #12345"
+sre-logs "Analyze error patterns in app.log"  
+code-reviewer "Review this PR for security issues"
+```
+
+### Available Global Agents
+
+| Agent | Usage | Description |
+|-------|-------|-------------|
+| `customer-support` | `customer-support "query"` | AI customer support specialist |
+| `api-security-audit` | `api-security-audit "analyze endpoints"` | Security auditing for APIs |
+| `react-performance-optimization` | `react-performance-optimization "optimize components"` | React performance expert |
+| `database-optimization` | `database-optimization "improve queries"` | Database performance tuning |
+
+### Global Agent Management
+
+```bash
+# List installed global agents
+npx claude-code-templates@latest --list-agents
+
+# Update an agent to latest version
+npx claude-code-templates@latest --update-agent customer-support
+
+# Remove an agent
+npx claude-code-templates@latest --remove-agent customer-support
+```
+
+### How It Works
+
+1. **Download Agent**: Fetches the latest agent from GitHub
+2. **Generate Executable**: Creates a Node.js script that calls Claude Code SDK
+3. **Add to PATH**: Makes the agent available globally in your shell
+4. **Ready to Use**: Execute `agent-name "your prompt"` from any directory
+
+The agents use the Claude Code SDK internally to provide specialized AI assistance with domain-specific knowledge and best practices.
+
+## 📖 Documentation
+
+**[📚 Complete Documentation](https://docs.aitmpl.com/)** - Comprehensive guides, examples, and API reference
+
+Quick links:
+- [Getting Started](https://docs.aitmpl.com/docs/intro) - Installation and first steps
+- [Project Setup](https://docs.aitmpl.com/docs/project-setup/interactive-setup) - Configure your projects
+- [Analytics Dashboard](https://docs.aitmpl.com/docs/analytics/overview) - Real-time monitoring
+- [Individual Components](https://docs.aitmpl.com/docs/components/overview) - Agents, Commands, MCPs
+- [CLI Options](https://docs.aitmpl.com/docs/cli-options) - All available commands
+
+## 🤝 Contributing
+
+We welcome contributions! Browse available templates and components at **[aitmpl.com](https://aitmpl.com)**, then check our [contributing guidelines](https://github.com/davila7/claude-code-templates/blob/main/CONTRIBUTING.md).
+
+## 📄 License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🔗 Links
+
+- **🌐 Browse Components**: [aitmpl.com](https://aitmpl.com)
+- **📚 Documentation**: [docs.aitmpl.com](https://docs.aitmpl.com)
+- **🐛 Issues**: [GitHub Issues](https://github.com/davila7/claude-code-templates/issues)
+- **💬 Discussions**: [GitHub Discussions](https://github.com/davila7/claude-code-templates/discussions)
+
+---
+
+**⭐ Found this useful? Give us a star to support the project!**

package/cli-tool/TESTING.md

@@ -0,0 +1,262 @@
+# Testing Guide for claude-code-templates
+
+This guide explains how to test the `claude-code-templates` CLI tool before publishing.
+
+## Quick Start
+
+```bash
+# Install for local testing
+npm run dev:link
+
+# Run basic tests
+npm test
+
+# Run detailed tests
+npm run test:detailed
+
+# Test specific frameworks
+npm run test:react
+npm run test:vue
+npm run test:node
+
+# Uninstall when done
+npm run dev:unlink
+```
+
+## Testing Methods
+
+### 1. **NPM Scripts (Recommended)**
+
+```bash
+# Basic test suite
+npm test
+
+# Detailed testing with all scenarios
+npm run test:detailed
+
+# Test specific frameworks
+npm run test:react    # Test React setup
+npm run test:vue      # Test Vue setup  
+npm run test:node     # Test Node.js setup
+
+# Full test suite
+npm run test:all
+```
+
+### 2. **Makefile Commands**
+
+```bash
+# Install for testing
+make install-dev
+
+# Run specific tests
+make test-basic       # Basic functionality
+make test-detailed    # Comprehensive tests
+make test-react       # React scenario
+make test-vue         # Vue scenario
+make test-node        # Node.js scenario
+
+# Interactive testing (manual)
+make test-interactive
+
+# Full pre-publish check
+make pre-publish
+
+# Cleanup
+make uninstall-dev
+```
+
+### 3. **Manual Testing**
+
+```bash
+# Link package locally
+npm link
+
+# Test different scenarios manually
+claude-code-templates --help
+claude-code-templates --version
+claude-code-templates --dry-run
+claude-code-templates --language javascript-typescript --framework react --yes
+claude-code-templates --language common --yes
+
+# Test in different directories
+mkdir test-project && cd test-project
+claude-code-templates --language javascript-typescript --framework vue --yes
+ls -la  # Check created files
+
+# Cleanup
+npm unlink -g claude-code-templates
+```
+
+### 4. **Direct Node Execution**
+
+```bash
+# Test without installing globally
+node bin/create-claude-config.js --help
+node bin/create-claude-config.js --dry-run --language javascript-typescript --framework react --yes
+```
+
+## Test Coverage
+
+### Automated Tests Include:
+
+- ✅ **Command Variants**: All CLI aliases work
+- ✅ **Help & Version**: Basic commands respond correctly
+- ✅ **Language Support**: JavaScript/TypeScript, Common, Python, Rust, Go
+- ✅ **Framework Support**: React, Vue, Angular, Node.js, None
+- ✅ **File Creation**: CLAUDE.md, .claude directory, settings.json
+- ✅ **Framework Commands**: Framework-specific commands are created
+- ✅ **Dry Run Mode**: Preview mode works without creating files
+- ✅ **Error Handling**: Invalid languages/frameworks are rejected
+
+### Framework-Specific Tests:
+
+**React:**
+- Component creation commands
+- Hooks management commands
+- State management helpers
+
+**Vue.js:**
+- Component creation commands
+- Composables helpers
+- Vue 3 patterns
+
+**Angular:**
+- Component generation
+- Service creation
+- Dependency injection patterns
+
+**Node.js:**
+- API endpoint creation
+- Middleware helpers
+- Database integration
+
+## Pre-Publish Checklist
+
+Before publishing a new version, run:
+
+```bash
+# Full automated test suite
+npm run test:all
+
+# Manual verification
+make test-interactive
+
+# Test in fresh environment
+make pre-publish
+```
+
+### Manual Verification Steps:
+
+1. **Interactive Flow**: Start `claude-code-templates` without flags and go through the full interactive setup
+2. **Error Scenarios**: Test invalid inputs and edge cases
+3. **File Content**: Verify that created files have correct content
+4. **Framework Detection**: Test in projects with existing package.json files
+5. **Permissions**: Test in different directory permission scenarios
+
+## Continuous Integration
+
+The `prepublishOnly` script automatically runs tests before publishing:
+
+```json
+{
+  "scripts": {
+    "prepublishOnly": "npm run sync && npm run test"
+  }
+}
+```
+
+This ensures that:
+- Templates are synchronized
+- All tests pass
+- Package is ready for publication
+
+## Test Environments
+
+### Local Development
+```bash
+npm run dev:link    # Install locally
+# ... test commands ...
+npm run dev:unlink  # Remove when done
+```
+
+### CI/CD Pipeline
+```bash
+npm ci              # Clean install
+npm test           # Run test suite
+npm run build      # If applicable
+```
+
+### Production Testing
+```bash
+# Test published version
+npx claude-code-templates@latest --version
+npx claude-code-templates@latest --help
+```
+
+## Debugging Tests
+
+### Verbose Output
+```bash
+# Add verbose flag to see detailed output
+claude-code-templates --language javascript-typescript --framework react --dry-run --yes --verbose
+```
+
+### Test Specific Scenarios
+```bash
+# Create isolated test environment
+mkdir /tmp/test-claude && cd /tmp/test-claude
+claude-code-templates --language javascript-typescript --framework react --yes
+ls -la .claude/commands/
+cat CLAUDE.md
+```
+
+### Check Generated Files
+```bash
+# Verify file content
+find .claude -name "*.md" -exec echo "=== {} ===" \; -exec cat {} \;
+```
+
+## Common Issues & Solutions
+
+### Permission Errors
+```bash
+# If npm link fails due to permissions
+sudo npm link  # Use with caution
+# Or use local npm prefix
+npm config set prefix ~/.npm-global
+```
+
+### Command Not Found
+```bash
+# If linked command isn't found
+which claude-code-templates
+echo $PATH
+# May need to add npm global bin to PATH
+```
+
+### Template Sync Issues
+```bash
+# Force sync before testing
+npm run sync
+```
+
+## Contributing Tests
+
+When adding new features, also add tests:
+
+1. Update `test-commands.sh` for basic scenarios
+2. Update `test-detailed.sh` for comprehensive coverage
+3. Add Makefile targets for specific test cases
+4. Update this README with new test procedures
+
+## Test File Structure
+
+```
+cli-tool/
+├── test-commands.sh      # Basic test suite
+├── test-detailed.sh      # Comprehensive tests
+├── Makefile             # Test automation
+├── TESTING.md           # This guide
+└── package.json         # NPM test scripts
+```