@different-ai/opencode-browser 3.0.0 → 4.0.0

package/bin/cli.js

@@ -2,30 +2,48 @@
 /**
  * OpenCode Browser - CLI
  *
+ * Architecture (v4):
+ *   OpenCode Plugin <-> Local Broker (unix socket) <-> Native Messaging Host <-> Chrome Extension
+ *
  * Commands:
- *   install  - Install Chrome extension
- *   serve    - Run MCP server (used by OpenCode)
- *   status   - Check connection status
+ *   install   - Install extension + native host
+ *   uninstall - Remove native host registration
+ *   status    - Show installation status
  */
 
-import { existsSync, mkdirSync, writeFileSync, readFileSync, copyFileSync, readdirSync, unlinkSync } from "fs";
+import {
+  existsSync,
+  mkdirSync,
+  writeFileSync,
+  readFileSync,
+  copyFileSync,
+  readdirSync,
+  unlinkSync,
+  chmodSync,
+} from "fs";
 import { homedir, platform } from "os";
 import { join, dirname } from "path";
 import { fileURLToPath } from "url";
-import { execSync, spawn } from "child_process";
 import { createInterface } from "readline";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const PACKAGE_ROOT = join(__dirname, "..");
 
+const BASE_DIR = join(homedir(), ".opencode-browser");
+const EXTENSION_DIR = join(BASE_DIR, "extension");
+const BROKER_DST = join(BASE_DIR, "broker.cjs");
+const NATIVE_HOST_DST = join(BASE_DIR, "native-host.cjs");
+const CONFIG_DST = join(BASE_DIR, "config.json");
+
+const NATIVE_HOST_NAME = "com.opencode.browser_automation";
+
 const COLORS = {
   reset: "\x1b[0m",
   bright: "\x1b[1m",
   red: "\x1b[31m",
   green: "\x1b[32m",
   yellow: "\x1b[33m",
-  blue: "\x1b[34m",
   cyan: "\x1b[36m",
 };
 
