58 Commits

Author SHA1 Message Date
Dani 66be089cb7 Implement comprehensive shopping cart system for Claude Code Templates
- Add Shopify-style cart sidebar with drag-from-right animation
- Implement Add to Stack buttons for all component cards
- Create dynamic command generation for agents, commands, and MCPs
- Add cart state management with localStorage persistence
- Implement notification system with auto-dismiss
- Add social sharing for X/Twitter and Threads
- Create overlay copy buttons for command text in cards and cart
- Optimize card layout grid system (4 columns desktop, 2 tablet, 1 mobile)
- Add cart floating button with item count badge
- Fix scroll prevention and notification persistence issues
- Remove quotes from agent parameters in generated commands
- Implement compact cart item design with Clear All repositioning
- Add comprehensive cart styling with responsive design
- Include share functionality with proper URL encoding
- Update CLI package version to 1.14.16 for npm compatibility

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-06 08:53:34 -04:00
Dani 1c01a28cc0 Add workflos drop-zone items 2025-08-05 04:10:32 -04:00
Dani 4059c65153 social-preview in root 2025-08-04 18:49:19 -04:00
Dani d0d3ea0c7f social media links in header 2025-08-04 18:36:13 -04:00
Dani 921d55efb5 add commands and mcps 2025-08-04 14:58:32 -04:00
Dani 4b0953fdcd add mcp descriptions 2025-08-04 13:55:52 -04:00
Dani 53c1ddc054 add mcp-server-atlassian-bitbucket 2025-08-04 10:34:08 -04:00
Dani 317e9d602b remove .json extension from path 2025-08-04 10:19:46 -04:00
Dani ec5ba6b488 refactor: move MCP description field inside mcpServer configuration
- Move description field from root level to inside individual mcpServer configs
- Update Python script to extract descriptions from mcpServer objects
- Enhance CLI to remove description fields from within mcpServer configs
- Ensure only clean mcpServers configuration is written to .mcp.json
- Maintain frontend display functionality with descriptions from mcpServer objects

Structure change:
FROM: { "description": "...", "mcpServers": { "server": { ... } } }
TO:   { "mcpServers": { "server": { "description": "...", ... } } }

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-04 09:45:01 -04:00
Dani 8c0a027e7b feat: add description field support for MCP components
- Add description field to MCP JSON files for frontend display
- Update generate_components_json.py to extract MCP descriptions
- Modify CLI to exclude description field from downloaded .mcp.json files
- Update frontend to display MCP descriptions in component cards
- Implement separate description handling for MCPs vs other components

