@jackwener/opencli 0.5.1 → 0.6.0

package/src/setup.ts

@@ -0,0 +1,169 @@
+/**
+ * setup.ts — Interactive Playwright MCP token setup
+ *
+ * Discovers the extension token, shows an interactive checkbox
+ * for selecting which config files to update, and applies changes.
+ */
+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 {
+  type DoctorReport,
+  PLAYWRIGHT_TOKEN_ENV,
+  discoverExtensionToken,
+  fileExists,
+  getDefaultShellRcPath,
+  runBrowserDoctor,
+  shortenPath,
+  toolName,
+  upsertJsonConfigToken,
+  upsertShellToken,
+  upsertTomlConfigToken,
+  writeFileWithMkdir,
+} from './doctor.js';
+import { getTokenFingerprint } from './browser.js';
+import { type CheckboxItem, checkboxPrompt } from './tui.js';
+
+export async function runSetup(opts: { cliVersion?: string; token?: string } = {}) {
+  console.log();
+  console.log(chalk.bold('  opencli setup') + chalk.dim(' — Playwright MCP token 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)})`));
+    }
+  } else {
+    console.log(`  ${chalk.green('✓')} Using provided token ` +
+      chalk.dim(`(${getTokenFingerprint(token)})`));
+  }
+
+  if (!token) {
+    console.log(`  ${chalk.yellow('!')} No token found. Please enter it manually.`);
+    console.log(chalk.dim('    (Find it in the Playwright MCP Bridge extension → Status page)'));
+    console.log();
+    const rl = createInterface({ input, output });
+    const answer = await rl.question('  Token: ');
+    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: CheckboxItem[] = [];
+
+  // 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: !ok,
+      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: string[] = [];
+  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));
+      written.push(p);
+      wroteShell = true;
+    } 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);
+      writeFileWithMkdir(p, next);
+      written.push(p);
+    }
+  }
+
+  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.`));
+    }
+  } else {
+    console.log(chalk.yellow('  No files were changed.'));
+  }
+  console.log();
+}
+
+function padRight(s: string, n: number): string {
+  const visible = s.replace(/\x1b\[[0-9;]*m/g, '');
+  return visible.length >= n ? s : s + ' '.repeat(n - visible.length);
+}

package/src/synthesize.ts

@@ -6,12 +6,12 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import yaml from 'js-yaml';
+import { VOLATILE_PARAMS, SEARCH_PARAMS, LIMIT_PARAMS, PAGINATION_PARAMS } from './constants.js';
 
-/** Volatile params to strip from generated URLs */
-const VOLATILE_PARAMS = new Set(['w_rid', 'wts', 'callback', '_', 'timestamp', 't', 'nonce', 'sign']);
-const SEARCH_PARAM_NAMES = new Set(['q', 'query', 'keyword', 'search', 'wd', 'kw', 'w', 'search_query']);
-const LIMIT_PARAM_NAMES = new Set(['ps', 'page_size', 'limit', 'count', 'per_page', 'size', 'num']);
-const PAGE_PARAM_NAMES = new Set(['pn', 'page', 'page_num', 'offset', 'cursor']);
+/** Renamed aliases for backward compatibility with local references */
+const SEARCH_PARAM_NAMES = SEARCH_PARAMS;
+const LIMIT_PARAM_NAMES = LIMIT_PARAMS;
+const PAGE_PARAM_NAMES = PAGINATION_PARAMS;
 
 export function synthesizeFromExplore(
   target: string,

package/src/tui.ts

@@ -0,0 +1,171 @@
+/**
+ * tui.ts — Zero-dependency interactive TUI components
+ *
+ * Uses raw stdin mode + ANSI escape codes for interactive prompts.
+ */
+import chalk from 'chalk';
+
+export interface CheckboxItem {
+  label: string;
+  value: string;
+  checked: boolean;
+  /** Optional status to display after the label */
+  status?: string;
+  statusColor?: 'green' | 'yellow' | 'red' | 'dim';
+}
+
+/**
+ * Interactive multi-select checkbox prompt.
+ *
+ * Controls:
+ *   ↑/↓ or j/k  — navigate
+ *   Space        — toggle selection
+ *   a            — toggle all
+ *   Enter        — confirm
+ *   q/Esc        — cancel (returns empty)
+ */
+export async function checkboxPrompt(
+  items: CheckboxItem[],
+  opts: { title?: string; hint?: string } = {},
+): Promise<string[]> {
+  if (items.length === 0) return [];
+
+  const { stdin, stdout } = process;
+  if (!stdin.isTTY) {
+    // Non-interactive: return all checked items
+    return items.filter(i => i.checked).map(i => i.value);
+  }
+
+  let cursor = 0;
+  const state = items.map(i => ({ ...i }));
+
+  function colorStatus(status: string | undefined, color: CheckboxItem['statusColor']): string {
+    if (!status) return '';
+    switch (color) {
+      case 'green': return chalk.green(status);
+      case 'yellow': return chalk.yellow(status);
+      case 'red': return chalk.red(status);
+      case 'dim': return chalk.dim(status);
+      default: return chalk.dim(status);
+    }
+  }
+
+  function render() {
+    // Move cursor to start and clear
+    let out = '';
+
+    if (opts.title) {
+      out += `\n${chalk.bold(opts.title)}\n\n`;
+    }
+
+    for (let i = 0; i < state.length; i++) {
+      const item = state[i];
+      const pointer = i === cursor ? chalk.cyan('❯') : ' ';
+      const checkbox = item.checked ? chalk.green('◉') : chalk.dim('○');
+      const label = i === cursor ? chalk.bold(item.label) : item.label;
+      const status = colorStatus(item.status, item.statusColor);
+      out += `  ${pointer} ${checkbox} ${label}${status ? `  ${status}` : ''}\n`;
+    }
+
+    out += `\n  ${chalk.dim('↑↓ navigate  ·  Space toggle  ·  a all  ·  Enter confirm  ·  q cancel')}\n`;
+
+    return out;
+  }
+
+  return new Promise<string[]>((resolve) => {
+    const wasRaw = stdin.isRaw;
+    stdin.setRawMode(true);
+    stdin.resume();
+    stdout.write('\x1b[?25l'); // Hide cursor
+
+    let firstDraw = true;
+
+    function draw() {
+      // Clear previous render (skip on first draw)
+      if (!firstDraw) {
+        const lines = render().split('\n').length;
+        stdout.write(`\x1b[${lines}A\x1b[J`);
+      }
+      firstDraw = false;
+      stdout.write(render());
+    }
+
+    function cleanup() {
+      stdin.setRawMode(wasRaw ?? false);
+      stdin.pause();
+      stdin.removeListener('data', onData);
+      // Clear the TUI and restore cursor
+      const lines = render().split('\n').length;
+      stdout.write(`\x1b[${lines}A\x1b[J`);
+      stdout.write('\x1b[?25h'); // Show cursor
+    }
+
+    function onData(data: Buffer) {
+      const key = data.toString();
+
+      // Arrow up / k
+      if (key === '\x1b[A' || key === 'k') {
+        cursor = (cursor - 1 + state.length) % state.length;
+        draw();
+        return;
+      }
+
+      // Arrow down / j
+      if (key === '\x1b[B' || key === 'j') {
+        cursor = (cursor + 1) % state.length;
+        draw();
+        return;
+      }
+
+      // Space — toggle
+      if (key === ' ') {
+        state[cursor].checked = !state[cursor].checked;
+        draw();
+        return;
+      }
+
+      // Tab — toggle and move down
+      if (key === '\t') {
+        state[cursor].checked = !state[cursor].checked;
+        cursor = (cursor + 1) % state.length;
+        draw();
+        return;
+      }
+
+      // 'a' — toggle all
+      if (key === 'a') {
+        const allChecked = state.every(i => i.checked);
+        for (const item of state) item.checked = !allChecked;
+        draw();
+        return;
+      }
+
+      // Enter — confirm
+      if (key === '\r' || key === '\n') {
+        cleanup();
+        const selected = state.filter(i => i.checked).map(i => i.value);
+        // Show summary
+        stdout.write(`  ${chalk.green('✓')} ${chalk.bold(`${selected.length} file(s) selected`)}\n\n`);
+        resolve(selected);
+        return;
+      }
+
+      // q / Esc — cancel
+      if (key === 'q' || key === '\x1b') {
+        cleanup();
+        stdout.write(`  ${chalk.yellow('✗')} ${chalk.dim('Cancelled')}\n\n`);
+        resolve([]);
+        return;
+      }
+
+      // Ctrl+C — exit process
+      if (key === '\x03') {
+        cleanup();
+        process.exit(130);
+      }
+    }
+
+    stdin.on('data', onData);
+    draw();
+  });
+}

package/src/validate.ts

@@ -3,6 +3,14 @@ import * as fs from 'node:fs';
 import * as path from 'node:path';
 import yaml from 'js-yaml';
 
+/** All recognized pipeline step names */
+const KNOWN_STEP_NAMES = new Set([
+  'navigate', 'click', 'type', 'wait', 'press', 'snapshot', 'scroll',
+  'fetch', 'evaluate',
+  'select', 'map', 'filter', 'sort', 'limit',
+  'intercept', 'tap',
+]);
+
 export function validateClisWithTarget(dirs: string[], target?: string): any {
   const results: any[] = [];
   let errors = 0; let warnings = 0; let files = 0;
@@ -38,6 +46,20 @@ function validateYamlFile(filePath: string): any {
     if (def.pipeline && !Array.isArray(def.pipeline)) errors.push('"pipeline" must be an array');
     if (def.columns && !Array.isArray(def.columns)) errors.push('"columns" must be an array');
     if (def.args && typeof def.args !== 'object') errors.push('"args" must be an object');
+    // Validate pipeline step names (catch typos like 'navaigate')
+    if (Array.isArray(def.pipeline)) {
+      for (let i = 0; i < def.pipeline.length; i++) {
+        const step = def.pipeline[i];
+        if (step && typeof step === 'object') {
+          const stepKeys = Object.keys(step);
+          for (const key of stepKeys) {
+            if (!KNOWN_STEP_NAMES.has(key)) {
+              warnings.push(`Pipeline step ${i}: unknown step name "${key}" (did you mean one of: ${[...KNOWN_STEP_NAMES].join(', ')}?)`);
+            }
+          }
+        }
+      }
+    }
   } catch (e: any) { errors.push(`YAML parse error: ${e.message}`); }
   return { path: filePath, errors, warnings };
 }

package/src/verify.ts

@@ -1,9 +1,18 @@
-/** Verification: validate + smoke. */
+/**
+ * Verification: runs validation and optional smoke test.
+ *
+ * The smoke test is intentionally kept as a stub — full browser-based
+ * smoke testing requires a running browser session and is better suited
+ * to the `opencli test` command or CI pipelines.
+ */
+
 import { validateClisWithTarget, renderValidationReport } from './validate.js';
+
 export async function verifyClis(opts: any): Promise<any> {
   const report = validateClisWithTarget([opts.builtinClis, opts.userClis], opts.target);
   return { ok: report.ok, validation: report, smoke: null };
 }
+
 export function renderVerifyReport(report: any): string {
   return renderValidationReport(report.validation);
 }

package/src/version.ts

@@ -0,0 +1,18 @@
+/**
+ * Single source of truth for package version.
+ */
+
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const pkgJsonPath = path.resolve(__dirname, '..', 'package.json');
+
+export const PKG_VERSION: string = (() => {
+  try {
+    return JSON.parse(fs.readFileSync(pkgJsonPath, 'utf-8')).version;
+  } catch {
+    return '0.0.0';
+  }
+})();