@jackwener/opencli 0.9.6 → 1.0.0

package/extension/src/cdp.ts

@@ -0,0 +1,125 @@
+/**
+ * CDP execution via chrome.debugger API.
+ *
+ * chrome.debugger only needs the "debugger" permission — no host_permissions.
+ * It can attach to any http/https tab. Avoid chrome:// and chrome-extension://
+ * tabs (resolveTabId in background.ts filters them).
+ */
+
+const attached = new Set<number>();
+
+async function ensureAttached(tabId: number): Promise<void> {
+  if (attached.has(tabId)) return;
+
+  try {
+    await chrome.debugger.attach({ tabId }, '1.3');
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
+    if (msg.includes('Another debugger is already attached')) {
+      try { await chrome.debugger.detach({ tabId }); } catch { /* ignore */ }
+      try {
+        await chrome.debugger.attach({ tabId }, '1.3');
+      } catch {
+        throw new Error(`attach failed: ${msg}`);
+      }
+    } else {
+      throw new Error(`attach failed: ${msg}`);
+    }
+  }
+  attached.add(tabId);
+
+  try {
+    await chrome.debugger.sendCommand({ tabId }, 'Runtime.enable');
+  } catch {
+    // Some pages may not need explicit enable
+  }
+}
+
+export async function evaluate(tabId: number, expression: string): Promise<unknown> {
+  await ensureAttached(tabId);
+
+  const result = await chrome.debugger.sendCommand({ tabId }, 'Runtime.evaluate', {
+    expression,
+    returnByValue: true,
+    awaitPromise: true,
+  }) as {
+    result?: { type: string; value?: unknown; description?: string; subtype?: string };
+    exceptionDetails?: { exception?: { description?: string }; text?: string };
+  };
+
+  if (result.exceptionDetails) {
+    const errMsg = result.exceptionDetails.exception?.description
+      || result.exceptionDetails.text
+      || 'Eval error';
+    throw new Error(errMsg);
+  }
+
+  return result.result?.value;
+}
+
+export const evaluateAsync = evaluate;
+
+/**
+ * Capture a screenshot via CDP Page.captureScreenshot.
+ * Returns base64-encoded image data.
+ */
+export async function screenshot(
+  tabId: number,
+  options: { format?: 'png' | 'jpeg'; quality?: number; fullPage?: boolean } = {},
+): Promise<string> {
+  await ensureAttached(tabId);
+
+  const format = options.format ?? 'png';
+
+  // For full-page screenshots, get the full page dimensions first
+  if (options.fullPage) {
+    // Get full page metrics
+    const metrics = await chrome.debugger.sendCommand({ tabId }, 'Page.getLayoutMetrics') as {
+      contentSize?: { width: number; height: number };
+      cssContentSize?: { width: number; height: number };
+    };
+    const size = metrics.cssContentSize || metrics.contentSize;
+    if (size) {
+      // Set device metrics to full page size
+      await chrome.debugger.sendCommand({ tabId }, 'Emulation.setDeviceMetricsOverride', {
+        mobile: false,
+        width: Math.ceil(size.width),
+        height: Math.ceil(size.height),
+        deviceScaleFactor: 1,
+      });
+    }
+  }
+
+  try {
+    const params: Record<string, unknown> = { format };
+    if (format === 'jpeg' && options.quality !== undefined) {
+      params.quality = Math.max(0, Math.min(100, options.quality));
+    }
+
+    const result = await chrome.debugger.sendCommand({ tabId }, 'Page.captureScreenshot', params) as {
+      data: string; // base64-encoded
+    };
+
+    return result.data;
+  } finally {
+    // Reset device metrics if we changed them for full-page
+    if (options.fullPage) {
+      await chrome.debugger.sendCommand({ tabId }, 'Emulation.clearDeviceMetricsOverride').catch(() => {});
+    }
+  }
+}
+
+export function detach(tabId: number): void {
+  if (!attached.has(tabId)) return;
+  attached.delete(tabId);
+  try { chrome.debugger.detach({ tabId }); } catch { /* ignore */ }
+}
+
+export function registerListeners(): void {
+  chrome.tabs.onRemoved.addListener((tabId) => {
+    attached.delete(tabId);
+  });
+  chrome.debugger.onDetach.addListener((source) => {
+    if (source.tabId) attached.delete(source.tabId);
+  });
+}

