## GitHub Actions Workflow:
✅ Automatic deployment on push to main branch only
✅ Uses Vercel CLI for production builds
✅ Deploys to aitmpl.com custom domain
✅ Other branches require manual deployment
## Configuration Files:
- - GitHub Actions workflow
- - Setup instructions for secrets
- - Vercel configuration with caching and security headers
## Required GitHub Secrets:
- VERCEL_TOKEN
- VERCEL_ORG_ID
- VERCEL_PROJECT_ID
## Deployment Flow:
🎯 Push to main → Auto-deploy to https://aitmpl.com🔧 Other branches → Manual deployment only
Professional CI/CD pipeline for seamless production deployments.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Step 2 Enhancement:
✅ Updated "Choose & Run Template" to "Build Your Stack"
✅ Reflects new shopping cart functionality for complete stacks
✅ Cleaner messaging focused on multi-component solutions
## New Tool Added:
✅ **Live Chat Monitor**: npx claude-code-templates@latest --chats
✅ Real-time Claude message monitoring and tool execution analysis
✅ Third tool card for comprehensive development workflow
## Footer Redesign:
✅ **AITMPL ASCII branding** on the left with tagline
✅ **Removed Download Analytics** - cleaner link structure
✅ **Added docs.aitmpl.com** as Documentation link
✅ **Centered links** to avoid cart button overlap
✅ Better mobile responsive layout with proper spacing
## Stats Section:
✅ More compact spacing closer to header
✅ Reduced margins and padding for cleaner layout
✅ Better mobile optimization with smaller badges
## Mobile UX:
✅ Footer links avoid floating cart button interference
✅ Proper spacing and responsive breakpoints
✅ Clean ASCII art scaling on mobile devices
Professional, modern interface with improved visual hierarchy.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added align-items: center to cart-clear-section-prominent
- Clear All button remains right-aligned with flex-end
- Better vertical alignment in the cart header section
- Maintains subtle styling and proper spacing
## Modal Button Improvements:
✅ **Consistent Sizing**:
- Both buttons now have min-width: 140px
- Same padding: 0.6rem 1.2rem
- Same font-size: 0.85rem
- Same border-radius: 6px
✅ **Better Layout**:
- Add to Cart no longer takes full width (was width: 100%)
- Added 1rem gap between buttons
- Both buttons centered and balanced
✅ **Professional Appearance**:
- Buttons are same height and visual weight
- Clean side-by-side layout
- Responsive with flex-wrap for mobile
The modal action buttons now look much more professional and balanced.
- Disabled cart-sidebar::before overlay that was blurring background
- Removed backdrop-filter blur effect completely
- Cards remain fully visible and readable when cart is open
- Maintains JavaScript overlay for click-to-close functionality
- Background content no longer blocked or dimmed
## Problem Fixed:
- Components were loading initially but then disappearing
- Agents and MCPs showing empty grids despite correct counts
- Commands showing items but missing categories
- Issue caused by complex pagination conflicting with background loading
## Solution:
- Simplified to load all components at once (loadAllComponents())
- Eliminated problematic background pagination that was overwriting data
- Since GitHub templates loading was removed, JSON size is manageable
- Removed race conditions between initial load and background merging
## Technical Changes:
- Created `loadAllComponents()` method for single-pass loading
- Removed `loadMoreComponentsInBackground()` complexity
- Fixed data synchronization issues
- Maintained performance with proper caching and timeouts
Now all component types should display correctly without disappearing.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Issue Fixed:
- Filter buttons were showing paginated counts (50 items) instead of actual totals
- Users saw "Agents (50)" instead of "Agents (100)"
- Problem caused by race condition between initial load and background loading
## Technical Solution:
- Added `fullComponentsData` property to store complete dataset
- Created `getTotalCounts()` method for accurate count retrieval
- Updated `updateFilterCounts()` to use total counts instead of paginated data
- Fixed data synchronization between DataLoader and IndexPageManager
- Eliminated GitHub templates loading errors by using components.json exclusively
## Now Shows Correct Numbers:
✅🤖 Agents (100)
✅⚡ Commands (158)
✅🔌 MCPs (23)
✅📦 Templates (14)
Performance optimizations maintained - initial load still fast with background completion.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Critical Issues Resolved:
- **Lazy loading**: Components.json now loads in 50-item batches instead of 1.6MB at once
- **Timeouts**: Added 8-second timeouts to prevent hanging fetches
- **Loading states**: Visual progress indicators for better UX
- **MutationObserver**: Optimized with debouncing and selective monitoring
- **Background loading**: Non-blocking progressive loading
- **Error handling**: Comprehensive fallbacks and user-friendly error messages
## Technical Improvements:
- RequestAnimationFrame instead of setTimeout for smoother animations
- Debounced DOM updates to prevent excessive reflows
- Intelligent caching with cache-friendly timestamps
- Progressive enhancement with fallback data
- Memory-efficient pagination system
- Performance-optimized CSS animations
## Mobile-Specific Fixes:
- Reduced initial payload from 1.6MB to ~200KB
- Prevented UI thread blocking during data parsing
- Added mobile-optimized loading states
- Improved error handling for slow connections
This should resolve the mobile freezing issues completely.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Configure static site deployment for docs/ folder
- Set up proper routing for SPA functionality
- Add security headers (X-Content-Type-Options, X-Frame-Options, X-XSS-Protection)
- Configure caching for static assets (JS/CSS)
- Enable filesystem routing with fallback to index.html
- Set project name as claude-code-templates-cart
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove problematic CSS ::before pseudo-element overlay on mobile
- Implement dynamic JavaScript-based overlay for desktop only
- Add display: none \!important for cart overlay on screens ≤768px
- Create overlay only when needed (openCart) and remove on close
- Prevent overlay from interfering with mobile touch events
- Maintain desktop blur overlay functionality with proper z-index
This fixes the issue where mobile users couldn't see content
after the Filter Components section due to invisible overlay blocking.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add pointer-events: none to cart-sidebar when not active
- Enable pointer-events when cart is active (.cart-sidebar.active)
- Reduce z-index from 2000 to 1000 to avoid interference
- Fix cart overlay pointer-events management
- Ensure cart notifications have proper z-index (1100)
- Prevent cart from blocking touch events on mobile when closed
This resolves the issue where mobile users saw a black screen due to
the cart sidebar intercepting touch events even when hidden.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 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>
- 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>
- 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>
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>
- 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>
- Implement exponential backoff for GitHub API rate limits (5 retries max)
- Add sophisticated rate limit detection with exact wait times
- Handle missing files/directories gracefully instead of failing completely
- Add comprehensive download statistics and progress tracking
- Distinguish between different types of 403 errors (rate limit vs permissions)
- Continue installation even when some template files are unavailable
- Provide detailed summary of successful, skipped, and failed downloads
- Support workflow where some templates may have missing optional files
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* 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>
## 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>
✅ 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
✅ 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
- 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
## 🎨 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>
## 🔧 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: 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>
- 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)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-authored-by: Claude <noreply@anthropic.com>
Introduces markdown files for all agents in the deep-research-team, detailing their roles, responsibilities, workflows, and structured JSON output formats. This establishes a comprehensive multi-agent research system for academic, technical, data, synthesis, and reporting tasks.
- Add automated workflow to publish CLI package to GitHub Packages
- Configure package scoping with @davila7/claude-code-templates
- Include version bumping and automatic GitHub releases
- Add .npmrc for proper registry configuration
- Support both manual triggers and release-based publishing
Package will be available as:
npm install -g @davila7/claude-code-templates --registry=https://npm.pkg.github.com🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Document active vs deprecated workflows
- Provide clear usage instructions for download tracking
- Include troubleshooting guide for workflow conflicts
- Prevent confusion about which workflow to use
Active: simple-tracking.yml (download tracking)
Deprecated: 3 previous tracking attempts
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Mark analytics-processor.yml as DEPRECATED (issues-based approach)
- Mark process-tracking-logs.yml as DEPRECATED (scheduled cron approach)
- Mark tracking-dispatch.yml as DEPRECATED (repository dispatch approach)
- Disable all triggers on deprecated workflows to prevent conflicts
- Add clear documentation that simple-tracking.yml is the ACTIVE workflow
- Keep deprecated files for reference and historical context
Active workflow: simple-tracking.yml (manual triggers + PR creation)
Deprecated workflows: 3 previous attempts with different approaches
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
daniel