@@ -61,9 +79,7 @@ const rl = createInterface({
 
 function ask(question) {
   return new Promise((resolve) => {
-    rl.question(question, (answer) => {
-      resolve(answer.trim());
-    });
+    rl.question(question, (answer) => resolve(answer.trim()));
   });
 }
 
@@ -72,323 +88,306 @@ async function confirm(question) {
   return answer.toLowerCase() === "y" || answer.toLowerCase() === "yes";
 }
 
+function ensureDir(p) {
+  mkdirSync(p, { recursive: true });
+}
+
+function copyDirRecursive(srcDir, destDir) {
+  ensureDir(destDir);
+  const entries = readdirSync(srcDir, { recursive: true });
+  for (const entry of entries) {
+    const srcPath = join(srcDir, entry);
+    const destPath = join(destDir, entry);
+
+    try {
+      readdirSync(srcPath);
+      ensureDir(destPath);
+    } catch {
+      ensureDir(dirname(destPath));
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function getNativeHostDirs(osName) {
+  if (osName === "darwin") {
+    const base = join(homedir(), "Library", "Application Support");
+    return [
+      join(base, "Google", "Chrome", "NativeMessagingHosts"),
+      join(base, "Chromium", "NativeMessagingHosts"),
+      join(base, "BraveSoftware", "Brave-Browser", "NativeMessagingHosts"),
+    ];
+  }
+
+  // linux
+  const base = join(homedir(), ".config");
+  return [
+    join(base, "google-chrome", "NativeMessagingHosts"),
+    join(base, "chromium", "NativeMessagingHosts"),
+    join(base, "BraveSoftware", "Brave-Browser", "NativeMessagingHosts"),
+  ];
+}
+
+function nativeHostManifestPath(dir) {
+  return join(dir, `${NATIVE_HOST_NAME}.json`);
+}
+
+function writeNativeHostManifest(dir, extensionId) {
+  ensureDir(dir);
+
+  const manifest = {
+    name: NATIVE_HOST_NAME,
+    description: "OpenCode Browser native messaging host",
+    path: NATIVE_HOST_DST,
+    type: "stdio",
+    allowed_origins: [`chrome-extension://${extensionId}/`],
+  };
+
+  writeFileSync(nativeHostManifestPath(dir), JSON.stringify(manifest, null, 2) + "\n");
+}
+
+function loadConfig() {
+  try {
+    if (!existsSync(CONFIG_DST)) return null;
+    return JSON.parse(readFileSync(CONFIG_DST, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+
+function saveConfig(config) {
+  ensureDir(BASE_DIR);
+  writeFileSync(CONFIG_DST, JSON.stringify(config, null, 2) + "\n");
+}
+
 async function main() {
   const command = process.argv[2];
 
-  if (command === "serve") {
-    // Run MCP server - this is called by OpenCode
-    await serve();
-  } else if (command === "install") {
-    await showHeader();
+  console.log(`
+${color("cyan", color("bright", "OpenCode Browser v4"))}
+${color("cyan", "Browser automation plugin (native messaging + per-tab ownership)")}
+`);
+
+  if (command === "install") {
     await install();
-    rl.close();
   } else if (command === "uninstall") {
-    await showHeader();
     await uninstall();
-    rl.close();
   } else if (command === "status") {
-    await showHeader();
     await status();
-    rl.close();
   } else {
-    await showHeader();
     log(`
 ${color("bright", "Usage:")}
-  npx @different-ai/opencode-browser install     Install extension
-  npx @different-ai/opencode-browser uninstall   Remove installation
-  npx @different-ai/opencode-browser status      Check status
-  npx @different-ai/opencode-browser serve       Run MCP server (internal)
+  npx @different-ai/opencode-browser install
+  npx @different-ai/opencode-browser status
+  npx @different-ai/opencode-browser uninstall
 
 ${color("bright", "Quick Start:")}
   1. Run: npx @different-ai/opencode-browser install
-  2. Add to your opencode.json:
-     ${color("cyan", `"mcp": { "browser": { "type": "local", "command": ["bunx", "@different-ai/opencode-browser", "serve"] } }`)}
-  3. Restart OpenCode
+  2. Restart OpenCode
+  3. Use: browser_navigate / browser_click / browser_snapshot
 `);
-    rl.close();
   }
-}
-
-async function showHeader() {
-  console.log(`
-${color("cyan", color("bright", "OpenCode Browser v2.1"))}
-${color("cyan", "Browser automation MCP server for OpenCode")}
-`);
-}
-
-async function serve() {
-  // Launch the MCP server
-  const serverPath = join(PACKAGE_ROOT, "src", "mcp-server.ts");
-  
-  // Use bun to run the TypeScript server
-  const child = spawn("bun", ["run", serverPath], {
-    stdio: "inherit",
-    env: process.env,
-  });
-
-  child.on("error", (err) => {
-    console.error("[browser-mcp] Failed to start server:", err);
-    process.exit(1);
-  });
 
-  child.on("exit", (code) => {
-    process.exit(code || 0);
-  });
-
-  // Forward signals to child
-  process.on("SIGINT", () => child.kill("SIGINT"));
-  process.on("SIGTERM", () => child.kill("SIGTERM"));
+  rl.close();
 }
 
 async function install() {
   header("Step 1: Check Platform");
 
-  const os = platform();
-  if (os !== "darwin" && os !== "linux") {
-    error(`Unsupported platform: ${os}`);
+  const osName = platform();
+  if (osName !== "darwin" && osName !== "linux") {
+    error(`Unsupported platform: ${osName}`);
     error("OpenCode Browser currently supports macOS and Linux only.");
     process.exit(1);
   }
-  success(`Platform: ${os === "darwin" ? "macOS" : "Linux"}`);
+  success(`Platform: ${osName === "darwin" ? "macOS" : "Linux"}`);
 
   header("Step 2: Copy Extension Files");
 
-  const extensionDir = join(homedir(), ".opencode-browser", "extension");
+  ensureDir(BASE_DIR);
   const srcExtensionDir = join(PACKAGE_ROOT, "extension");
+  copyDirRecursive(srcExtensionDir, EXTENSION_DIR);
+  success(`Extension files copied to: ${EXTENSION_DIR}`);
 
-  mkdirSync(extensionDir, { recursive: true });
+  header("Step 3: Load & Pin Extension");
 
-  const files = readdirSync(srcExtensionDir, { recursive: true });
-  for (const file of files) {
-    const srcPath = join(srcExtensionDir, file);
-    const destPath = join(extensionDir, file);
+  log(`
+To load the extension:
 
-    try {
-      const stat = readdirSync(srcPath);
-      mkdirSync(destPath, { recursive: true });
-    } catch {
-      mkdirSync(dirname(destPath), { recursive: true });
-      copyFileSync(srcPath, destPath);
-    }
-  }
+1. Open ${color("cyan", "chrome://extensions")}
+2. Enable ${color("bright", "Developer mode")}
+3. Click ${color("bright", "Load unpacked")}
+4. Select:
+   ${color("cyan", EXTENSION_DIR)}
+
+After loading, ${color("bright", "pin the extension")}: open the Extensions menu (puzzle icon) and click the pin.
+`);
 
-  success(`Extension files copied to: ${extensionDir}`);
+  await ask(color("bright", "Press Enter when you've loaded and pinned the extension..."));
 
-  header("Step 3: Load Extension in Chrome");
+  header("Step 4: Get Extension ID");
 
   log(`
-Works with: ${color("cyan", "Chrome")}, ${color("cyan", "Brave")}, ${color("cyan", "Arc")}, ${color("cyan", "Edge")}, and other Chromium browsers.
+We need the extension ID to register the native messaging host.
 
-To load the extension:
+Find it at ${color("cyan", "chrome://extensions")}:
+- Locate ${color("bright", "OpenCode Browser Automation")}
+- Click ${color("bright", "Details")}
+- Copy the ${color("bright", "ID")}
+`);
 
-1. Open your browser and go to: ${color("cyan", "chrome://extensions")}
-   (or ${color("cyan", "brave://extensions")}, ${color("cyan", "arc://extensions")}, etc.)
+  const extensionId = await ask(color("bright", "Paste Extension ID: "));
+  if (!/^[a-p]{32}$/i.test(extensionId)) {
+    warn("That doesn't look like a Chrome extension ID (expected 32 chars a-p). Continuing anyway.");
+  }
 
-2. Enable ${color("bright", "Developer mode")} (toggle in top right)
+  header("Step 5: Install Local Host + Broker");
 
-3. Click ${color("bright", "Load unpacked")}
+  const brokerSrc = join(PACKAGE_ROOT, "bin", "broker.cjs");
+  const nativeHostSrc = join(PACKAGE_ROOT, "bin", "native-host.cjs");
 
-4. Select this folder:
-   ${color("cyan", extensionDir)}
-   ${os === "darwin" ? color("yellow", "Tip: Press Cmd+Shift+G and paste the path above") : ""}
-`);
+  copyFileSync(brokerSrc, BROKER_DST);
+  copyFileSync(nativeHostSrc, NATIVE_HOST_DST);
 
-  await ask(color("bright", "Press Enter when you've loaded the extension..."));
+  try {
+    chmodSync(BROKER_DST, 0o755);
+  } catch {}
+  try {
+    chmodSync(NATIVE_HOST_DST, 0o755);
+  } catch {}
 
-  header("Step 4: Configure OpenCode");
+  success(`Installed broker: ${BROKER_DST}`);
+  success(`Installed native host: ${NATIVE_HOST_DST}`);
 
-  const mcpConfig = {
-    browser: {
-      type: "local",
-      command: ["bunx", "@different-ai/opencode-browser", "serve"],
-    },
-  };
+  saveConfig({ extensionId, installedAt: new Date().toISOString() });
 
-  log(`
-Add the MCP server to your ${color("cyan", "opencode.json")}:
+  header("Step 6: Register Native Messaging Host");
 
-${color("bright", JSON.stringify({ $schema: "https://opencode.ai/config.json", mcp: mcpConfig }, null, 2))}
+  const hostDirs = getNativeHostDirs(osName);
+  for (const dir of hostDirs) {
+    try {
+      writeNativeHostManifest(dir, extensionId);
+      success(`Wrote native host manifest: ${nativeHostManifestPath(dir)}`);
+    } catch (e) {
+      warn(`Could not write native host manifest to: ${dir}`);
+    }
+  }
 
-Or if you already have an opencode.json, add to the "mcp" object:
-${color("bright", JSON.stringify({ mcp: mcpConfig }, null, 2))}
-`);
+  header("Step 7: Configure OpenCode");
 
   const opencodeJsonPath = join(process.cwd(), "opencode.json");
 
-  if (existsSync(opencodeJsonPath)) {
-    const shouldUpdate = await confirm(`Found opencode.json. Add MCP server automatically?`);
+  const desiredPlugin = "@different-ai/opencode-browser";
 
+  if (existsSync(opencodeJsonPath)) {
+    const shouldUpdate = await confirm("Found opencode.json. Add plugin automatically?");
     if (shouldUpdate) {
       try {
         const config = JSON.parse(readFileSync(opencodeJsonPath, "utf-8"));
-        config.mcp = config.mcp || {};
-        config.mcp.browser = mcpConfig.browser;
-        
-        // Remove old plugin config if present
-        if (config.plugin && Array.isArray(config.plugin)) {
-          const idx = config.plugin.indexOf("@different-ai/opencode-browser");
-          if (idx !== -1) {
-            config.plugin.splice(idx, 1);
-            warn("Removed old plugin entry (replaced by MCP)");
-          }
-          if (config.plugin.length === 0) {
-            delete config.plugin;
-          }
+        config.plugin = config.plugin || [];
+        if (!Array.isArray(config.plugin)) config.plugin = [];
+        if (!config.plugin.includes(desiredPlugin)) config.plugin.push(desiredPlugin);
+
+        // Remove MCP config if present
+        if (config.mcp?.browser) {
+          delete config.mcp.browser;
+          if (Object.keys(config.mcp).length === 0) delete config.mcp;
+          warn("Removed old MCP browser config (replaced by plugin)");
         }
-        
+
         writeFileSync(opencodeJsonPath, JSON.stringify(config, null, 2) + "\n");
-        success("Updated opencode.json with MCP server");
+        success("Updated opencode.json with plugin");
       } catch (e) {
         error(`Failed to update opencode.json: ${e.message}`);
-        log("Please add the MCP config manually.");
       }
     }
   } else {
-    const shouldCreate = await confirm(`No opencode.json found. Create one?`);
-
+    const shouldCreate = await confirm("No opencode.json found. Create one?");
     if (shouldCreate) {
-      try {
-        const config = {
-          $schema: "https://opencode.ai/config.json",
-          mcp: mcpConfig,
-        };
-        writeFileSync(opencodeJsonPath, JSON.stringify(config, null, 2) + "\n");
-        success("Created opencode.json with MCP server");
-      } catch (e) {
-        error(`Failed to create opencode.json: ${e.message}`);
-      }
+      const config = { $schema: "https://opencode.ai/config.json", plugin: [desiredPlugin] };
+      writeFileSync(opencodeJsonPath, JSON.stringify(config, null, 2) + "\n");
+      success("Created opencode.json with plugin");
     }
   }
 
-  // Clean up old daemon/plugin if present
-  header("Step 5: Cleanup (migration)");
-
-  const oldDaemonPlist = join(homedir(), "Library", "LaunchAgents", "com.opencode.browser-daemon.plist");
-  if (existsSync(oldDaemonPlist)) {
-    try {
-      execSync(`launchctl unload "${oldDaemonPlist}" 2>/dev/null || true`, { stdio: "ignore" });
-      unlinkSync(oldDaemonPlist);
-      success("Removed old daemon (no longer needed)");
-    } catch {
-      warn("Could not remove old daemon plist. Remove manually if needed.");
-    }
-  }
-
-  // Remove old lock file
-  const oldLockFile = join(homedir(), ".opencode-browser", "lock.json");
-  if (existsSync(oldLockFile)) {
-    try {
-      unlinkSync(oldLockFile);
-      success("Removed old lock file (not needed with MCP)");
-    } catch {}
-  }
-
-  success("Cleanup complete");
-
   header("Installation Complete!");
 
   log(`
-${color("green", "")} Extension: ${extensionDir}
-${color("green", "")} MCP Server: @different-ai/opencode-browser
-
-${color("bright", "How it works:")}
-  1. OpenCode spawns MCP server on demand
-  2. MCP server starts WebSocket server on port 19222
-  3. Chrome extension connects automatically
-  4. Browser tools are available to any OpenCode session!
-
-${color("bright", "Available tools:")}
-  browser_status      - Check if browser is connected
-  browser_navigate    - Go to a URL
-  browser_click       - Click an element
-  browser_type        - Type into an input
-  browser_screenshot  - Capture the page
-  browser_snapshot    - Get accessibility tree + all links
-  browser_get_tabs    - List open tabs
-  browser_scroll      - Scroll the page
-  browser_wait        - Wait for duration
-  browser_execute     - Run JavaScript
-
-${color("bright", "Benefits of MCP architecture:")}
-  - No session conflicts between OpenCode instances
-  - Server runs independently of OpenCode process
-  - Clean separation of concerns
-
-${color("bright", "Test it:")}
-  Restart OpenCode and try: ${color("cyan", '"Check browser status"')}
+${color("bright", "What happens now:")}
+  - The extension connects to the native host automatically.
+  - OpenCode loads the plugin, which talks to the broker.
+  - The broker enforces ${color("bright", "per-tab ownership")}. First touch auto-claims.
+
+${color("bright", "Try it:")}
+  Restart OpenCode and run: ${color("cyan", "browser_get_tabs")}
 `);
 }
 
 async function status() {
-  header("Browser Status");
+  header("Status");
 
-  // Check if port 19222 is in use
-  try {
-    const result = execSync("lsof -i :19222 2>/dev/null || true", { encoding: "utf-8" });
-    if (result.trim()) {
-      success("WebSocket server is running on port 19222");
-      log(result);
-    } else {
-      warn("WebSocket server not running (starts on demand via MCP)");
-    }
-  } catch {
-    warn("Could not check port status");
-  }
+  success(`Base dir: ${BASE_DIR}`);
+  success(`Extension dir present: ${existsSync(EXTENSION_DIR)}`);
+  success(`Broker installed: ${existsSync(BROKER_DST)}`);
+  success(`Native host installed: ${existsSync(NATIVE_HOST_DST)}`);
 
-  // Check extension directory
-  const extensionDir = join(homedir(), ".opencode-browser", "extension");
-  if (existsSync(extensionDir)) {
-    success(`Extension installed at: ${extensionDir}`);
+  const cfg = loadConfig();
+  if (cfg?.extensionId) {
+    success(`Configured extension ID: ${cfg.extensionId}`);
   } else {
-    warn("Extension not installed. Run: npx @different-ai/opencode-browser install");
+    warn("No config.json found (run install)");
   }
-}
 
-async function uninstall() {
-  header("Uninstalling OpenCode Browser");
-
-  // Remove old daemon
-  const os = platform();
-  if (os === "darwin") {
-    const plistPath = join(homedir(), "Library", "LaunchAgents", "com.opencode.browser-daemon.plist");
-    if (existsSync(plistPath)) {
-      try {
-        execSync(`launchctl unload "${plistPath}" 2>/dev/null || true`, { stdio: "ignore" });
-        unlinkSync(plistPath);
-        success("Removed daemon plist");
-      } catch {}
+  const osName = platform();
+  const hostDirs = getNativeHostDirs(osName);
+  let foundAny = false;
+  for (const dir of hostDirs) {
+    const p = nativeHostManifestPath(dir);
+    if (existsSync(p)) {
+      foundAny = true;
+      success(`Native host manifest: ${p}`);
     }
   }
+  if (!foundAny) {
+    warn("No native host manifest found. Run: npx @different-ai/opencode-browser install");
+  }
+}
 
-  // Remove native host registration (v1.x)
-  const nativeHostDir =
-    os === "darwin"
-      ? join(homedir(), "Library", "Application Support", "Google", "Chrome", "NativeMessagingHosts")
-      : join(homedir(), ".config", "google-chrome", "NativeMessagingHosts");
+async function uninstall() {
+  header("Uninstall");
 
-  const manifestPath = join(nativeHostDir, "com.opencode.browser_automation.json");
-  if (existsSync(manifestPath)) {
-    unlinkSync(manifestPath);
-    success("Removed native host registration");
+  const osName = platform();
+  const hostDirs = getNativeHostDirs(osName);
+  for (const dir of hostDirs) {
+    const p = nativeHostManifestPath(dir);
+    if (!existsSync(p)) continue;
+    try {
+      unlinkSync(p);
+      success(`Removed native host manifest: ${p}`);
+    } catch {
+      warn(`Could not remove: ${p}`);
+    }
   }
 
-  // Remove lock file
-  const lockFile = join(homedir(), ".opencode-browser", "lock.json");
-  if (existsSync(lockFile)) {
-    unlinkSync(lockFile);
-    success("Removed lock file");
+  for (const p of [BROKER_DST, NATIVE_HOST_DST, CONFIG_DST, join(BASE_DIR, "broker.sock")]) {
+    if (!existsSync(p)) continue;
+    try {
+      unlinkSync(p);
+      success(`Removed: ${p}`);
+    } catch {
+      // ignore
+    }
   }
 
   log(`
-${color("bright", "Note:")} Extension files at ~/.opencode-browser/ were not removed.
-Remove manually if needed:
-  rm -rf ~/.opencode-browser/
-
-Also remove the "browser" entry from your opencode.json mcp section.
+${color("bright", "Note:")}
+- The unpacked extension folder remains at: ${EXTENSION_DIR}
+- Remove it manually in ${color("cyan", "chrome://extensions")}
+- Remove ${color("bright", "@different-ai/opencode-browser")} from your opencode.json plugin list if desired.
 `);
 }
 
 main().catch((e) => {
-  error(e.message);
+  error(e.message || String(e));
   process.exit(1);
 });