package/extension/src/protocol.ts

@@ -0,0 +1,57 @@
+/**
+ * opencli browser protocol — shared types between daemon, extension, and CLI.
+ *
+ * 5 actions: exec, navigate, tabs, cookies, screenshot.
+ * Everything else is just JS code sent via 'exec'.
+ */
+
+export type Action = 'exec' | 'navigate' | 'tabs' | 'cookies' | 'screenshot';
+
+export interface Command {
+  /** Unique request ID */
+  id: string;
+  /** Action type */
+  action: Action;
+  /** Target tab ID (omit for active tab) */
+  tabId?: number;
+  /** JS code to evaluate in page context (exec action) */
+  code?: string;
+  /** URL to navigate to (navigate action) */
+  url?: string;
+  /** Sub-operation for tabs: list, new, close, select */
+  op?: 'list' | 'new' | 'close' | 'select';
+  /** Tab index for tabs select/close */
+  index?: number;
+  /** Cookie domain filter */
+  domain?: string;
+  /** Screenshot format: png (default) or jpeg */
+  format?: 'png' | 'jpeg';
+  /** JPEG quality (0-100), only for jpeg format */
+  quality?: number;
+  /** Whether to capture full page (not just viewport) */
+  fullPage?: boolean;
+}
+
+export interface Result {
+  /** Matching request ID */
+  id: string;
+  /** Whether the command succeeded */
+  ok: boolean;
+  /** Result data on success */
+  data?: unknown;
+  /** Error message on failure */
+  error?: string;
+}
+
+/** Default daemon port */
+export const DAEMON_PORT = 19825;
+export const DAEMON_HOST = 'localhost';
+export const DAEMON_WS_URL = `ws://${DAEMON_HOST}:${DAEMON_PORT}/ext`;
+export const DAEMON_HTTP_URL = `http://${DAEMON_HOST}:${DAEMON_PORT}`;
+
+/** Base reconnect delay for extension WebSocket (ms) */
+export const WS_RECONNECT_BASE_DELAY = 2000;
+/** Max reconnect delay (ms) */
+export const WS_RECONNECT_MAX_DELAY = 60000;
+/** Idle timeout before daemon auto-exits (ms) */
+export const DAEMON_IDLE_TIMEOUT = 5 * 60 * 1000;

package/extension/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": false,
+    "types": ["chrome"]
+  },
+  "include": ["src"]
+}

package/extension/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    rollupOptions: {
+      input: resolve(__dirname, 'src/background.ts'),
+      output: {
+        entryFileNames: 'background.js',
+        format: 'es',
+      },
+    },
+    target: 'esnext',
+    minify: false,
+  },
+});

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@jackwener/opencli",
-  "version": "0.9.6",
+  "version": "1.0.0",
   "publishConfig": {
     "access": "public"
   },
   "description": "Make any website your CLI. AI-powered.",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "type": "module",
   "main": "dist/main.js",
@@ -25,14 +25,14 @@
     "lint": "tsc --noEmit",
     "prepublishOnly": "npm run build",
     "test": "vitest run",
+    "test:site": "node scripts/test-site.mjs",
     "test:watch": "vitest"
   },
   "keywords": [
     "cli",
     "browser",
     "web",
-    "ai",
-    "playwright"
+    "ai"
   ],
   "author": "jackwener",
   "license": "Apache-2.0",
