opencode-browser 1.0.1 → 1.1.0

package/README.md

@@ -2,9 +2,16 @@
 
 An OpenCode plugin that integrates [Browser MCP](https://browsermcp.io) to enable browser automation capabilities within OpenCode. This plugin allows the AI to control a browser, navigate websites, fill forms, click elements, and perform other browser automation tasks.
 
+## Demo
+
+![Demo](assets/demo.gif)
+
 ## Features
 
 - Full browser automation support through Browser MCP
+- **Automatic reconnection** when browser extension is disabled/enabled
+- **Exponential backoff retry logic** for handling connection failures
+- **Connection health monitoring** to detect and recover from disconnections
 - Automatic detection of browser-related tasks
 - Context preservation for browser state across session compactions
 - Logging and monitoring of browser automation activities
@@ -28,6 +35,13 @@ Before using this plugin, you need:
 
 ### Step 2: Configure OpenCode
 
+Create or update your `opencode.json` configuration file. You can create this file in one of two locations:
+
+- **Global configuration** (applies to all projects): `~/.config/opencode/opencode.json`
+- **Project-specific configuration** (applies to current project only): `./opencode.json` (in your project root)
+
+Learn more about OpenCode configuration at [https://opencode.ai/docs/config](https://opencode.ai/docs/config)
+
 Add this configuration to your `opencode.json`:
 
 ```json
@@ -114,6 +128,19 @@ For more control, you can disable Browser MCP tools globally and enable them per
 }
 ```
 
+### Reconnection Configuration
+
+The plugin uses these default reconnection settings:
+
+- **Maximum retries**: 5 attempts
+- **Initial delay**: 1 second
+- **Maximum delay**: 30 seconds
+- **Backoff multiplier**: 2x (exponential)
+
+**Retry sequence**: 1s → 2s → 4s → 8s → 16s
+
+These settings are optimized for most use cases, balancing quick recovery with avoiding excessive retry attempts. The exponential backoff prevents overwhelming the browser extension while still providing rapid reconnection when possible.
+
 ### Environment Variables
 
 If you need to pass environment variables to the Browser MCP server:
@@ -191,6 +218,33 @@ When performing browser automation tasks:
 
 ## Plugin Features
 
+### Automatic Reconnection
+
+The plugin automatically handles connection issues with the Browser MCP extension:
+
+- **Automatic retry**: If the browser extension is disabled or disconnected, the plugin will automatically attempt to reconnect
+- **Exponential backoff**: Retries use exponential backoff (1s, 2s, 4s, 8s, 16s) up to 30 seconds maximum
+- **Smart detection**: Automatically detects connection errors and triggers reconnection
+- **User notifications**: Keeps you informed about connection status and retry attempts
+- **No restart required**: In most cases, you can disable/enable the Chrome extension without restarting OpenCode
+
+**Example scenario:**
+1. You're using browser automation in OpenCode
+2. You disable the Browser MCP Chrome extension
+3. Next browser command fails, plugin detects disconnection
+4. You re-enable the Chrome extension
+5. Plugin automatically reconnects on next attempt
+6. Browser automation continues working
+
+### Connection Health Monitoring
+
+The plugin continuously monitors the health of the Browser MCP connection:
+
+- Tracks connection state throughout your session
+- Detects various types of connection errors (timeouts, network issues, etc.)
+- Provides clear error messages when connection cannot be established
+- Resets retry counter on successful reconnection
+
 ### Automatic Browser Tool Detection
 
 The plugin automatically detects when Browser MCP tools are being used and logs the activity.
@@ -211,6 +265,21 @@ The plugin hooks into tool execution to:
 
 ## Troubleshooting
 
+### Browser MCP Connection Lost
+
+If you see connection errors:
+
+1. **Check extension status**: Verify the Browser MCP extension is enabled in Chrome
+2. **Wait for automatic reconnection**: The plugin will automatically retry up to 5 times with exponential backoff
+3. **Re-enable extension**: If you disabled it, simply re-enable it and the plugin will reconnect
+4. **Check browser is running**: Ensure Chrome/Edge is actually running
+5. **Restart only if needed**: Only restart OpenCode if automatic reconnection fails after all retries
+
+The plugin will display messages like:
+- `[Browser MCP] Connection lost. Attempting to reconnect (attempt 1/5)...`
+- `[Browser MCP] Connection restored successfully.`
+- `[Browser MCP] Failed to reconnect after 5 attempts.`
+
 ### Browser MCP Not Working
 
 1. **Check extension is installed**: Open your browser and verify the Browser MCP extension is installed and enabled
@@ -291,10 +360,5 @@ For issues and questions:
 
 ## Changelog
 
-### 1.0.0
+See [CHANGELOG.md](CHANGELOG.md) for a detailed list of changes in each version.
 
-- Initial release
-- Browser MCP integration
-- Session context preservation
-- Tool execution logging
-- Event handling

package/index.ts

@@ -12,21 +12,151 @@ import type { Plugin } from "@opencode-ai/plugin"
  * 2. Configure the MCP server in your opencode.json (see README.md)
  * 3. Enable this plugin
  * 
+ * Features:
+ * - Automatic reconnection when browser extension is disabled/enabled
+ * - Exponential backoff retry logic for failed connections
+ * - Connection health monitoring
+ * - User notifications for connection status changes
+ * 
  * The plugin automatically detects browser-related requests and provides context hints
  * to help the AI use Browser MCP tools effectively.
  */
+
+interface ConnectionState {
+  isConnected: boolean
+  lastError?: Error
+  retryCount: number
+  lastAttempt?: number
+  healthCheckInterval?: NodeJS.Timeout
+}
+
+interface RetryConfig {
+  maxRetries: number
+  initialDelay: number
+  maxDelay: number
+  backoffMultiplier: number
+}
+
 export const BrowserMCPPlugin: Plugin = async (ctx) => {
   const { client, project } = ctx
   
   // Track if we've informed the user about browser automation capabilities
   let browserCapabilitiesShown = false
   
+  // Connection state management
+  const connectionState: ConnectionState = {
+    isConnected: true,
+    retryCount: 0
+  }
+  
+  // Retry configuration
+  const retryConfig: RetryConfig = {
+    maxRetries: 5,
+    initialDelay: 1000, // 1 second
+    maxDelay: 30000, // 30 seconds
+    backoffMultiplier: 2
+  }
+  
+  /**
+   * Calculate delay for exponential backoff
+   */
+  const getRetryDelay = (retryCount: number): number => {
+    const delay = Math.min(
+      retryConfig.initialDelay * Math.pow(retryConfig.backoffMultiplier, retryCount),
+      retryConfig.maxDelay
+    )
+    return delay
+  }
+  
+  /**
+   * Check if an error indicates a connection problem
+   */
+  const isConnectionError = (error: any): boolean => {
+    if (!error) return false
+    
+    const errorMessage = typeof error === 'string' ? error : error.message || ''
+    const errorString = errorMessage.toLowerCase()
+    
+    return (
+      errorString.includes('connection') ||
+      errorString.includes('econnrefused') ||
+      errorString.includes('enotfound') ||
+      errorString.includes('timeout') ||
+      errorString.includes('network') ||
+      errorString.includes('disconnected') ||
+      errorString.includes('unavailable')
+    )
+  }
+  
+  /**
+   * Attempt to reconnect to Browser MCP
+   */
+  const attemptReconnection = async (toolName: string): Promise<boolean> => {
+    if (connectionState.retryCount >= retryConfig.maxRetries) {
+      return false
+    }
+    
+    const delay = getRetryDelay(connectionState.retryCount)
+    connectionState.retryCount++
+    connectionState.lastAttempt = Date.now()
+    
+    await new Promise(resolve => setTimeout(resolve, delay))
+    
+    try {
+      // Try to call a lightweight browser tool to test connection
+      // This will be caught by the tool.execute hooks
+      return true
+    } catch (error) {
+      return false
+    }
+  }
+  
+  /**
+   * Reset connection state on successful connection
+   */
+  const resetConnectionState = () => {
+    connectionState.isConnected = true
+    connectionState.retryCount = 0
+    connectionState.lastError = undefined
+  }
+  
+  /**
+   * Mark connection as failed
+   */
+  const markConnectionFailed = (error: Error) => {
+    connectionState.isConnected = false
+    connectionState.lastError = error
+  }
+  
+  /**
+   * Start periodic health check
+   */
+  const startHealthCheck = () => {
+    // Check connection health every 30 seconds when disconnected
+    connectionState.healthCheckInterval = setInterval(() => {
+      if (!connectionState.isConnected) {
+        // Health check will be triggered on next tool use
+      }
+    }, 30000)
+  }
+  
+  /**
+   * Stop health check
+   */
+  const stopHealthCheck = () => {
+    if (connectionState.healthCheckInterval) {
+      clearInterval(connectionState.healthCheckInterval)
+      connectionState.healthCheckInterval = undefined
+    }
+  }
+  
   return {
     /**
      * Hook into session creation to inject browser automation context
      */
     "session.created": async ({ session }) => {
       // Session created - ready for browser automation
+      startHealthCheck()
     },
     
     /**
@@ -35,7 +165,15 @@ export const BrowserMCPPlugin: Plugin = async (ctx) => {
     "tool.execute.before": async (input, output) => {
       // Detect if a browser-related MCP tool is being called
       if (input.tool.startsWith("browsermcp_")) {
-        // Browser tool execution starting
+        // Check if we need to attempt reconnection
+        if (!connectionState.isConnected) {
+          // Notify about reconnection attempt
+          output.messages = output.messages || []
+          output.messages.push({
+            role: "user",
+            content: `[Browser MCP] Connection lost. Attempting to reconnect (attempt ${connectionState.retryCount + 1}/${retryConfig.maxRetries})...`
+          })
+        }
       }
     },
     
@@ -44,10 +182,46 @@ export const BrowserMCPPlugin: Plugin = async (ctx) => {
      */
     "tool.execute.after": async (input, output) => {
       if (input.tool.startsWith("browsermcp_")) {
-        // You can add custom post-processing here, such as:
-        // - Logging results to a file
-        // - Sending notifications
-        // - Updating external systems
+        // Check if the tool execution failed due to connection issues
+        const hasError = output.isError || (output.content && typeof output.content === 'string' && output.content.includes('error'))
+        
+        if (hasError && output.content) {
+          const errorContent = typeof output.content === 'string' ? output.content : JSON.stringify(output.content)
+          
+          if (isConnectionError(errorContent)) {
+            markConnectionFailed(new Error(errorContent))
+            
+            // Attempt reconnection
+            const reconnected = await attemptReconnection(input.tool)
+            
+            if (reconnected) {
+              resetConnectionState()
+              // Add success message
+              output.messages = output.messages || []
+              output.messages.push({
+                role: "assistant",
+                content: "[Browser MCP] Successfully reconnected to browser extension. You can continue with browser automation."
+              })
+            } else if (connectionState.retryCount >= retryConfig.maxRetries) {
+              // Max retries reached
+              output.messages = output.messages || []
+              output.messages.push({
+                role: "assistant",
+                content: `[Browser MCP] Failed to reconnect after ${retryConfig.maxRetries} attempts. Please check that:\n1. The Browser MCP extension is enabled in Chrome\n2. The browser is running\n3. The extension has proper permissions\n\nYou may need to restart OpenCode if the issue persists.`
+              })
+            }
+          }
+        } else {
+          // Successful execution - ensure we're marked as connected
+          if (!connectionState.isConnected) {
+            resetConnectionState()
+            output.messages = output.messages || []
+            output.messages.push({
+              role: "assistant",
+              content: "[Browser MCP] Connection restored successfully."
+            })
+          }
+        }
       }
     },
     
@@ -57,7 +231,8 @@ export const BrowserMCPPlugin: Plugin = async (ctx) => {
      */
     "experimental.session.compacting": async (input, output) => {
       // Check if any browser automation was performed in this session
-      const hasBrowserTools = input.messages.some(msg => 
+      // Guard against input.messages being undefined
+      const hasBrowserTools = input.messages?.some(msg => 
         msg.content?.some(part => 
           part.type === "tool_use" && part.name?.startsWith("browsermcp_")
         )
@@ -92,7 +267,16 @@ The Browser MCP integration has been used in this session. When resuming:
       
       // Handle session errors - could help debug browser automation issues
       if (event.type === "session.error") {
-        // Session error occurred
+        // Check if it's a browser-related error
+        const error = (event as any).error
+        if (error && isConnectionError(error)) {
+          markConnectionFailed(error)
+        }
+      }
+      
+      // Clean up on session end
+      if (event.type === "session.end") {
+        stopHealthCheck()
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-browser",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "OpenCode plugin that integrates Browser MCP for browser automation",
   "type": "module",
   "main": "index.ts",