Key changes:
• MCP JSON files now include description field above mcpServers
• Python script extracts descriptions into separate field in components.json
• CLI automatically removes description field during installation
• Frontend shows descriptive text for MCP cards using description field
• Maintains backward compatibility with existing MCP installations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-04 09:37:46 -04:00
Dani 64e028bcd9 fix: remove Git merge conflict markers from components.json
- Clean up Git merge conflict markers that were causing JSON parse errors
- Fix syntax error at line 911 (position 424673)
- Restore proper JSON structure for MCP components
- Resolves data-loader.js error when loading components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-04 09:03:21 -04:00
Dani f0ef2bbc80 resolve: merge conflict in components.json
Keep local version with complete component data including:
- All templates with .claude folder structure
- MCP components with descriptions
- Framework-specific commands and agents

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-04 09:00:21 -04:00
Dani 95409bfd5b chore: clean up untracked files and update components data
- Update components.json with latest data
- Clean up temporary test directories and files
- Prepare for merge to main branch

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-04 08:59:03 -04:00
Daniel Avila e9b18ba38e feat: comprehensive templates system enhancement and code organization (#61)
* feat: implement comprehensive Workflow Builder system

## 🔧 Workflow Builder Web Interface
- **Drag-and-Drop Canvas**: Visual workflow building with sortable steps
- **Component Library**: Browse and search all agents, commands, and MCPs
- **Real-time Preview**: Live workflow statistics and step management
- **Hash Generation**: Secure workflow encoding with CryptoJS
- **YAML Export**: Generate executable workflow files
- **Modal Interface**: Professional workflow generation dialog

## ⚡ CLI Workflow Installation
- **--workflow option**: Install workflows from hash (format: #hash)
- **Batch Installation**: Download all workflow components automatically
- **Silent Mode**: Clean output when installing multiple components
- **YAML Generation**: Create step-by-step execution files
- **Error Handling**: Comprehensive validation and user guidance

## 🎨 UI/UX Features
- **Responsive Design**: Works on desktop and mobile devices
- **Professional Styling**: Clean, modern interface with proper theming
- **Interactive Components**: Hover effects, drag feedback, and animations
- **Search Functionality**: Filter components by name and category
- **Navigation Integration**: Added workflows link to main header

## 🔗 Architecture
- **Modular Frontend**: Separate CSS and JS files for maintainability
- **GitHub Integration**: Dynamic component loading from organized categories
- **Local Storage**: Workflow state management for hash generation
- **Component Tracking**: Analytics integration for usage monitoring

## 🚀 Workflow Execution Flow
1. **Build**: Create workflows in drag-and-drop interface
2. **Generate**: Export hash and YAML configuration
3. **Install**: Use CLI with generated hash to download all components
4. **Execute**: Use YAML file with Claude Code for step-by-step automation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: improve workflow organization and hide UI during testing

## 📁 Workflow Organization
- **Dedicated Workflows Folder**: Create `.claude/workflows/` directory for better organization
- **Clean File Structure**: Separate workflow YAML files from other components
- **Improved Path Display**: Show correct relative path in installation success message

## 🔒 UI Access Control
- **Hidden Workflows Button**: Comment out workflows navigation button during testing phase
- **Controlled Rollout**: Keep feature accessible via direct URL while testing
- **Clean Header**: Maintain professional appearance while feature is in beta

## 🧪 Testing Results
- ✅ Workflow files now saved to `.claude/workflows/filename.yaml`
- ✅ Directory structure: agents/, commands/, workflows/ for better organization
- ✅ UI button hidden but functionality fully working
- ✅ Direct URL access still available for testing: `/docs/workflows.html`

Workflow installation now creates:
```
.claude/
├── agents/
├── commands/
├── workflows/
│   └── workflow_name.yaml
└── .mcp.json
```

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: add comprehensive Claude Code workflow execution instructions

## 🤖 Smart Workflow YAML Generation
- **Detailed Instructions**: Complete guide for Claude Code on how to execute workflows
- **Step-by-Step Guidance**: Exact execution pattern and behavior expectations
- **Context Preservation**: Instructions to maintain outputs between workflow steps
- **Error Handling**: Clear error management and recovery procedures
- **Progress Tracking**: Built-in progress reporting and status updates

## 📋 YAML Structure Enhancements
- **Professional Headers**: Clear visual separation with decorative borders
- **Execution Phases**: Preparation, Execution, Completion, and Error Handling
- **Component References**: Direct paths to installed agents, commands, and MCPs
- **Configuration Settings**: Timeout, error handling, and confirmation options
- **Summary Section**: Overview of steps, timing, and component requirements

## 🎯 Claude Code Integration
- **Workflow Mode**: Enable dedicated workflow execution behavior
- **Sequential Execution**: Step-by-step processing with dependency management
- **User Confirmation**: Optional approval before each step execution
- **Context Continuity**: Maintain state and outputs throughout workflow
- **Component Validation**: Verify all required components are installed

## 📝 Instruction Categories
1. **Execution Behavior**: READ → EXECUTE → CONFIRM → CONTINUE
2. **Step Pattern**: Announce → Action → Confirm → Next
3. **Component Usage**: Agents, Commands, MCPs with specific file locations
4. **Error Management**: Stop on failure with clear diagnostics
5. **Progress Updates**: Real-time status and completion reporting

## 🚀 Generated YAML Features
- Clear visual structure with section dividers
- Detailed per-step Claude instructions
- File path references (.claude/agents/, .claude/commands/, etc.)
- Execution templates for each step type
- Comprehensive workflow summary with timing estimates
- Production-ready configuration settings

This ensures Claude Code will understand exactly how to execute workflows automatically, maintaining context between steps and providing a smooth automation experience.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: enhance workflow builder UI with professional design and accordion interface

## 🎨 Professional Header Design
- **Elegant Layout**: Gradient background with proper spacing and shadows
- **Logo Section**: Enhanced icon and gradient text styling
- **Navigation**: Clean nav buttons with icons and active states
- **Responsive**: Proper container and mobile-friendly design

## 🗂️ Accordion Component Organization
- **Main Categories**: Agents, Commands, MCPs with collapsible sections
- **Subcategory Accordions**: Each component type organized by functionality
- **Component Counts**: Real-time counters for each section and subcategory
- **Visual Hierarchy**: Clear nested structure with proper indentation

## 📋 Component Details Modal
- **Info Button**: Clean "ℹ️" button on each component item
- **Comprehensive Details**: Type, category, path, and usage information
- **Dynamic Description**: Fetches and displays component descriptions from GitHub
- **Usage Commands**: Copy-to-clipboard functionality for CLI commands
- **Add to Workflow**: Direct addition from modal to workflow canvas

## 🔧 GitHub API Error Handling
- **Rate Limit Protection**: Graceful handling of 403 errors
- **Fallback Behavior**: Continue loading other components if one fails
- **User-Friendly**: No more console errors for API limitations
- **Robust Loading**: Better error handling throughout the app

## 🎯 UI/UX Improvements
- **Clean Component Cards**: Removed category badges, added details button
- **Smooth Animations**: Accordion open/close with arrow rotation
- **Better Typography**: Improved font sizes and spacing
- **Professional Modals**: Enhanced modal design with proper structure
- **Consistent Styling**: Unified color scheme and spacing

## 📱 Responsive Features
- **Mobile-Friendly**: Accordions work well on smaller screens
- **Touch-Friendly**: Proper button sizes and touch targets
- **Flexible Layout**: Adapts to different screen sizes
- **Accessible**: Proper keyboard navigation and ARIA attributes

The workflow builder now provides a professional, intuitive interface for creating complex automation workflows with a clean, organized component library.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: restore subcategory filters and card flip functionality

- Add updateCategorySubFilters() method to dynamically generate category filter buttons
- Restore availableCategories system to track component categories
- Implement setCategoryFilter() for category-specific filtering
- Update generateComponentCard() to use template-card structure with flip functionality
- Add collectAvailableCategories() to populate category sets
- Add global setCategoryFilter function for onclick events
- Restore card flip event listeners and ESC key handling
- Update grid class names for proper CSS styling

* feat: restore all missing functionality from original script.js

✅ ERRORES SOLUCIONADOS:

1. **Conteo de items en filter-buttons**:
   - Agregada función updateFilterCounts() que muestra (X) items en cada botón
   - Se actualiza automáticamente cuando cambian los datos

2. **Descripción de cards acortada**:
   - getComponentDescription() ahora trunca a 120 caracteres máximo
   - Mantiene las cards con el tamaño correcto para el layout

3. **Cards "Add New" restauradas**:
   - createAddComponentCard() genera cards de "Add New" por tipo
   - Se muestran al inicio de cada filtro (agents, commands, mcps)
   - Incluyen iconos y colores específicos por tipo

4. **Lógica compleja de Templates restaurada**:
   - displayTemplates() usa la lógica original de script.js
   - createTemplateCard() y createAddTemplateCard() para templates
   - fetchTemplatesConfig() y parseTemplatesConfig() para GitHub data
   - Framework icons mapping completo
   - Cards con flip animation y estructura compleja

📋 FUNCIONALIDAD COMPLETA RESTAURADA:
- ✅ Subcategory filters (category-filter-row)
- ✅ Card styling con flip animations
- ✅ Available categories system
- ✅ Filter button counts
- ✅ Short descriptions for proper display
- ✅ Add New cards por cada tipo
- ✅ Complex Templates logic con GitHub integration

* feat: implement complete showComponentContributeModal with code editor

✅ MODAL "ADD NEW" IMPLEMENTADO:

🔧 **showComponentContributeModal()** completamente funcional:
- Modal con estructura component-modal igual al de Details
- 3 secciones como solicitaste:
  1. **Frase corta inicial**: Descripción específica del tipo de item
  2. **Installation command**: Comando de instalación con botón Copy
  3. **Component Details**: Editor de código con números de línea

📝 **Estructura del modal**:
- Header con icono, título "Add New [Type]" y badge de tipo
- Body con las 3 secciones requeridas
- Actions con link a GitHub para ver ejemplos existentes

💻 **Editor de código con números**:
- CSS agregado a workflows-modal.css
- Números de línea en columna izquierda
- Contenido formateado como código
- Soporte para markdown, yaml, json
- Monospace font y syntax highlighting ready

🎯 **Configuración por tipo**:
- **Agents**: Ejemplo de python-testing-specialist con metadata YAML
- **Commands**: Ejemplo de optimize-bundle con descripción markdown
- **MCPs**: Ejemplo de redis-integration con configuración JSON

🔄 **Integración completa**:
- closeComponentModal() agregado globalmente
- Event listeners para ESC key
- Remove existing modal antes de mostrar nuevo
- onClick en las cards "Add New" funciona correctamente

* feat: comprehensive templates system enhancement and code organization

## Major Features Added

### 🏗️ Templates System Overhaul
- **New data source**: Templates now load from `components.json` generated from `cli-tool/templates/`
- **Enhanced structure**: Support for both language and framework templates
- **Recursive file scanning**: Includes `.claude/` folder contents (agents, commands, settings)
- **Smart categorization**: Language-based category filters for templates
- **Proper install commands**: `--template=python --yes` for languages, `--template=django --yes` for frameworks

### 📦 Template Management
- **Updated generate_components_json.py**: Scans `cli-tool/templates/` recursively
- **File inventory**: Tracks all template files including Claude Code configuration
- **Template modal**: Shows complete file list for each template
- **GitHub integration**: Direct links to template folders

### 🎨 UI/UX Improvements
- **Card flip animations**: Restored original template card functionality from script.js
- **MCP optimization**: Removed unnecessary descriptions from MCP cards and modals
- **Category filters**: Templates now show language-based filters (python, ruby, etc.)
- **Filter reset**: Switching main filters automatically resets category selection
- **Enhanced modals**: Comprehensive template contribution guide with language vs framework instructions

### 🔧 Code Organization
- **Structured directories**: Moved all CSS files to `css/` and JS files to `js/`
- **Updated references**: All HTML files now reference organized file paths
- **Better maintainability**: Cleaner project structure for future development

### 🚀 Enhanced Contribution Flow
- **Detailed template modal**: Step-by-step guide for contributing languages vs frameworks
- **Required file structure**: Clear documentation of Claude Code configuration files
- **GitHub workflow**: Proper git commands and testing instructions

## Technical Improvements
- Fixed card flip functionality conflicts
- Enhanced pagination system
- Improved modal management
- Better error handling and fallbacks
- Consistent styling across components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-08-03 20:01:04 -04:00
Dani 36714d2d8b feat: comprehensive templates system enhancement and code organization
## Major Features Added

### 🏗️ Templates System Overhaul
- **New data source**: Templates now load from `components.json` generated from `cli-tool/templates/`
- **Enhanced structure**: Support for both language and framework templates
- **Recursive file scanning**: Includes `.claude/` folder contents (agents, commands, settings)
- **Smart categorization**: Language-based category filters for templates
- **Proper install commands**: `--template=python --yes` for languages, `--template=django --yes` for frameworks

### 📦 Template Management
- **Updated generate_components_json.py**: Scans `cli-tool/templates/` recursively
- **File inventory**: Tracks all template files including Claude Code configuration
- **Template modal**: Shows complete file list for each template
- **GitHub integration**: Direct links to template folders

### 🎨 UI/UX Improvements
- **Card flip animations**: Restored original template card functionality from script.js
- **MCP optimization**: Removed unnecessary descriptions from MCP cards and modals
- **Category filters**: Templates now show language-based filters (python, ruby, etc.)
- **Filter reset**: Switching main filters automatically resets category selection
- **Enhanced modals**: Comprehensive template contribution guide with language vs framework instructions

### 🔧 Code Organization
- **Structured directories**: Moved all CSS files to `css/` and JS files to `js/`
- **Updated references**: All HTML files now reference organized file paths
- **Better maintainability**: Cleaner project structure for future development

### 🚀 Enhanced Contribution Flow
- **Detailed template modal**: Step-by-step guide for contributing languages vs frameworks
- **Required file structure**: Clear documentation of Claude Code configuration files
- **GitHub workflow**: Proper git commands and testing instructions

## Technical Improvements
- Fixed card flip functionality conflicts
- Enhanced pagination system
- Improved modal management
- Better error handling and fallbacks
- Consistent styling across components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-03 19:59:20 -04:00
Dani 9bdf08e94e feat: implement complete showComponentContributeModal with code editor
✅ MODAL "ADD NEW" IMPLEMENTADO:

🔧 **showComponentContributeModal()** completamente funcional:
- Modal con estructura component-modal igual al de Details
- 3 secciones como solicitaste:
  1. **Frase corta inicial**: Descripción específica del tipo de item
  2. **Installation command**: Comando de instalación con botón Copy
  3. **Component Details**: Editor de código con números de línea

📝 **Estructura del modal**:
- Header con icono, título "Add New [Type]" y badge de tipo
- Body con las 3 secciones requeridas
- Actions con link a GitHub para ver ejemplos existentes

💻 **Editor de código con números**:
- CSS agregado a workflows-modal.css
- Números de línea en columna izquierda
- Contenido formateado como código
- Soporte para markdown, yaml, json
- Monospace font y syntax highlighting ready

🎯 **Configuración por tipo**:
- **Agents**: Ejemplo de python-testing-specialist con metadata YAML
- **Commands**: Ejemplo de optimize-bundle con descripción markdown
- **MCPs**: Ejemplo de redis-integration con configuración JSON

🔄 **Integración completa**:
- closeComponentModal() agregado globalmente
- Event listeners para ESC key
- Remove existing modal antes de mostrar nuevo
- onClick en las cards "Add New" funciona correctamente
2025-08-03 13:51:21 -04:00
Dani 0025773bd3 feat: restore all missing functionality from original script.js
✅ ERRORES SOLUCIONADOS:

1. **Conteo de items en filter-buttons**:
   - Agregada función updateFilterCounts() que muestra (X) items en cada botón
   - Se actualiza automáticamente cuando cambian los datos

2. **Descripción de cards acortada**:
   - getComponentDescription() ahora trunca a 120 caracteres máximo
   - Mantiene las cards con el tamaño correcto para el layout

3. **Cards "Add New" restauradas**:
   - createAddComponentCard() genera cards de "Add New" por tipo
   - Se muestran al inicio de cada filtro (agents, commands, mcps)
   - Incluyen iconos y colores específicos por tipo

4. **Lógica compleja de Templates restaurada**:
   - displayTemplates() usa la lógica original de script.js
   - createTemplateCard() y createAddTemplateCard() para templates
   - fetchTemplatesConfig() y parseTemplatesConfig() para GitHub data
   - Framework icons mapping completo
   - Cards con flip animation y estructura compleja

📋 FUNCIONALIDAD COMPLETA RESTAURADA:
- ✅ Subcategory filters (category-filter-row)
- ✅ Card styling con flip animations
- ✅ Available categories system
- ✅ Filter button counts
- ✅ Short descriptions for proper display
- ✅ Add New cards por cada tipo
- ✅ Complex Templates logic con GitHub integration
2025-08-03 13:45:16 -04:00
Dani d27cb05bdb feat: restore subcategory filters and card flip functionality
- Add updateCategorySubFilters() method to dynamically generate category filter buttons
- Restore availableCategories system to track component categories
- Implement setCategoryFilter() for category-specific filtering
- Update generateComponentCard() to use template-card structure with flip functionality
- Add collectAvailableCategories() to populate category sets
- Add global setCategoryFilter function for onclick events
- Restore card flip event listeners and ESC key handling
- Update grid class names for proper CSS styling
2025-08-03 13:38:14 -04:00
Dani 10939ddd36 feat: enhance workflow builder UI with professional design and accordion interface
## 🎨 Professional Header Design
- **Elegant Layout**: Gradient background with proper spacing and shadows
- **Logo Section**: Enhanced icon and gradient text styling
- **Navigation**: Clean nav buttons with icons and active states
- **Responsive**: Proper container and mobile-friendly design

## 🗂️ Accordion Component Organization
- **Main Categories**: Agents, Commands, MCPs with collapsible sections
- **Subcategory Accordions**: Each component type organized by functionality
- **Component Counts**: Real-time counters for each section and subcategory
- **Visual Hierarchy**: Clear nested structure with proper indentation

## 📋 Component Details Modal
- **Info Button**: Clean "ℹ️" button on each component item
- **Comprehensive Details**: Type, category, path, and usage information
- **Dynamic Description**: Fetches and displays component descriptions from GitHub
- **Usage Commands**: Copy-to-clipboard functionality for CLI commands
- **Add to Workflow**: Direct addition from modal to workflow canvas

## 🔧 GitHub API Error Handling
- **Rate Limit Protection**: Graceful handling of 403 errors
- **Fallback Behavior**: Continue loading other components if one fails
- **User-Friendly**: No more console errors for API limitations
- **Robust Loading**: Better error handling throughout the app

## 🎯 UI/UX Improvements
- **Clean Component Cards**: Removed category badges, added details button
- **Smooth Animations**: Accordion open/close with arrow rotation
- **Better Typography**: Improved font sizes and spacing
- **Professional Modals**: Enhanced modal design with proper structure
- **Consistent Styling**: Unified color scheme and spacing

## 📱 Responsive Features
- **Mobile-Friendly**: Accordions work well on smaller screens
- **Touch-Friendly**: Proper button sizes and touch targets
- **Flexible Layout**: Adapts to different screen sizes
- **Accessible**: Proper keyboard navigation and ARIA attributes

The workflow builder now provides a professional, intuitive interface for creating complex automation workflows with a clean, organized component library.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-03 10:04:10 -04:00
Dani e80f72cd8f feat: improve workflow organization and hide UI during testing
## 📁 Workflow Organization
- **Dedicated Workflows Folder**: Create `.claude/workflows/` directory for better organization
- **Clean File Structure**: Separate workflow YAML files from other components
- **Improved Path Display**: Show correct relative path in installation success message

## 🔒 UI Access Control
- **Hidden Workflows Button**: Comment out workflows navigation button during testing phase
- **Controlled Rollout**: Keep feature accessible via direct URL while testing
- **Clean Header**: Maintain professional appearance while feature is in beta

## 🧪 Testing Results
- ✅ Workflow files now saved to `.claude/workflows/filename.yaml`
- ✅ Directory structure: agents/, commands/, workflows/ for better organization
- ✅ UI button hidden but functionality fully working
- ✅ Direct URL access still available for testing: `/docs/workflows.html`

Workflow installation now creates:
```
.claude/
├── agents/
├── commands/
├── workflows/
│   └── workflow_name.yaml
└── .mcp.json
```

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-03 09:50:07 -04:00
Dani 9940d043f2 feat: implement comprehensive Workflow Builder system
## 🔧 Workflow Builder Web Interface
- **Drag-and-Drop Canvas**: Visual workflow building with sortable steps
- **Component Library**: Browse and search all agents, commands, and MCPs
- **Real-time Preview**: Live workflow statistics and step management
- **Hash Generation**: Secure workflow encoding with CryptoJS
- **YAML Export**: Generate executable workflow files
- **Modal Interface**: Professional workflow generation dialog

## ⚡ CLI Workflow Installation
- **--workflow option**: Install workflows from hash (format: #hash)
- **Batch Installation**: Download all workflow components automatically
- **Silent Mode**: Clean output when installing multiple components
- **YAML Generation**: Create step-by-step execution files
- **Error Handling**: Comprehensive validation and user guidance

## 🎨 UI/UX Features
- **Responsive Design**: Works on desktop and mobile devices
- **Professional Styling**: Clean, modern interface with proper theming
- **Interactive Components**: Hover effects, drag feedback, and animations
- **Search Functionality**: Filter components by name and category
- **Navigation Integration**: Added workflows link to main header

## 🔗 Architecture
- **Modular Frontend**: Separate CSS and JS files for maintainability
- **GitHub Integration**: Dynamic component loading from organized categories
- **Local Storage**: Workflow state management for hash generation
- **Component Tracking**: Analytics integration for usage monitoring

## 🚀 Workflow Execution Flow
1. **Build**: Create workflows in drag-and-drop interface
2. **Generate**: Export hash and YAML configuration
3. **Install**: Use CLI with generated hash to download all components
4. **Execute**: Use YAML file with Claude Code for step-by-step automation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-03 09:22:39 -04:00
Daniel Avila 63b1168dbf feat: implement comprehensive subcategory support and agent collections (#58)
* feat: add support for agent subcategories with dynamic GitHub discovery

- Support agent installation from subcategories (e.g., deep-research-team/academic-researcher)
- Add dynamic GitHub API integration to discover available agents in real-time
- Automatically organize agents by category folders
- Preserve folder structure when installing categorized agents
- Add comprehensive agent teams from merged PR #46:
  - Deep Research Team (9 specialized research agents)
  - FFmpeg Clip Team (6 media processing agents)
  - MCP Development Team (5 MCP server agents)
  - Obsidian Operations Team (5 knowledge management agents)
  - OCR Extraction Team (5 text processing agents)
  - Podcast Creator Team (9 content creation agents)
  - Plus individual specialized agents

Technical improvements:
- Remove hardcoded agent lists in favor of GitHub repository scanning
- Support both 'agent-name' and 'category/agent-name' formats
- Fallback mechanism when GitHub API is unavailable
- Maintains backward compatibility with existing CLI usage
- Real-time agent discovery without requiring CLI updates

Usage examples:
- cct --agent api-security-audit (existing agents)
- cct --agent deep-research-team/academic-researcher (new categorized agents)
- cct --agent help (shows all available agents dynamically)

Co-authored-by: Cam10001110101 <cameron@cameronrohn.com>

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: add support for new DeepGraph components and enhance filtering functionality

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-08-01 17:26:36 -04:00
github-actions[bot] 134aa1f618 📊 Track: agent/test-component (#57)
Auto-increment download counter

  🤖 Automated via workflow_dispatch

Co-authored-by: GitHub Action <action@github.com>
2025-08-01 13:29:47 -04:00
github-actions[bot] 38a509ba7c 📊 Track: command/test-generator (#55)
Auto-increment download counter

  🤖 Automated via workflow_dispatch

Co-authored-by: GitHub Action <action@github.com>
2025-08-01 07:59:01 -05:00
Dani 1e8b0be89d feat: implement elegant download tracking system with analytics dashboard
- ✨ Add comprehensive download tracking infrastructure
- 📊 Create detailed analytics dashboard at /download-stats.html
- 🔧 Implement GitHub Actions workflow for stats processing
- 🎨 Add elegant footer link instead of main page widget
- 📈 Support interactive charts with Chart.js integration
- 🔒 Maintain privacy-first approach with anonymous tracking
- 📱 Responsive design for mobile and desktop
- 🚀 Ready for production deployment

Components added:
- GitHub Actions workflow for manual tracking triggers
- Analytics JSON data structure and processing
- Interactive dashboard with doughnut and line charts
- Progress bars and detailed component metrics
- Terminal-style design consistent with site theme

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-01 08:49:40 -04:00
Dani ce931a6ab0 fix(docs): Comment out download stats section in index.html 2025-07-31 21:02:15 -04:00
Dani fa64d1b7c3 fix(docs): Update header link to point to the new documentation site 2025-07-31 20:17:25 -04:00
Dani 74e12af0d2 fix(docs): Update header link to point to live documentation 2025-07-31 20:10:13 -04:00
Dani 792515b211 fix(deploy): Implement single-job deployment workflow 2025-07-31 19:40:56 -04:00
github-actions[bot] 15d0819426 📊 Update tracking analytics data (#34)
- Updated download statistics from GitHub Pages tracking
    - Processed tracking logs for component downloads
    - Generated by GitHub Actions workflow

    🤖 Automated tracking update

Co-authored-by: GitHub Action <action@github.com>
2025-07-31 19:08:40 -04:00
Dani 7e54411fd3 feat: update default view to agents and adjust filter button order in documentation 2025-07-31 18:15:27 -04:00
github-actions[bot] d9d75ff865 📊 Update tracking analytics data (#32)
- Updated download statistics from GitHub Pages tracking
    - Processed tracking logs for component downloads
    - Generated by GitHub Actions workflow

    🤖 Automated tracking update

Co-authored-by: GitHub Action <action@github.com>
2025-07-31 16:34:29 -05:00
github-actions[bot] 73b07c0430 📊 Update tracking analytics data (#31)
- Updated download statistics from GitHub Pages tracking
    - Processed tracking logs for component downloads
    - Generated by GitHub Actions workflow

    🤖 Automated tracking update

Co-authored-by: GitHub Action <action@github.com>
2025-07-31 17:25:41 -04:00
Dani 4c76fe3aba feat: add GitHub Pages tracking endpoints
- Add track.html endpoint for visible tracking
- Add api/track.html for silent tracking with 1x1 pixel
- Create GitHub Action to process tracking logs
- Use GitHub Pages infrastructure for anonymous tracking
- No external dependencies or authentication required
2025-07-31 17:10:25 -04:00
Dani 0a58102710 feat: update documentation for modern template and component installation syntax 2025-07-31 08:57:48 -04:00
Dani 201cd4c2bf feat: implement GitHub-based template downloads and new --template syntax
## Major Changes

### 🔄 GitHub Download System
- All templates now download directly from GitHub instead of local files
- Components (agents, commands, MCPs) download from `components/` directory
- Templates download from `templates/` directory
- Added download caching to avoid repeated requests
- Show clear GitHub URLs for transparency

### 🆕 New --template Parameter
- Added `--template` parameter as modern replacement for `--language`/`--framework`
- Maintains backward compatibility with deprecated `--language`/`--framework`
- Updated web interface to use new syntax: `npx claude-code-templates@latest --template=python --yes`

### 🎯 Component vs Template Separation
- `--agent=name`: Downloads individual component to `.claude/agents/`
- `--command=name`: Downloads individual component to `.claude/commands/`
- `--mcp=name`: Downloads individual component to `.mcp.json`
- `--template=name`: Downloads complete template with full configuration

### 📦 Web Interface Updates
- Updated installation commands to use `npx` with latest version
- Changed from `--language`/`--framework` to `--template` syntax
- Made global installation optional in step 1
- All template cards now show correct download commands

### ✅ Benefits
- Always up-to-date content from GitHub main branch
- No need to republish npm package for content updates
- Clear distinction between individual components and full templates
- Improved user experience with transparent download sources

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-31 08:41:57 -04:00
Dani 38143ccc4c fix: Move download statistics section above filter buttons
- Reorder HTML sections to show downloadStatsSection before unified-filter-section
- Community downloads statistics now appear above component filter buttons
- Maintains proper visual hierarchy as requested

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-30 20:36:06 -04:00
Dani 83b5602cf8 fix: Keep download statistics section always visible above filters
- Disable hideStatisticsSection function to prevent hiding stats
- Add CSS !important rule to ensure section stays visible
- Maintain download statistics display even when data is not available
- Keep section positioned above the component filters as requested

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-30 20:34:17 -04:00
Dani 62321e9212 fix: Temporarily hide Docs button while fixing Docusaurus deployment
- Comment out documentation button link to /docu/
- Prevents users from accessing broken documentation page
- Will restore once Docusaurus deployment is fixed

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-30 20:06:25 -04:00
Dani dd001d3779 chore: Add initial analytics data file
🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-30 19:39:49 -04:00
Dani ae6d77a91d fix: Fix Docusaurus TypeScript configuration and complete download tracking system
- Fix tsconfig.json by removing invalid @docusaurus/tsconfig extends
- Add proper TypeScript configuration for Docusaurus
- Complete download count badges for template, agent, command, and MCP cards
- Add analytics data integration with card regeneration
- Include tracking service and GitHub Actions workflow for analytics processing
- Update web interface with download statistics display

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-30 19:39:02 -04:00
Dani 171310d22a Refactor README and CLI tool documentation for clarity and consistency; update URLs to new domain; enhance analytics dashboard and health check commands; streamline contribution process; improve styling and layout for better user experience. 2025-07-30 15:10:41 -04:00
daniel b0209b1209 feat: Implement individual component installation system
- Add --agent, --command, --mcp options to CLI
- Implement installIndividualAgent, installIndividualCommand, installIndividualMCP functions
- Dynamic component detection from cli-tool/components directory
- Update web interface install commands to use new CLI options
- Fix infinite recursion in agent installation
- Proper error handling and component listing when not found

Installation examples:
- npx claude-code-templates@latest --agent=react-performance-optimization --yes
- npx claude-code-templates@latest --command=generate-tests --yes
- npx claude-code-templates@latest --mcp=postgresql-integration --yes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-29 13:22:36 -05:00
daniel 8426d7c0f6 improve: Unify component cards design with templates
- Remove install-note sections from component cards to match template design
- Fix commands installation to include mkdir -p for .claude/commands
- Simplify card back to show only Installation Command title
- Remove unused CSS for install-note styling
- Clean up unused getInstallationTitle function

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-29 13:09:39 -05:00
daniel aad91824a9 feat: Add individual components system with unified web interface
Major Features Added:
🎯 Unified filter interface (Templates, Agents, Commands, MCPs)
🤖 Individual Agent components (react-performance, api-security, database-optimization)
⚡ Custom Command components (check-file, generate-tests)
🔌 MCP integration configs (DeepGraph, GitHub, databases, etc.)
📱 Card flip functionality with installation commands
🎨 Compact stats badges design
📚 Comprehensive Docusaurus documentation

Technical Improvements:
- Modular component architecture in cli-tool/components/
- Real-time GitHub API integration for component loading
- Smart installation command generation per component type
- Responsive design with terminal theme consistency
- Individual component contribution workflows

Web Interface Enhancements:
- Removed mode separation, unified single view
- Interactive filter bar with component counts
- Installation command copying functionality
- Component-specific "Add New" cards with contribution modals
- Enhanced loading states and error handling

Documentation Updates:
- New /docs/components/ section with detailed guides
- Updated navigation and cross-references
- Installation methods for each component type
- Best practices for templates vs individual components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-29 12:55:04 -05:00
daniel c80f5b6da4 feat: Add SVG logo for terminal-themed interface 2025-07-25 21:16:01 -05:00
daniel dc1afd84c8 feat: Update header actions and styles for improved layout and accessibility 2025-07-25 21:09:50 -05:00
daniel 350b11d74a Add SVG illustration and TypeScript configuration file
- Added a new SVG file `undraw_docusaurus_tree.svg` to the static images directory for enhanced visual representation.
- Introduced a new TypeScript configuration file `tsconfig.json` to improve editor experience and project structure.
2025-07-25 20:50:46 -05:00
Dani db131a25b1 style: Update template card buttons to neutral dark theme
- Change View Files and Copy Command buttons to neutral dark colors
- Use bg-tertiary background with text-secondary color
- Reduce padding from 8px 16px to 6px 12px for smaller buttons
- Reduce font-size from 0.8rem to 0.75rem for thinner appearance
- Reduce min-width from 100px to 80px
- Add subtle hover effects with transform and color transitions
- Remove bright colors in favor of consistent dark theme

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-19 08:28:32 -04:00
Dani 618b368de7 fix: Align command-line sections at same height across all step cards
- Add flexbox layout to step cards with min-height
- Make step content flexible with flex: 1 on description text
- Position command-line and highlight sections at bottom with margin-top: auto
- Ensures consistent visual alignment across all 3 installation steps

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-19 08:26:55 -04:00