@@ -43,12 +43,13 @@
   "dependencies": {
     "chalk": "^5.3.0",
     "cli-table3": "^0.6.5",
-    "commander": "^13.1.0",
-    "js-yaml": "^4.1.0"
+    "commander": "^14.0.3",
+    "js-yaml": "^4.1.0",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@playwright/mcp": "^0.0.68",
     "@types/js-yaml": "^4.0.9",
+    "@types/ws": "^8.5.13",
     "@types/node": "^22.13.10",
     "tsx": "^4.19.3",
     "typescript": "^5.8.2",

package/scripts/test-site.mjs

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+
+import { spawnSync } from 'node:child_process';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+const site = process.argv[2]?.trim();
+
+if (!site) {
+  console.error('Usage: npm run test:site -- <site>');
+  process.exit(1);
+}
+
+const repoRoot = path.resolve(new URL('..', import.meta.url).pathname);
+const srcDir = path.join(repoRoot, 'src');
+
+function runStep(label, command, args) {
+  console.log(`\n==> ${label}`);
+  const result = spawnSync(command, args, {
+    cwd: repoRoot,
+    stdio: 'inherit',
+    env: process.env,
+  });
+
+  if (result.status !== 0) {
+    process.exit(result.status ?? 1);
+  }
+}
+
+function walk(dir) {
+  const files = [];
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...walk(fullPath));
+    } else {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+
+function toPosix(filePath) {
+  return filePath.split(path.sep).join('/');
+}
+
+function findSiteTests() {
+  return walk(srcDir)
+    .filter(filePath => filePath.endsWith('.test.ts'))
+    .filter(filePath => {
+      const normalized = toPosix(path.relative(repoRoot, filePath));
+      return normalized.includes(`/clis/${site}/`) || normalized.includes(`/${site}.test.ts`);
+    })
+    .sort();
+}
+
+runStep('Typecheck', 'npm', ['run', 'typecheck']);
+runStep('Targeted verify', 'npx', ['tsx', 'src/main.ts', 'verify', site]);
+
+const testFiles = findSiteTests();
+if (testFiles.length === 0) {
+  console.log(`\nNo site-specific vitest files found for "${site}". Skipping full vitest run.`);
+  process.exit(0);
+}
+
+runStep(
+  `Site tests (${site})`,
+  'npx',
+  ['vitest', 'run', ...testFiles.map(filePath => path.relative(repoRoot, filePath))],
+);

package/src/browser/daemon-client.ts

@@ -0,0 +1,113 @@
+/**
+ * HTTP client for communicating with the opencli daemon.
+ *
+ * Provides a typed send() function that posts a Command and returns a Result.
+ */
+
+const DAEMON_PORT = parseInt(process.env.OPENCLI_DAEMON_PORT ?? '19825', 10);
+const DAEMON_URL = `http://127.0.0.1:${DAEMON_PORT}`;
+
+let _idCounter = 0;
+
+function generateId(): string {
+  return `cmd_${Date.now()}_${++_idCounter}`;
+}
+
+export interface DaemonCommand {
+  id: string;
+  action: 'exec' | 'navigate' | 'tabs' | 'cookies' | 'screenshot';
+  tabId?: number;
+  code?: string;
+  url?: string;
+  op?: string;
+  index?: number;
+  domain?: string;
+  format?: 'png' | 'jpeg';
+  quality?: number;
+  fullPage?: boolean;
+}
+
+export interface DaemonResult {
+  id: string;
+  ok: boolean;
+  data?: unknown;
+  error?: string;
+}
+
+/**
+ * Check if daemon is running.
+ */
+export async function isDaemonRunning(): Promise<boolean> {
+  try {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), 2000);
+    const res = await fetch(`${DAEMON_URL}/status`, { signal: controller.signal });
+    clearTimeout(timer);
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if daemon is running AND the extension is connected.
+ */
+export async function isExtensionConnected(): Promise<boolean> {
+  try {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), 2000);
+    const res = await fetch(`${DAEMON_URL}/status`, { signal: controller.signal });
+    clearTimeout(timer);
+    if (!res.ok) return false;
+    const data = await res.json() as { extensionConnected?: boolean };
+    return !!data.extensionConnected;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Send a command to the daemon and wait for a result.
+ * Retries up to 3 times with 500ms delay for transient failures.
+ */
+export async function sendCommand(
+  action: DaemonCommand['action'],
+  params: Omit<DaemonCommand, 'id' | 'action'> = {},
+): Promise<unknown> {
+  const id = generateId();
+  const command: DaemonCommand = { id, action, ...params };
+  const maxRetries = 3;
+
+  for (let attempt = 1; attempt <= maxRetries; attempt++) {
+    try {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), 30000);
+
+      const res = await fetch(`${DAEMON_URL}/command`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(command),
+        signal: controller.signal,
+      });
+      clearTimeout(timer);
+
+      const result = (await res.json()) as DaemonResult;
+
+      if (!result.ok) {
+        throw new Error(result.error ?? 'Daemon command failed');
+      }
+
+      return result.data;
+    } catch (err) {
+      const isRetryable = err instanceof TypeError  // fetch network error
+        || (err instanceof Error && err.name === 'AbortError');
+      if (isRetryable && attempt < maxRetries) {
+        await new Promise(r => setTimeout(r, 500));
+        continue;
+      }
+      throw err;
+    }
+  }
+  // Unreachable — the loop always returns or throws
+  throw new Error('sendCommand: max retries exhausted');
+}

