@jackwener/opencli 0.9.6 → 1.0.0

package/dist/setup.js

@@ -1,180 +1,66 @@
 /**
- * setup.ts — Interactive Playwright MCP token setup
+ * setup.ts — Interactive browser setup for opencli
  *
- * Discovers the extension token, shows an interactive checkbox
- * for selecting which config files to update, and applies changes.
+ * Simplified for daemon-based architecture. No more token management.
+ * Just verifies daemon + extension connectivity.
  */
-import * as fs from 'node:fs';
 import chalk from 'chalk';
-import { createInterface } from 'node:readline/promises';
-import { stdin as input, stdout as output } from 'node:process';
-import { PLAYWRIGHT_TOKEN_ENV, checkExtensionInstalled, checkTokenConnectivity, discoverExtensionToken, fileExists, getDefaultShellRcPath, runBrowserDoctor, shortenPath, toolName, upsertJsonConfigToken, upsertShellToken, upsertTomlConfigToken, writeFileWithMkdir, } from './doctor.js';
-import { getTokenFingerprint } from './browser/index.js';
-import { checkboxPrompt } from './tui.js';
+import { checkDaemonStatus } from './browser/discover.js';
+import { checkConnectivity } from './doctor.js';
+import { PlaywrightMCP } from './browser/index.js';
 export async function runSetup(opts = {}) {
     console.log();
-    console.log(chalk.bold('  opencli setup') + chalk.dim(' — Playwright MCP token configuration'));
+    console.log(chalk.bold('  opencli setup') + chalk.dim(' — browser bridge configuration'));
     console.log();
-    // Step 1: Discover token
-    let token = opts.token ?? null;
-    if (!token) {
-        const extensionToken = discoverExtensionToken();
-        const envToken = process.env[PLAYWRIGHT_TOKEN_ENV] ?? null;
-        if (extensionToken && envToken && extensionToken === envToken) {
-            token = extensionToken;
-            console.log(`  ${chalk.green('✓')} Token auto-discovered from Chrome extension`);
-            console.log(`    Fingerprint: ${chalk.bold(getTokenFingerprint(token) ?? 'unknown')}`);
-        }
-        else if (extensionToken) {
-            token = extensionToken;
-            console.log(`  ${chalk.green('✓')} Token discovered from Chrome extension ` +
-                chalk.dim(`(${getTokenFingerprint(token)})`));
-            if (envToken && envToken !== extensionToken) {
-                console.log(`  ${chalk.yellow('!')} Environment has different token ` +
-                    chalk.dim(`(${getTokenFingerprint(envToken)})`));
-            }
-        }
-        else if (envToken) {
-            token = envToken;
-            console.log(`  ${chalk.green('✓')} Token from environment variable ` +
-                chalk.dim(`(${getTokenFingerprint(token)})`));
-        }
+    // Step 1: Check daemon
+    console.log(chalk.dim('  Checking daemon status...'));
+    const status = await checkDaemonStatus();
+    if (status.running) {
+        console.log(`  ${chalk.green('✓')} Daemon is running on port 19825`);
     }
     else {
-        console.log(`  ${chalk.green('✓')} Using provided token ` +
-            chalk.dim(`(${getTokenFingerprint(token)})`));
-    }
-    if (!token) {
-        // Give precise diagnosis of why token scan failed
-        const extInstall = checkExtensionInstalled();
-        console.log(`  ${chalk.red('✗')} Browser token scan failed\n`);
-        if (!extInstall.installed) {
-            console.log(chalk.dim('  Cause: Playwright MCP Bridge extension is not installed'));
-            console.log(chalk.dim('  Fix:   Install from https://chromewebstore.google.com/detail/'));
-            console.log(chalk.dim('         playwright-mcp-bridge/mmlmfjhmonkocbjadbfplnigmagldckm'));
-        }
-        else {
-            console.log(chalk.dim(`  Cause: Extension is installed (${extInstall.browsers.join(', ')}) but token not found in LevelDB`));
-            console.log(chalk.dim('  Fix:   1) Open the extension popup and verify the token is generated'));
-            console.log(chalk.dim('         2) Close Chrome completely, then re-run setup'));
-        }
-        console.log();
-        console.log(`  You can enter the token manually, or fix the above and re-run ${chalk.bold('opencli setup')}.`);
-        console.log();
-        const rl = createInterface({ input, output });
-        const answer = await rl.question('  Token (press Enter to abort): ');
-        rl.close();
-        token = answer.trim();
-        if (!token) {
-            console.log(chalk.red('\n  No token provided. Aborting.\n'));
-            return;
-        }
-    }
-    const fingerprint = getTokenFingerprint(token) ?? 'unknown';
-    console.log();
-    // Step 2: Scan all config locations
-    const report = await runBrowserDoctor({ token, cliVersion: opts.cliVersion });
-    // Step 3: Build checkbox items
-    const items = [];
-    // Shell file
-    const shellPath = report.shellFiles[0]?.path ?? getDefaultShellRcPath();
-    const shellStatus = report.shellFiles[0];
-    const shellFp = shellStatus?.fingerprint;
-    const shellOk = shellFp === fingerprint;
-    const shellTool = toolName(shellPath) || 'Shell';
-    items.push({
-        label: padRight(shortenPath(shellPath), 50) + chalk.dim(` [${shellTool}]`),
-        value: `shell:${shellPath}`,
-        checked: !shellOk,
-        status: shellOk ? `configured (${shellFp})` : shellFp ? `mismatch (${shellFp})` : 'missing',
-        statusColor: shellOk ? 'green' : shellFp ? 'yellow' : 'red',
-    });
-    // Config files
-    for (const config of report.configs) {
-        const fp = config.fingerprint;
-        const ok = fp === fingerprint;
-        const tool = toolName(config.path);
-        items.push({
-            label: padRight(shortenPath(config.path), 50) + chalk.dim(tool ? ` [${tool}]` : ''),
-            value: `config:${config.path}`,
-            checked: false, // let user explicitly select which tools to configure
-            status: ok ? `configured (${fp})` : !config.exists ? 'will create' : fp ? `mismatch (${fp})` : 'missing',
-            statusColor: ok ? 'green' : 'yellow',
-        });
-    }
-    // Step 4: Show interactive checkbox
-    console.clear();
-    const selected = await checkboxPrompt(items, {
-        title: `  ${chalk.bold('opencli setup')} — token ${chalk.cyan(fingerprint)}`,
-    });
-    if (selected.length === 0) {
-        console.log(chalk.dim('  No changes made.\n'));
-        return;
-    }
-    // Step 5: Apply changes
-    const written = [];
-    let wroteShell = false;
-    for (const sel of selected) {
-        if (sel.startsWith('shell:')) {
-            const p = sel.slice('shell:'.length);
-            const before = fileExists(p) ? fs.readFileSync(p, 'utf-8') : '';
-            writeFileWithMkdir(p, upsertShellToken(before, token, p));
-            written.push(p);
-            wroteShell = true;
+        console.log(`  ${chalk.yellow('!')} Daemon is not running`);
+        console.log(chalk.dim('    The daemon starts automatically when you run a browser command.'));
+        console.log(chalk.dim('    Starting daemon now...'));
+        // Try to spawn daemon
+        const mcp = new PlaywrightMCP();
+        try {
+            await mcp.connect({ timeout: 5 });
+            await mcp.close();
+            console.log(`  ${chalk.green('✓')} Daemon started successfully`);
         }
-        else if (sel.startsWith('config:')) {
-            const p = sel.slice('config:'.length);
-            const config = report.configs.find(c => c.path === p);
-            if (config && config.parseError)
-                continue;
-            const before = fileExists(p) ? fs.readFileSync(p, 'utf-8') : '';
-            const format = config?.format ?? (p.endsWith('.toml') ? 'toml' : 'json');
-            const next = format === 'toml' ? upsertTomlConfigToken(before, token) : upsertJsonConfigToken(before, token, p);
-            writeFileWithMkdir(p, next);
-            written.push(p);
+        catch {
+            console.log(`  ${chalk.yellow('!')} Could not start daemon automatically`);
         }
     }
-    process.env[PLAYWRIGHT_TOKEN_ENV] = token;
-    // Step 6: Summary
-    if (written.length > 0) {
-        console.log(chalk.green.bold(`  ✓ Updated ${written.length} file(s):`));
-        for (const p of written) {
-            const tool = toolName(p);
-            console.log(`    ${chalk.dim('•')} ${shortenPath(p)}${tool ? chalk.dim(` [${tool}]`) : ''}`);
-        }
-        if (wroteShell) {
-            console.log();
-            console.log(chalk.cyan(`  💡 Run ${chalk.bold(`source ${shortenPath(shellPath)}`)} to apply token to current shell.`));
-        }
+    // Step 2: Check extension
+    const statusAfter = await checkDaemonStatus();
+    if (statusAfter.extensionConnected) {
+        console.log(`  ${chalk.green('✓')} Chrome extension connected`);
     }
     else {
-        console.log(chalk.yellow('  No files were changed.'));
+        console.log(`  ${chalk.red('✗')} Chrome extension not connected`);
+        console.log();
+        console.log(chalk.dim('  To install the opencli Browser Bridge extension:'));
+        console.log(chalk.dim('    1. Download from GitHub Releases'));
+        console.log(chalk.dim('    2. Open chrome://extensions/ → Enable Developer Mode'));
+        console.log(chalk.dim('    3. Click "Load unpacked" → select the extension folder'));
+        console.log(chalk.dim('    4. Make sure Chrome is running'));
+        console.log();
+        return;
     }
+    // Step 3: Test connectivity
     console.log();
-    // Step 7: Auto-verify browser connectivity
-    console.log(chalk.dim('  Verifying browser connectivity...'));
-    try {
-        const result = await checkTokenConnectivity({ timeout: 5 });
-        if (result.ok) {
-            console.log(`  ${chalk.green('✓')} Browser connected in ${(result.durationMs / 1000).toFixed(1)}s`);
-        }
-        else {
-            console.log(`  ${chalk.green('✓')} Token saved successfully.`);
-            console.log(`  ${chalk.yellow('!')} Browser connectivity test failed: ${result.error ?? 'unknown'}`);
-            console.log(chalk.dim('    Token configuration is complete. To use opencli, make sure Chrome'));
-            console.log(chalk.dim('    is running with the Playwright MCP Bridge extension enabled.'));
-            console.log(chalk.dim(`    Run ${chalk.bold('opencli doctor --live')} to re-test connectivity.`));
-        }
+    console.log(chalk.dim('  Testing browser connectivity...'));
+    const conn = await checkConnectivity({ timeout: 5 });
+    if (conn.ok) {
+        console.log(`  ${chalk.green('✓')} Browser connected in ${(conn.durationMs / 1000).toFixed(1)}s`);
+        console.log();
+        console.log(chalk.green.bold('  ✓ Setup complete! You can now use opencli browser commands.'));
     }
-    catch {
-        console.log(`  ${chalk.green('✓')} Token saved successfully.`);
-        console.log(`  ${chalk.yellow('!')} Browser connectivity test skipped (Chrome may not be running).`);
-        console.log(chalk.dim('    Token configuration is complete. Start Chrome to begin using opencli.'));
-        console.log(chalk.dim(`    Run ${chalk.bold('opencli doctor --live')} to re-test connectivity.`));
+    else {
+        console.log(`  ${chalk.yellow('!')} Connectivity test failed: ${conn.error ?? 'unknown'}`);
+        console.log(chalk.dim(`    Run ${chalk.bold('opencli doctor --live')} to diagnose.`));
     }
     console.log();
 }
-function padRight(s, n) {
-    const visible = s.replace(/\x1b\[[0-9;]*m/g, '');
-    return visible.length >= n ? s : s + ' '.repeat(n - visible.length);
-}

package/dist/types.d.ts

@@ -34,4 +34,10 @@ export interface IPage {
     }): Promise<void>;
     installInterceptor(pattern: string): Promise<void>;
     getInterceptedRequests(): Promise<any[]>;
+    screenshot(options?: {
+        format?: 'png' | 'jpeg';
+        quality?: number;
+        fullPage?: boolean;
+        path?: string;
+    }): Promise<string>;
 }

package/extension/manifest.json

@@ -0,0 +1,31 @@
+{
+  "manifest_version": 3,
+  "name": "opencli Browser Bridge",
+  "version": "0.1.0",
+  "description": "Bridge between opencli CLI and your browser — execute commands, read cookies, manage tabs.",
+  "permissions": [
+    "debugger",
+    "tabs",
+    "cookies",
+    "activeTab",
+    "alarms"
+  ],
+  "background": {
+    "service_worker": "dist/background.js",
+    "type": "module"
+  },
+  "icons": {
+    "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  },
+  "action": {
+    "default_title": "opencli Browser Bridge",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "32": "icons/icon-32.png"
+    }
+  },
+  "homepage_url": "https://github.com/jackwener/opencli"
+}

package/extension/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "opencli-extension",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.0.287",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}

package/extension/src/background.ts

@@ -0,0 +1,293 @@
+/**
+ * opencli Browser Bridge — Service Worker (background script).
+ *
+ * Connects to the opencli daemon via WebSocket, receives commands,
+ * dispatches them to Chrome APIs (debugger/tabs/cookies), returns results.
+ */
+
+import type { Command, Result } from './protocol';
+import { DAEMON_WS_URL, WS_RECONNECT_BASE_DELAY, WS_RECONNECT_MAX_DELAY } from './protocol';
+import * as cdp from './cdp';
+
+let ws: WebSocket | null = null;
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let reconnectAttempts = 0;
+
+// ─── Console log forwarding ──────────────────────────────────────────
+// Hook console.log/warn/error to forward logs to daemon via WebSocket.
+
+const _origLog = console.log.bind(console);
+const _origWarn = console.warn.bind(console);
+const _origError = console.error.bind(console);
+
+function forwardLog(level: 'info' | 'warn' | 'error', args: unknown[]): void {
+  if (!ws || ws.readyState !== WebSocket.OPEN) return;
+  try {
+    const msg = args.map(a => typeof a === 'string' ? a : JSON.stringify(a)).join(' ');
+    ws.send(JSON.stringify({ type: 'log', level, msg, ts: Date.now() }));
+  } catch { /* don't recurse */ }
+}
+
+console.log = (...args: unknown[]) => { _origLog(...args); forwardLog('info', args); };
+console.warn = (...args: unknown[]) => { _origWarn(...args); forwardLog('warn', args); };
+console.error = (...args: unknown[]) => { _origError(...args); forwardLog('error', args); };
+
+// ─── WebSocket connection ────────────────────────────────────────────
+
+function connect(): void {
+  if (ws?.readyState === WebSocket.OPEN || ws?.readyState === WebSocket.CONNECTING) return;
+
+  try {
+    ws = new WebSocket(DAEMON_WS_URL);
+  } catch {
+    scheduleReconnect();
+    return;
+  }
+
+  ws.onopen = () => {
+    console.log('[opencli] Connected to daemon');
+    reconnectAttempts = 0; // Reset on successful connection
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+  };
+
+  ws.onmessage = async (event) => {
+    try {
+      const command = JSON.parse(event.data as string) as Command;
+      const result = await handleCommand(command);
+      ws?.send(JSON.stringify(result));
+    } catch (err) {
+      console.error('[opencli] Message handling error:', err);
+    }
+  };
+
+  ws.onclose = () => {
+    console.log('[opencli] Disconnected from daemon');
+    ws = null;
+    scheduleReconnect();
+  };
+
+  ws.onerror = () => {
+    ws?.close();
+  };
+}
+
+function scheduleReconnect(): void {
+  if (reconnectTimer) return;
+  reconnectAttempts++;
+  // Exponential backoff: 2s, 4s, 8s, 16s, ..., capped at 60s
+  const delay = Math.min(WS_RECONNECT_BASE_DELAY * Math.pow(2, reconnectAttempts - 1), WS_RECONNECT_MAX_DELAY);
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    connect();
+  }, delay);
+}
+
+// ─── Lifecycle events ────────────────────────────────────────────────
+
+let initialized = false;
+
+function initialize(): void {
+  if (initialized) return;
+  initialized = true;
+  chrome.alarms.create('keepalive', { periodInMinutes: 0.4 }); // ~24 seconds
+  cdp.registerListeners();
+  connect();
+  console.log('[opencli] Browser Bridge extension initialized');
+}
+
+chrome.runtime.onInstalled.addListener(() => {
+  initialize();
+});
+
+chrome.runtime.onStartup.addListener(() => {
+  initialize();
+});
+
+chrome.alarms.onAlarm.addListener((alarm) => {
+  if (alarm.name === 'keepalive') connect();
+});
+
+// ─── Command dispatcher ─────────────────────────────────────────────
+
+async function handleCommand(cmd: Command): Promise<Result> {
+  try {
+    switch (cmd.action) {
+      case 'exec':
+        return await handleExec(cmd);
+      case 'navigate':
+        return await handleNavigate(cmd);
+      case 'tabs':
+        return await handleTabs(cmd);
+      case 'cookies':
+        return await handleCookies(cmd);
+      case 'screenshot':
+        return await handleScreenshot(cmd);
+      default:
+        return { id: cmd.id, ok: false, error: `Unknown action: ${cmd.action}` };
+    }
+  } catch (err) {
+    return {
+      id: cmd.id,
+      ok: false,
+      error: err instanceof Error ? err.message : String(err),
+    };
+  }
+}
+
+// ─── Action handlers ─────────────────────────────────────────────────
+
+/** Check if a URL is a debuggable web page (not chrome:// or extension page) */
+function isWebUrl(url?: string): boolean {
+  if (!url) return false;
+  return !url.startsWith('chrome://') && !url.startsWith('chrome-extension://');
+}
+
+/** Resolve target tab: use specified tabId or fall back to active web page tab */
+async function resolveTabId(tabId?: number): Promise<number> {
+  if (tabId !== undefined) return tabId;
+
+  // Try the active tab first
+  const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  if (activeTab?.id && isWebUrl(activeTab.url)) {
+    return activeTab.id;
+  }
+
+  // Active tab is not debuggable — try to find any open web page tab
+  const allTabs = await chrome.tabs.query({ currentWindow: true });
+  const webTab = allTabs.find(t => t.id && isWebUrl(t.url));
+  if (webTab?.id) {
+    await chrome.tabs.update(webTab.id, { active: true });
+    return webTab.id;
+  }
+
+  // No web tabs at all — create one
+  const newTab = await chrome.tabs.create({ url: 'about:blank', active: true });
+  if (!newTab.id) throw new Error('Failed to create new tab');
+  return newTab.id;
+}
+
+async function handleExec(cmd: Command): Promise<Result> {
+  if (!cmd.code) return { id: cmd.id, ok: false, error: 'Missing code' };
+  const tabId = await resolveTabId(cmd.tabId);
+  try {
+    const data = await cdp.evaluateAsync(tabId, cmd.code);
+    return { id: cmd.id, ok: true, data };
+  } catch (err) {
+    return { id: cmd.id, ok: false, error: err instanceof Error ? err.message : String(err) };
+  }
+}
+
+async function handleNavigate(cmd: Command): Promise<Result> {
+  if (!cmd.url) return { id: cmd.id, ok: false, error: 'Missing url' };
+  const tabId = await resolveTabId(cmd.tabId);
+  await chrome.tabs.update(tabId, { url: cmd.url });
+
+  // Wait for page to finish loading, checking current status first to avoid race
+  await new Promise<void>((resolve) => {
+    // Check if already complete (e.g. cached pages)
+    chrome.tabs.get(tabId).then(tab => {
+      if (tab.status === 'complete') { resolve(); return; }
+
+      const listener = (id: number, info: chrome.tabs.TabChangeInfo) => {
+        if (id === tabId && info.status === 'complete') {
+          chrome.tabs.onUpdated.removeListener(listener);
+          resolve();
+        }
+      };
+      chrome.tabs.onUpdated.addListener(listener);
+      // Timeout fallback
+      setTimeout(() => {
+        chrome.tabs.onUpdated.removeListener(listener);
+        resolve();
+      }, 15000);
+    });
+  });
+
+  const tab = await chrome.tabs.get(tabId);
+  return { id: cmd.id, ok: true, data: { title: tab.title, url: tab.url, tabId } };
+}
+
+async function handleTabs(cmd: Command): Promise<Result> {
+  switch (cmd.op) {
+    case 'list': {
+      const tabs = await chrome.tabs.query({});
+      const data = tabs
+        .filter((t) => isWebUrl(t.url))
+        .map((t, i) => ({
+          index: i,
+          tabId: t.id,
+          url: t.url,
+          title: t.title,
+          active: t.active,
+        }));
+      return { id: cmd.id, ok: true, data };
+    }
+    case 'new': {
+      const tab = await chrome.tabs.create({ url: cmd.url, active: true });
+      return { id: cmd.id, ok: true, data: { tabId: tab.id, url: tab.url } };
+    }
+    case 'close': {
+      if (cmd.index !== undefined) {
+        const tabs = await chrome.tabs.query({});
+        const target = tabs[cmd.index];
+        if (!target?.id) return { id: cmd.id, ok: false, error: `Tab index ${cmd.index} not found` };
+        await chrome.tabs.remove(target.id);
+        cdp.detach(target.id);
+        return { id: cmd.id, ok: true, data: { closed: target.id } };
+      }
+      const tabId = await resolveTabId(cmd.tabId);
+      await chrome.tabs.remove(tabId);
+      cdp.detach(tabId);
+      return { id: cmd.id, ok: true, data: { closed: tabId } };
+    }
+    case 'select': {
+      if (cmd.index === undefined && cmd.tabId === undefined)
+        return { id: cmd.id, ok: false, error: 'Missing index or tabId' };
+      if (cmd.tabId !== undefined) {
+        await chrome.tabs.update(cmd.tabId, { active: true });
+        return { id: cmd.id, ok: true, data: { selected: cmd.tabId } };
+      }
+      const tabs = await chrome.tabs.query({});
+      const target = tabs[cmd.index!];
+      if (!target?.id) return { id: cmd.id, ok: false, error: `Tab index ${cmd.index} not found` };
+      await chrome.tabs.update(target.id, { active: true });
+      return { id: cmd.id, ok: true, data: { selected: target.id } };
+    }
+    default:
+      return { id: cmd.id, ok: false, error: `Unknown tabs op: ${cmd.op}` };
+  }
+}
+
+async function handleCookies(cmd: Command): Promise<Result> {
+  const details: chrome.cookies.GetAllDetails = {};
+  if (cmd.domain) details.domain = cmd.domain;
+  if (cmd.url) details.url = cmd.url;
+  const cookies = await chrome.cookies.getAll(details);
+  const data = cookies.map((c) => ({
+    name: c.name,
+    value: c.value,
+    domain: c.domain,
+    path: c.path,
+    secure: c.secure,
+    httpOnly: c.httpOnly,
+    expirationDate: c.expirationDate,
+  }));
+  return { id: cmd.id, ok: true, data };
+}
+
+async function handleScreenshot(cmd: Command): Promise<Result> {
+  const tabId = await resolveTabId(cmd.tabId);
+  try {
+    const data = await cdp.screenshot(tabId, {
+      format: cmd.format,
+      quality: cmd.quality,
+      fullPage: cmd.fullPage,
+    });
+    return { id: cmd.id, ok: true, data };
+  } catch (err) {
+    return { id: cmd.id, ok: false, error: err instanceof Error ? err.message : String(err) };
+  }
+}