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:

1. Multiple acquireVsCodeApi() calls: The main webview and HTML scripts were both trying to acquire the VS Code API
2. Race conditions: Webview panel creation and message handling had timing issues
3. 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

1. Install the extension in VS Code
2. Configure your Bunnyshell API token
3. 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

1. "VS Code API already acquired" error

   • The extension now handles this automatically
   • If it persists, reload the VS Code window

2. Webview not loading

   • Check the output channel for error messages
   • Ensure the extension is properly activated

3. 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

1. User interaction in webview/sidebar
2. Message sent to extension host
3. API call to Bunnyshell
4. Response sent back to webview
5. UI updated with results

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

[Add your license information here]

© 2024 Bunnyshell. This extension is not affiliated with Microsoft or Visual Studio Code.