The component rewrite was intercepting /components.json requests,
returning HTML instead of JSON, causing "<!DOCTYPE... is not valid JSON" errors.
Changes:
- Add $ anchor to component rewrite pattern for exact matching
- Add explicit routes for .json files to ensure proper serving
- Add cache headers for JSON files (5 minute cache)
- Prevent rewrites from intercepting static JSON resources
This ensures /components.json returns actual JSON instead of HTML.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Remove all local environment detection logic and focus 100% on production.
Changes:
- Use static absolute paths for all resources (/css/, /js/, /favicon.ico)
- Remove complex environment detection and dynamic script loading
- Simplify DataLoader to always use absolute paths (/components.json)
- Clean up debugging logs and navigation links
- Static script tags for reliable loading order
This eliminates complexity and ensures robust production functionality.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
The DataLoader was using relative paths like 'components.json' which
resolved incorrectly from SEO-friendly URLs (/component/agent/name).
Changes:
- Add environment detection to DataLoader constructor
- Add getDataPath() method for environment-aware resource paths
- Use relative paths for local development (components.json)
- Use absolute paths for production (/components.json)
- Add debug logging to trace loading issues
This should fix the "Loading component..." issue in production
by ensuring components.json loads from the correct path.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
JavaScript files were loading with relative paths (js/data-loader.js)
which resolved incorrectly from SEO-friendly URLs like
/component/agent/name to /component/agent/js/data-loader.js.
Changes:
- Replace static script tags with dynamic environment-aware loading
- Use relative paths (js/) for local development
- Use absolute paths (/js/) for production
- Maintain script execution order with async=false
- Add debugging logs for troubleshooting
This resolves MIME type errors and ensures JavaScript functionality
works correctly on production component pages.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Disable cleanUrls to prevent conflicts with rewrites
- Remove unnecessary JS/CSS rewrites (using absolute paths instead)
- Fix header paths from /docs/* to /* for proper MIME types
- Add explicit Content-Type headers for JS and CSS files
This should resolve the rewrite issue where /component/agent/name
was serving index.html instead of component.html.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Reorder Vercel rewrites to prioritize component routes
- Add explicit JS and CSS route handling for SEO-friendly URLs
- Fix environment-specific resource loading in component.html
- Add debug logging for troubleshooting script loading issues
This resolves MIME type errors and ensures component.html loads
correctly for URLs like /component/agent/name in production.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement on_stdout/on_stderr callbacks for live output streaming
- Add progress indicators during long operations
- Remove unnecessary warning message for aitmpl.com API
- Create API endpoint for agents list at /docs/api/agents.json
- Update getAvailableAgentsFromGitHub to use aitmpl.com API fallback
- Improve user experience with visual feedback during execution
- Version bump to 1.21.5
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change from '30-60 seconds' to 'a few minutes'
- More accurate for complex prompts
- Sets better user expectations
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove time and threading imports that caused errors
- Use simple static spinner icon instead of animation
- Clean and simple loading message
- Avoids 'time not associated with value' error
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Import time and threading modules for animations
- Add animated dots (Processing...) before execution
- Show brief animation to indicate activity
- Better visual feedback during synchronous operations
Note: Full spinner not possible during blocking E2B execution
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove validation that forced agent selection
- Allow users to press Enter without selecting any agents
- Continue with default Claude when no agents selected
- Improves UX by not forcing unnecessary selections
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Display the actual user prompt in the command output
- Keep enhanced prompt for internal execution
- Truncate long prompts to 100 characters for display
- Maintains prompt engineering while improving user visibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Use local docs/components.json file when available (600+ agents)
- Fallback to GitHub API only if local file not found
- Handle GitHub API rate limits gracefully
- Provide comprehensive fallback agent list
- Show message when loading from local cache
This fixes the issue where only 3 agents were showing due to API rate limits
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create enhanced prompts with clear instructions for Claude Code
- Include agent context when agents are specified
- Instruct Claude to execute requests immediately and create files
- Parse agent names from components string correctly
- Show agent usage in execution logs
This ensures Claude generates actual code instead of just acknowledging requests
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change from single list to checkbox for multiple agent selection
- Support comma-separated agent values (folder/agent-name format)
- Add confirmation prompt before agent selection
- Display multiple agents properly in execution summary
- Maintain full path format for agent references
Users can now select multiple agents with SPACE and confirm with ENTER
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add visual separator and loading message after permissions check
- Show 'Executing Claude Code in secure cloud sandbox' message
- Include status indicators for processing, isolation, and output
- Improve user feedback during execution wait time
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add interactive agent selection feature when --agent not provided
- Add interactive prompt input when --prompt not provided
- Document Y/n confirmation step before execution
- Clarify files download to current directory in sandbox-xxxxx folder
- Add ESC to cancel execution feature
- Update execution process table with complete 12-step workflow
- Fix timeout documentation (15 minutes, not 5)
- Remove --studio references (keeping it private for now)
- Add interactive mode example in quick start
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change Python script execution cwd from sandboxDir to targetDir
- Files now download directly to user's current working directory
- Update message to show exact download path
- Maintains pip install in .claude/sandbox for dependencies
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Keep --studio as separate web interface command for Claude Code Studio
- Make --sandbox e2b pure CLI experience without opening web interface
- Add interactive agent selection when --agent not provided
- Agent list fetched from GitHub with option to continue without agent
- Maintain existing prompt collection and Y/n confirmation flow
- Real-time log display and folder download already working
This ensures --sandbox e2b follows the CLI workflow:
1. Check/download agents if missing
2. Prompt for input if --prompt not provided
3. Confirm E2B execution with Y/n
4. Execute and show logs
5. Download folder when complete
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Use os.getcwd() to get the directory where command was executed
- Download files to sandbox-{id} folder in user's current directory
- Remove hardcoded relative path assumptions (../../)
- Add debugging output to show current working directory
- Ensures files are downloaded where user expects them
- Load .env file from current working directory (where command is executed)
- Pass environment variables correctly to Python E2B launcher
- Show API key status on server startup with clear feedback
- Ensure E2B and Anthropic API keys are loaded from user's project
- Better debugging output for environment variable loading
- Add prominent API keys notice with setup instructions
- Include direct links to get E2B and Anthropic API keys
- Improve error handling to detect missing API key errors
- Show helpful error messages for API key configuration
- Better user guidance for .env file setup
Features:
✅ Interactive Project Requirements Editor:
- Opens when --prompt parameter is not provided in sandbox mode
- Uses inquirer editor type for multi-line text input
- Comprehensive default template with structured guidance
- Input validation (minimum 10 characters)
✅ Enhanced User Experience:
- Clear instructions on how to provide detailed requirements
- Pre-filled template with examples and categories:
* Feature descriptions
* Technical requirements (tech stack, styling)
* Design requirements (colors, layout, UI style)
- Real example at the bottom for reference
✅ Smart Flow:
- Only triggers when prompt is missing in sandbox mode
- Captures user input and continues with normal sandbox execution
- Maintains all existing functionality when --prompt is provided
This allows users to run sandbox mode without specifying --prompt
and get a guided experience to describe their project requirements.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Features added:
✅ Sandbox Execution Confirmation:
- Beautiful formatted confirmation dialog with execution details
- Shows agent name, truncated prompt, provider (E2B Cloud)
- Displays execution info: real-time logs, file downloads, timeout
- Clear ESC cancellation instructions
✅ ESC Key Cancellation:
- Real-time ESC key detection during sandbox execution
- Graceful process termination with SIGTERM
- Proper stdin cleanup and raw mode handling
- User-friendly cancellation messages
✅ Enhanced User Experience:
- Informative confirmation dialog before execution
- Real-time execution status and instructions
- Safe process cancellation without hanging
- Clear feedback for all execution states
This provides users with full control over sandbox execution and clear
visibility into what will happen during the E2B sandbox process.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problem: When using --sandbox with --prompt, the system was showing
"Do you want to execute this prompt in Claude Code?" confirmation dialog
after installing the agent, even though sandbox mode should handle the
prompt execution directly.
Root Cause: The issue existed since the beginning. When --sandbox installs
an agent internally, the installIndividualComponents() function was also
checking for options.prompt and calling handlePromptExecution(), creating
a duplicate prompt handling path.
Solution: Added !options.sandbox condition to all three locations where
handlePromptExecution() is called:
1. Main template installation flow (line 372)
2. Individual components installation (line 1454)
3. Workflow components installation (line 1623)
This ensures prompt execution only happens in regular mode, not sandbox mode.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Changes:
- E2B outputs now save to ./e2b-outputs/{timestamp}_{prompt}/ in project root
- No longer creates files inside .claude directory
- Added timestamp and sanitized prompt name for unique folder organization
- Improved find command to exclude .claude and node_modules directories
- Enhanced file filtering and organization for better user experience
Structure:
./e2b-outputs/
└── 20250106_143025_Create-React-app/
├── index.html
├── app.js
└── styles.css
This keeps E2B sandbox outputs separate from Claude Code configuration
and makes it easier for users to find and manage their generated files.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
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>
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>
- 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>
- Extended Node.js spawn timeout from default to 15 minutes (900 seconds)
- Increased Python E2B launcher timeout from 5 to 10 minutes (600 seconds)
- Updated monitor script to use same extended timeout
- Added timeout handling with user-friendly error messages
- Added timeout notification to inform users of extended wait times
Resolves timeout issues with complex Claude Code operations in E2B sandboxes.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
🎉 Major Features Added:
✅ Automatic file download from sandbox to local ./e2b-output/
✅ Extended timeouts (15 minutes) with intelligent timeout management
✅ Comprehensive logging with step-by-step execution monitoring
✅ Environment verification (Claude Code installation, permissions)
✅ Advanced debugging tools and comprehensive error handling
📁 New Files:
- e2b-monitor.py: Real-time sandbox monitoring with system resources tracking
- SANDBOX_DEBUGGING.md: Complete troubleshooting and debugging guide
🔧 Enhanced Features:
- E2B SDK v2.0.2 compatibility with Sandbox.create() API
- Automatic download of HTML, CSS, JS, TS, Python, JSON, Markdown files
- Detailed logging of command execution with exit codes and output lengths
- Retry logic for WebSocket/connection issues
- Environment checks (PATH, permissions, Claude Code installation)
🎯 Production Ready:
- Fully functional E2B cloud sandbox integration
- Comprehensive error handling and user guidance
- Advanced debugging capabilities for troubleshooting
- Automatic cleanup and resource management
This completes the E2B sandbox integration as a fully production-ready system
for executing Claude Code in secure isolated cloud environments.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace deprecated Sandbox() constructor with Sandbox.create() method
- Use correct v2.0.2 API signature with named parameters
- Based on official E2B v2.0.2 API documentation
Resolves API compatibility issues with E2B SDK v2.0.2.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix template parameter to be positional argument instead of keyword
- Change env_vars to envs parameter (v2.0.2 API change)
- Update requirements.txt to use E2B SDK v2.0.2
- Based on official e2b-cookbook example for Anthropic Claude Code
Fixes WebSocket connection issues by using latest E2B SDK that no longer relies on WebSockets.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add retry logic with up to 3 attempts for WebSocket failures
- Implement shorter connection timeouts to fail fast
- Add detailed troubleshooting messages for common issues
- Handle network/firewall restriction errors gracefully
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Dani