package/src/browser/discover.ts

@@ -1,225 +1,27 @@
 /**
- * MCP server path discovery and argument building.
+ * Daemon discovery — simplified from MCP server path discovery.
+ *
+ * Only needs to check if the daemon is running. No more file system
+ * scanning for @playwright/mcp locations.
  */
 
-import { execSync } from 'node:child_process';
-import { fileURLToPath } from 'node:url';
-import * as fs from 'node:fs';
-import * as os from 'node:os';
-import * as path from 'node:path';
-
-let _cachedMcpServerPath: string | null | undefined;
-let _existsSync = fs.existsSync;
-let _execSync = execSync;
-
-export function resetMcpServerPathCache(): void {
-  _cachedMcpServerPath = undefined;
-}
-
-export function setMcpDiscoveryTestHooks(input?: {
-  existsSync?: typeof fs.existsSync;
-  execSync?: typeof execSync;
-}): void {
-  _existsSync = input?.existsSync ?? fs.existsSync;
-  _execSync = input?.execSync ?? execSync;
-}
-
-export function findMcpServerPath(): string | null {
-  if (_cachedMcpServerPath !== undefined) return _cachedMcpServerPath;
+import { isDaemonRunning } from './daemon-client.js';
 
-  const envMcp = process.env.OPENCLI_MCP_SERVER_PATH;
-  if (envMcp && _existsSync(envMcp)) {
-    _cachedMcpServerPath = envMcp;
-    return _cachedMcpServerPath;
-  }
-
-  // Check local node_modules first (@playwright/mcp is the modern package)
-  const localMcp = path.resolve('node_modules', '@playwright', 'mcp', 'cli.js');
-  if (_existsSync(localMcp)) {
-    _cachedMcpServerPath = localMcp;
-    return _cachedMcpServerPath;
-  }
-
-  // Check project-relative path
-  const __dirname2 = path.dirname(fileURLToPath(import.meta.url));
-  const projectMcp = path.resolve(__dirname2, '..', '..', 'node_modules', '@playwright', 'mcp', 'cli.js');
-  if (_existsSync(projectMcp)) {
-    _cachedMcpServerPath = projectMcp;
-    return _cachedMcpServerPath;
-  }
-
-  // Check global npm/yarn locations derived from current Node runtime.
-  const nodePrefix = path.resolve(path.dirname(process.execPath), '..');
-  const globalNodeModules = path.join(nodePrefix, 'lib', 'node_modules');
-  const globalMcp = path.join(globalNodeModules, '@playwright', 'mcp', 'cli.js');
-  if (_existsSync(globalMcp)) {
-    _cachedMcpServerPath = globalMcp;
-    return _cachedMcpServerPath;
-  }
-
-  // Check npm global root directly.
-  try {
-    const npmRootGlobal = _execSync('npm root -g 2>/dev/null', {
-      encoding: 'utf-8',
-      timeout: 5000,
-    }).trim();
-    const npmGlobalMcp = path.join(npmRootGlobal, '@playwright', 'mcp', 'cli.js');
-    if (npmRootGlobal && _existsSync(npmGlobalMcp)) {
-      _cachedMcpServerPath = npmGlobalMcp;
-      return _cachedMcpServerPath;
-    }
-  } catch {}
-
-  // Check common locations
-  const candidates = [
-    path.join(os.homedir(), '.npm', '_npx'),
-    path.join(os.homedir(), 'node_modules', '.bin'),
-    '/usr/local/lib/node_modules',
-  ];
-
-  // Try npx resolution (legacy package name)
-  try {
-    const result = _execSync('npx -y --package=@playwright/mcp which mcp-server-playwright 2>/dev/null', { encoding: 'utf-8', timeout: 10000 }).trim();
-    if (result && _existsSync(result)) {
-      _cachedMcpServerPath = result;
-      return _cachedMcpServerPath;
-    }
-  } catch {}
-
-  // Try which
-  try {
-    const result = _execSync('which mcp-server-playwright 2>/dev/null', { encoding: 'utf-8', timeout: 5000 }).trim();
-    if (result && _existsSync(result)) {
-      _cachedMcpServerPath = result;
-      return _cachedMcpServerPath;
-    }
-  } catch {}
-
-  // Search in common npx cache
-  for (const base of candidates) {
-    if (!_existsSync(base)) continue;
-    try {
-      const found = _execSync(`find "${base}" -name "cli.js" -path "*playwright*mcp*" 2>/dev/null | head -1`, { encoding: 'utf-8', timeout: 5000 }).trim();
-      if (found) {
-        _cachedMcpServerPath = found;
-        return _cachedMcpServerPath;
-      }
-    } catch {}
-  }
-
-  _cachedMcpServerPath = null;
-  return _cachedMcpServerPath;
-}
+export { isDaemonRunning };
 
 /**
- * Chrome 144+ auto-discovery: read DevToolsActivePort file to get CDP endpoint.
- *
- * Starting with Chrome 144, users can enable remote debugging from
- * chrome://inspect#remote-debugging without any command-line flags.
- * Chrome writes the active port and browser GUID to a DevToolsActivePort file
- * in the user data directory, which we read to construct the WebSocket endpoint.
+ * Check daemon status and return connection info.
  */
