HopX VS Code Extension
A robust VS Code extension for managing Bunnyshell workspaces and environments.
Recent Fixes (VS Code API Issues)
Problem
The extension was experiencing "VS Code API already acquired or not available" errors when clicking on workspaces in the sidebar. This was caused by:
- Multiple
acquireVsCodeApi()
calls: The main webview and HTML scripts were both trying to acquire the VS Code API
- Race conditions: Webview panel creation and message handling had timing issues
- Poor error handling: Insufficient error handling for production use
Solutions Implemented
1. Robust VS Code API Acquisition
- Singleton Pattern: Implemented a global singleton to prevent multiple API acquisitions
- Fallback Mechanism: Added fallback to use existing API instance if acquisition fails
- Error Recovery: Graceful handling of API acquisition errors
// In useVsCodeApi hook
if ((window as any).__vscodeApi) {
console.log('useVsCodeApi: Using existing VS Code API instance');
setApi((window as any).__vscodeApi);
setIsLoading(false);
return;
}
2. Improved Webview Panel Management
- Retry Logic: Added retry mechanism for webview panel creation
- Better State Management: Improved tracking of webview panel state
- Enhanced Error Handling: More comprehensive error handling and logging
async function ensureWebviewPanelOpenAndReady(): Promise<void> {
const maxRetries = 3;
let retryCount = 0;
while (retryCount < maxRetries) {
// Retry logic with exponential backoff
}
}
3. Robust HTML Scripts
- Safe API Acquisition: HTML scripts now use a safe API acquisition pattern
- Null Checks: Added proper null checks before using the API
- Error Handling: Graceful degradation when API is not available
function getVscodeApi() {
if (vscode) return vscode;
try {
if (typeof acquireVsCodeApi !== 'undefined') {
vscode = acquireVsCodeApi();
return vscode;
}
} catch (error) {
console.warn('Failed to acquire VS Code API:', error);
}
// Fallback: try to use existing instance
if (window.__vscodeApi) {
vscode = window.__vscodeApi;
return vscode;
}
return null;
}
Production Readiness Features
1. Comprehensive Logging
- Detailed logging throughout the extension lifecycle
- Error tracking with stack traces
- Performance monitoring for webview operations
2. Error Recovery
- Automatic retry mechanisms for failed operations
- Graceful degradation when services are unavailable
- User-friendly error messages
3. State Management
- Proper cleanup of resources
- Memory leak prevention
- Consistent state across webview instances
4. Security
- Secure token storage using VS Code's secret storage
- Input validation for all user inputs
- Safe API communication patterns
Usage
Installation
- Install the extension in VS Code
- Configure your Bunnyshell API token
- Use the sidebar to manage workspaces
Configuration
- Set your Bunnyshell API token via the command palette
- Token is securely stored in VS Code's secret storage
Features
- Workspace Management: View, create, and manage workspaces
- Environment Control: Start, stop, and delete environments
- SSH Key Management: Add and manage SSH keys for components
- Remote Development: Connect to remote development environments
Development
Building
npm install
npm run compile
Testing
npm run test
Debugging
- Use the "HopX" output channel for detailed logs
- Check the browser console in webview for client-side errors
Troubleshooting
Common Issues
"VS Code API already acquired" error
- The extension now handles this automatically
- If it persists, reload the VS Code window
Webview not loading
- Check the output channel for error messages
- Ensure the extension is properly activated
API token issues
- Reset the token using the command palette
- Verify the token has proper permissions
Debug Mode
Enable debug logging by setting the log level in VS Code settings:
{
"hopx.logLevel": "debug"
}
Architecture
Components
- Extension Host: Main extension logic in TypeScript
- Webview: React-based UI for workspace management
- Sidebar: TreeView for workspace navigation
- API Layer: Secure communication with Bunnyshell APIs
Message Flow
- User interaction in webview/sidebar
- Message sent to extension host
- API call to Bunnyshell
- Response sent back to webview
- UI updated with results
Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
License
[Add your license information here]
© 2024 Bunnyshell. This extension is not affiliated with Microsoft or Visual Studio Code.