Commit Graph

14 Commits

Author SHA1 Message Date
Dani a3c0187e55 feat: component page improvements and SEO-friendly URLs
• Complete component page implementation with cart functionality
• Clean component names (remove .md/.json extensions in display)
• SEO-friendly URLs: /component/type/name format
• Local/production URL detection for development compatibility
• Improved header actions positioning and responsive design
• API keys setup (Anthropic + E2B) for sandbox execution
• Enhanced cart functionality with clean path/name display
• Share dropdown positioning fix (opens upward)
• Compact back navigation styling

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-10 17:07:04 -04:00
Dani 49513876fd Fix E2B sandbox to download files directly to project root
Changes:
- E2B launcher now downloads files to ./ (project root) instead of ./e2b-outputs/
- Updated confirmation dialog to show "Files will be downloaded to project root directory"
- Updated modal feature text to "Files downloaded to project root"
- Removed timestamp folder organization for simpler file management

This ensures generated files are immediately available in the project root
where users expect them, without needing to navigate to subfolders.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-06 15:56:38 -04:00
Dani 7ed71b4a65 Fix agent format to use folder/agent-name structure in E2B sandbox commands
Corrections:
- Modal: Changed --agent=${componentPath} to correctly show folder/agent-name
- Index.html: Updated from --agent=frontend-developer to --agent=development-team/frontend-developer
- Steps section: Added missing agent specification in Cloud Sandbox step
- Tools section: Corrected E2B sandbox command format

This aligns with the CLI requirement where agents must be specified as:
--agent=folder/agent-name (e.g., development-team/frontend-developer)

The componentPath already contains the correct folder/name structure,
so this ensures the modal commands work correctly when copied.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-06 13:40:24 -04:00
Dani 39b8b1f4f2 Restrict E2B sandbox to agents only - improve modal specificity
Changes:
- E2B Sandbox section now only appears for agent components
- Commands, MCPs, settings, hooks, and templates no longer show E2B option
- This aligns with the CLI implementation where --sandbox only works with --agent
- Keeps modal clean and relevant for each component type

Reasoning:
E2B sandbox execution is specifically designed for agent workflows since
agents provide the AI decision-making needed for complex cloud operations.
Other component types (commands, settings, etc.) are configuration-based
and don't require isolated execution environments.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-05 08:20:23 -04:00
Dani 7855c476ba Reorganize modal structure with clear sections and simplified layout
Modal Structure:
✅ Basic Installation - Install component locally with brief description
✅ Global Agent (Claude Code SDK) - For agents only, with usage and features
✅ Run in E2B Sandbox (Cloud Execution) NEW - Cloud execution with simplified setup

E2B Sandbox Improvements:
- Added NEW badge to highlight the feature
- Simplified API key setup section with .env example
- Cleaner command structure without multiple methods
- Improved API key links styling with hover effects
- Better responsive design for mobile devices

Visual Enhancements:
- Clear section dividers and consistent spacing
- Improved typography and color hierarchy
- Better organized content flow matching the screenshot
- Enhanced readability with proper descriptions

This matches the exact structure requested based on the modal screenshot.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-04 21:50:38 -04:00
Dani 1ec2031ae7 Improve E2B sandbox API key setup in modals and main page
Modal Improvements:
- Added detailed API key setup section with two methods
- Method 1: Environment variables (.env file) - recommended
- Method 2: Command line parameters - for testing
- Enhanced visual structure with separate sections for each method
- Added responsive design for mobile devices

Main Page Layout:
- E2B sandbox tool card now spans full width (3 columns)
- Improved internal layout with side-by-side .env setup
- Better spacing and organization for the expanded card
- Responsive breakpoints for mobile and tablet

Users now have clear, easy-to-follow instructions for both modal
components and main page examples with API key management.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-04 21:36:19 -04:00
Dani 7d98c36046 Add E2B Sandbox execution instructions to component modals
- Added E2B sandbox section to all component modal details
- Includes cloud execution command with component-specific parameters
- Features: isolated environment, extended timeouts, file downloads, monitoring
- Added requirements section with E2B and Anthropic API key links
- Styled E2B section with blue gradient background and warning styling
- Handles templates vs other component types correctly in command generation
- Updated components.json with latest component scan (2 sandbox components)

Users can now see E2B sandbox instructions for every component in the modal.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-04 21:00:21 -04:00
Dani a176679fad feat: integrate Claude Code SDK with global agents functionality
🌍 Major new feature: Global AI Agents powered by Claude Code SDK

## New Features
- **Global Agent Creation**: `--create-agent <agent-name>`
- **Agent Management**: `--list-agents`, `--update-agent`, `--remove-agent`
- **Zero Configuration**: Agents install to /usr/local/bin (immediately available)
- **Auto Context Detection**: Smart project type detection and file context
- **Universal Access**: Works from any directory, in scripts, CI/CD, npm tasks

## Technical Implementation
- New global-agent-manager.js module with complete agent lifecycle
- Automatic PATH management across shell environments
- Executable script generation with Claude Code SDK integration
- Real-time loading indicators during AI processing
- Robust error handling and fallback mechanisms

## Frontend Integration
- Enhanced agent modals with Global Agent installation options
- New CSS styles for global agent sections
- Copy-to-clipboard functionality for all commands
- Usage examples and feature highlights

## User Experience
Before: Traditional project-based agent installation
After: `cct --create-agent security-auditor` → `security-auditor "prompt"` (anywhere)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 12:56:49 -04:00
Dani 3a0f0d2dc8 Enhance statusline components with detailed descriptions and improve modal display
- Updated descriptions for RPG status bar and virtual code garden to include display details.
- Modified component documentation to reflect new features and descriptions for various statuslines.
- Removed max-height restrictions in CSS for better component visibility.
- Adjusted modal helper to show full component descriptions instead of truncated versions.
2025-08-15 20:34:43 -04:00
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 4b0953fdcd add mcp descriptions 2025-08-04 13:55:52 -04:00
Dani 317e9d602b remove .json extension from path 2025-08-04 10:19:46 -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