-export function discoverChromeEndpoint(): string | null {
-  const candidates: string[] = [];
-
-  // User-specified Chrome data dir takes highest priority
-  if (process.env.CHROME_USER_DATA_DIR) {
-    candidates.push(path.join(process.env.CHROME_USER_DATA_DIR, 'DevToolsActivePort'));
-  }
-
-  // Standard Chrome/Edge user data dirs per platform
-  if (process.platform === 'win32') {
-    const localAppData = process.env.LOCALAPPDATA ?? path.join(os.homedir(), 'AppData', 'Local');
-    candidates.push(path.join(localAppData, 'Google', 'Chrome', 'User Data', 'DevToolsActivePort'));
-    candidates.push(path.join(localAppData, 'Microsoft', 'Edge', 'User Data', 'DevToolsActivePort'));
-  } else if (process.platform === 'darwin') {
-    candidates.push(path.join(os.homedir(), 'Library', 'Application Support', 'Google', 'Chrome', 'DevToolsActivePort'));
-    candidates.push(path.join(os.homedir(), 'Library', 'Application Support', 'Microsoft Edge', 'DevToolsActivePort'));
-  } else {
-    candidates.push(path.join(os.homedir(), '.config', 'google-chrome', 'DevToolsActivePort'));
-    candidates.push(path.join(os.homedir(), '.config', 'chromium', 'DevToolsActivePort'));
-    candidates.push(path.join(os.homedir(), '.config', 'microsoft-edge', 'DevToolsActivePort'));
-  }
-
-  for (const filePath of candidates) {
-    try {
-      const content = fs.readFileSync(filePath, 'utf-8').trim();
-      const lines = content.split('\n');
-      if (lines.length >= 2) {
-        const port = parseInt(lines[0], 10);
-        const browserPath = lines[1]; // e.g. /devtools/browser/<GUID>
-        if (port > 0 && browserPath.startsWith('/devtools/browser/')) {
-          return `ws://127.0.0.1:${port}${browserPath}`;
-        }
-      }
-    } catch {}
-  }
-  return null;
-}
-
-export function resolveCdpEndpoint(): { endpoint?: string; requestedCdp: boolean } {
-  const envVal = process.env.OPENCLI_CDP_ENDPOINT;
-  if (envVal === '1' || envVal?.toLowerCase() === 'true') {
-    const autoDiscovered = discoverChromeEndpoint();
-    return { endpoint: autoDiscovered ?? envVal, requestedCdp: true };
-  }
-
-  if (envVal) {
-    return { endpoint: envVal, requestedCdp: true };
-  }
-
-  // Fallback to auto-discovery if not explicitly set
-  const autoDiscovered = discoverChromeEndpoint();
-  if (autoDiscovered) {
-    return { endpoint: autoDiscovered, requestedCdp: true };
-  }
-
-  return { requestedCdp: false };
-}
-
-function buildRuntimeArgs(input?: { executablePath?: string | null; cdpEndpoint?: string }): string[] {
-  const args: string[] = [];
-
-  // Priority 1: CDP endpoint (remote Chrome debugging or local Auto-Discovery)
-  if (input?.cdpEndpoint) {
-    args.push('--cdp-endpoint', input.cdpEndpoint);
-    return args;
-  }
-
-  // Priority 2: Extension mode (local Chrome with MCP Bridge extension)
-  if (!process.env.CI) {
-    args.push('--extension');
-  }
-
-  // CI/standalone mode: @playwright/mcp launches its own browser (headed by default).
-  // xvfb provides a virtual display for headed mode in GitHub Actions.
-  if (input?.executablePath) {
-    args.push('--executable-path', input.executablePath);
-  }
-  return args;
-}
-
-export function buildMcpArgs(input: { mcpPath: string; executablePath?: string | null; cdpEndpoint?: string }): string[] {
-  return [input.mcpPath, ...buildRuntimeArgs(input)];
-}
-
-export function buildMcpLaunchSpec(input: { mcpPath?: string | null; executablePath?: string | null; cdpEndpoint?: string }): {
-  command: string;
-  args: string[];
-  usedNpxFallback: boolean;
-} {
-  const runtimeArgs = buildRuntimeArgs(input);
-  if (input.mcpPath) {
-    return {
-      command: 'node',
-      args: [input.mcpPath, ...runtimeArgs],
-      usedNpxFallback: false,
-    };
+export async function checkDaemonStatus(): Promise<{
+  running: boolean;
+  extensionConnected: boolean;
+}> {
+  try {
+    const port = parseInt(process.env.OPENCLI_DAEMON_PORT ?? '19825', 10);
+    const res = await fetch(`http://127.0.0.1:${port}/status`);
+    const data = await res.json() as { ok: boolean; extensionConnected: boolean };
+    return { running: true, extensionConnected: data.extensionConnected };
+  } catch {
+    return { running: false, extensionConnected: false };
   }
-
-  return {
-    command: 'npx',
-    args: ['-y', '@playwright/mcp@latest', ...runtimeArgs],
-    usedNpxFallback: true,
-  };
 }