yiyan-browser-agent 1.0.1 → 1.0.2

package/src/calibrate.js

@@ -0,0 +1,178 @@
+#!/usr/bin/env node
+// src/calibrate.js — Auto-detect Yiyan UI selectors and update browser.js
+'use strict';
+
+const { chromium } = require('playwright');
+const path         = require('path');
+const fs           = require('fs');
+const config       = require('./config');
+
+console.log('\n🔬  Yiyan Agent — Selector Calibration Tool\n');
+console.log('This tool opens Yiyan (文心一言), inspects the DOM, and prints out');
+console.log('the selectors that your browser.js should use.\n');
+
+async function calibrate() {
+  const context = await chromium.launchPersistentContext(config.SESSION_DIR, {
+    headless : false,
+    viewport : { width: 1280, height: 900 },
+  });
+
+  const pages = context.pages();
+  const page  = pages.length > 0 ? pages[0] : await context.newPage();
+
+  console.log('→ Navigating to', config.YIYAN_URL, '...');
+  await page.goto(config.YIYAN_URL, { waitUntil: 'domcontentloaded', timeout: 30_000 });
+  await page.waitForTimeout(3_000);
+
+  console.log('→ Inspecting DOM...\n');
+
+  const report = await page.evaluate(() => {
+    function isVisible(el) {
+      const s = window.getComputedStyle(el);
+      return s.display !== 'none' && s.visibility !== 'hidden' && s.opacity !== '0' && el.offsetParent !== null;
+    }
+
+    function classify(el) {
+      return {
+        tag         : el.tagName.toLowerCase(),
+        id          : el.id || null,
+        classes     : el.className?.slice?.(0, 120) || null,
+        placeholder : el.placeholder || null,
+        ariaLabel   : el.getAttribute('aria-label') || null,
+        dataTestId  : el.dataset?.testid || null,
+        role        : el.getAttribute('role') || null,
+        visible     : isVisible(el),
+        text        : (el.innerText || '').slice(0, 40).replace(/\n/g, ' ') || null,
+        type        : el.getAttribute('type') || null,
+      };
+    }
+
+    // ── Inputs ───────────────────────────────────────────────────────────
+    const inputs = Array.from(document.querySelectorAll('textarea, [contenteditable="true"]'))
+      .map(classify);
+
+    // ── Buttons ──────────────────────────────────────────────────────────
+    const buttons = Array.from(document.querySelectorAll('button, [role="button"]'))
+      .filter(isVisible)
+      .map(classify)
+      .slice(0, 30);
+
+    // ── All named classes ─────────────────────────────────────────────────
+    const classFreq = {};
+    document.querySelectorAll('*').forEach(el => {
+      (el.getAttribute('class') || '').split(/\s+/).forEach(c => {
+        if (c.length > 2 && c.length < 50) {
+          classFreq[c] = (classFreq[c] || 0) + 1;
+        }
+      });
+    });
+    const topClasses = Object.entries(classFreq)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 80)
+      .map(([cls, n]) => ({ cls, n }));
+
+    // ── Suggested selectors ───────────────────────────────────────────────
+    const suggestedInput = (
+      inputs.find(i => i.placeholder?.toLowerCase().includes('message'))?.id ||
+      inputs.find(i => i.placeholder?.toLowerCase().includes('ask'))?.id ||
+      inputs.find(i => i.visible)?.id ||
+      null
+    );
+
+    const sendBtn = buttons.find(b =>
+      /send/i.test(b.ariaLabel || '') ||
+      /send/i.test(b.text || '') ||
+      /send/i.test(b.classes || '')
+    );
+
+    const stopBtn = buttons.find(b =>
+      /stop/i.test(b.ariaLabel || '') ||
+      /stop/i.test(b.text || '') ||
+      /stop/i.test(b.classes || '')
+    );
+
+    const newChatBtn = buttons.find(b =>
+      /new chat/i.test(b.ariaLabel || '') ||
+      /new chat/i.test(b.text || '') ||
+      /new.?chat/i.test(b.classes || '')
+    );
+
+    return {
+      url    : window.location.href,
+      title  : document.title,
+      inputs,
+      buttons,
+      topClasses,
+      suggestions: { suggestedInput, sendBtn, stopBtn, newChatBtn },
+    };
+  });
+
+  // ── Print report ──────────────────────────────────────────────────────────
+  const sep = '─'.repeat(60);
+
+  console.log(sep);
+  console.log('URL   :', report.url);
+  console.log('Title :', report.title);
+  console.log(sep);
+
+  console.log('\n📥  INPUT ELEMENTS:');
+  if (report.inputs.length === 0) {
+    console.log('  (none found — are you logged in?)');
+  }
+  report.inputs.forEach((el, i) => {
+    console.log(`  [${i}] ${JSON.stringify(el)}`);
+  });
+
+  console.log('\n🔘  BUTTONS (visible, first 30):');
+  report.buttons.forEach((el, i) => {
+    console.log(`  [${i}] ${JSON.stringify(el)}`);
+  });
+
+  console.log('\n🏷️  TOP CSS CLASSES:');
+  report.topClasses.slice(0, 40).forEach(({ cls, n }) => {
+    console.log(`  ${String(n).padStart(4)}x  .${cls}`);
+  });
+
+  console.log('\n' + sep);
+  console.log('🎯  SUGGESTED SELECTORS (update browser.js SEL object):');
+  console.log(sep);
+
+  const s = report.suggestions;
+
+  if (s.suggestedInput) {
+    console.log(`  chatInput  : '#${s.suggestedInput}'  (or use the id above)`);
+  }
+  if (s.sendBtn) {
+    const sel = s.sendBtn.ariaLabel
+      ? `button[aria-label="${s.sendBtn.ariaLabel}"]`
+      : s.sendBtn.id ? `#${s.sendBtn.id}` : `.${s.sendBtn.classes?.split(' ')[0]}`;
+    console.log(`  sendButton : '${sel}'`);
+  }
+  if (s.stopBtn) {
+    const sel = s.stopBtn.ariaLabel
+      ? `button[aria-label="${s.stopBtn.ariaLabel}"]`
+      : `.${s.stopBtn.classes?.split(' ')[0]}`;
+    console.log(`  stopButton : '${sel}'`);
+  }
+  if (s.newChatBtn) {
+    const sel = s.newChatBtn.ariaLabel
+      ? `button[aria-label="${s.newChatBtn.ariaLabel}"]`
+      : `.${s.newChatBtn.classes?.split(' ')[0]}`;
+    console.log(`  newChat    : '${sel}'`);
+  }
+
+  console.log(sep);
+  console.log('\n📸  Taking screenshot → /tmp/yiyan-calibrate.png');
+  await page.screenshot({ path: '/tmp/yiyan-calibrate.png', fullPage: false });
+
+  console.log('\n✅  Calibration complete! Update src/browser.js SEL object with the selectors above.');
+  console.log('    Press Ctrl+C to exit.\n');
+
+  // Keep browser open so user can inspect manually
+  await new Promise(() => {}); // wait forever
+}
+
+calibrate().catch(err => {
+  console.error('Calibration error:', err.message);
+  process.exit(1);
+});

package/src/config.js

@@ -0,0 +1,68 @@
+// src/config.js — Central configuration for Yiyan Agent
+const path = require('path');
+const fs   = require('fs');
+const os   = require('os');
+
+// ─────────────────────────────────────────────
+//  Default configuration
+// ─────────────────────────────────────────────
+const defaults = {
+  // Browser
+  YIYAN_URL      : 'https://yiyan.baidu.com/',
+  SESSION_DIR    : path.join(os.homedir(), '.yiyan-agent', 'session'),
+  HEADLESS       : false,
+
+  // Timing
+  RESPONSE_TIMEOUT : 180_000,
+  STABLE_DELAY     : 2_500,
+  SEND_DELAY       : 400,
+
+  // Agent
+  MAX_ITERATIONS   : 40,
+  WORKING_DIR      : process.cwd(),
+
+  // Output
+  MAX_OUTPUT_LENGTH : 8_000,
+  DEBUG             : false,
+};
+
+// ─────────────────────────────────────────────
+//  Config loading priority (highest wins):
+//
+//  1. ~/.yiyan-agent/config.json  — global user config
+//  2. ./yiyan-agent.config.json   — per-project config
+// ─────────────────────────────────────────────
+
+function loadJson(filePath) {
+  try {
+    if (fs.existsSync(filePath)) {
+      return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+    }
+  } catch {
+    console.warn('[yiyan-agent] Could not parse config file: ' + filePath);
+  }
+  return {};
+}
+
+const globalConfigPath  = path.join(os.homedir(), '.yiyan-agent', 'config.json');
+const projectConfigPath = path.join(process.cwd(), 'yiyan-agent.config.json');
+
+const config = {
+  ...defaults,
+  ...loadJson(globalConfigPath),   // global overrides defaults
+  ...loadJson(projectConfigPath),  // project overrides global
+};
+
+// Remove comment keys from JSON files
+delete config._comment;
+
+// Resolve session dir to absolute path
+if (!path.isAbsolute(config.SESSION_DIR)) {
+  config.SESSION_DIR = path.resolve(process.cwd(), config.SESSION_DIR);
+}
+
+// Ensure required directories exist
+fs.mkdirSync(config.SESSION_DIR, { recursive: true });
+fs.mkdirSync(path.join(os.homedir(), '.yiyan-agent', 'logs'), { recursive: true });
+
+module.exports = config;

package/src/index.js

@@ -0,0 +1,218 @@
+#!/usr/bin/env node
+// src/index.js — CLI entry point for Yiyan Agent
+'use strict';
+
+const path         = require('path');
+const fs           = require('fs');
+const config       = require('./config');
+const logger       = require('./logger');
+const YiyanAgent = require('./agent');
+
+// ─────────────────────────────────────────────
+//  Parse CLI arguments
+// ─────────────────────────────────────────────
+
+function parseArgs(argv) {
+  const args = argv.slice(2);
+  const opts = {
+    task        : null,
+    interactive : false,
+    debug       : false,
+    headless    : false,
+    saveLog     : false,
+    workingDir  : null,
+    calibrate   : false,
+    help        : false,
+  };
+
+  let i = 0;
+  while (i < args.length) {
+    const a = args[i];
+    switch (a) {
+      case '-i':
+      case '--interactive': opts.interactive = true;    break;
+      case '--debug':       opts.debug       = true;    break;
+      case '--headless':    opts.headless    = true;    break;
+      case '--save-log':    opts.saveLog     = true;    break;
+      case '--calibrate':   opts.calibrate   = true;    break;
+      case '-h':
+      case '--help':        opts.help        = true;    break;
+
+      case '-d':
+      case '--dir':
+        opts.workingDir = args[++i];
+        break;
+
+      case '-t':
+      case '--task':
+        opts.task = args[++i];
+        break;
+
+      default:
+        // If it doesn't start with '-', treat it as an inline task
+        if (!a.startsWith('-')) {
+          opts.task = args.slice(i).join(' ');
+          i = args.length; // consume the rest
+        }
+    }
+    i++;
+  }
+
+  return opts;
+}
+
+// ─────────────────────────────────────────────
+//  Help text
+// ─────────────────────────────────────────────
+
+function printHelp() {
+  console.log(`
+\x1b[1mYIYAN AGENT (文心一言)\x1b[0m — AI Coding Agent via Browser Automation
+
+\x1b[33mUSAGE\x1b[0m
+  node src/index.js [OPTIONS] [TASK]
+
+\x1b[33mOPTIONS\x1b[0m
+  -t, --task <task>    Task to run (can also be the last argument without a flag)
+  -i, --interactive    Interactive REPL mode — keep browser open, run multiple tasks
+  -d, --dir <path>     Set working directory (default: current directory)
+  --debug              Verbose debug output
+  --headless           Run browser in headless mode (must be logged in already)
+  --save-log           Save conversation log to ~/.yiyan-agent/logs/
+  --calibrate          Open browser and print DOM info to help fix selectors
+  -h, --help           Show this help
+
+\x1b[33mEXAMPLES\x1b[0m
+  # Run a single task
+  node src/index.js "Create a REST API in Express with CRUD for users"
+
+  # Interactive mode (recommended)
+  node src/index.js --interactive
+
+  # Run on a specific project directory
+  node src/index.js --dir ~/projects/myapp "Add TypeScript to this project"
+
+  # Debug mode (shows raw responses)
+  node src/index.js --debug "Write a binary search in Python"
+
+  # Headless (faster, requires prior login)
+  node src/index.js --headless "Refactor index.js to use async/await"
+
+\x1b[33mFIRST-TIME SETUP\x1b[0m
+  1. npm run setup         (installs deps + Playwright browser)
+  2. node src/index.js -i  (opens browser, log in to Yiyan, then use normally)
+     Session is saved — you only log in once.
+
+\x1b[33mCONFIG FILE\x1b[0m
+  Create \x1b[36myiyan-agent.config.json\x1b[0m in your working directory to override settings:
+  {
+    "HEADLESS": true,
+    "MAX_ITERATIONS": 50,
+    "STABLE_DELAY": 3000
+  }
+`);
+}
+
+// ─────────────────────────────────────────────
+//  Main
+// ─────────────────────────────────────────────
+
+async function main() {
+  const opts = parseArgs(process.argv);
+
+  // ── Help ───────────────────────────────────────────────────────────────────
+  if (opts.help) {
+    printHelp();
+    process.exit(0);
+  }
+
+  // ── Apply options to config ────────────────────────────────────────────────
+  if (opts.debug)      config.DEBUG    = true;
+  if (opts.headless)   config.HEADLESS = true;
+  if (opts.workingDir) {
+    const resolved = path.resolve(opts.workingDir);
+    if (!fs.existsSync(resolved)) {
+      logger.error(`Working directory not found: ${resolved}`);
+      process.exit(1);
+    }
+    config.WORKING_DIR = resolved;
+  }
+
+  // ── Banner ─────────────────────────────────────────────────────────────────
+  logger.banner();
+  logger.info(`Working directory : \x1b[36m${config.WORKING_DIR}\x1b[0m`);
+  logger.info(`Session directory : \x1b[36m${config.SESSION_DIR}\x1b[0m`);
+  logger.info(`Headless mode     : \x1b[36m${config.HEADLESS}\x1b[0m`);
+  logger.info(`Debug mode        : \x1b[36m${config.DEBUG}\x1b[0m`);
+  console.log('');
+
+  // ── Create agent ───────────────────────────────────────────────────────────
+  const agent = new YiyanAgent({ saveLog: opts.saveLog });
+
+  // ── Graceful shutdown handler ──────────────────────────────────────────────
+  const shutdown = async (code = 0) => {
+    logger.info('\nShutting down...');
+    try { await agent.shutdown(); } catch {}
+    process.exit(code);
+  };
+
+  process.on('SIGINT',  () => shutdown(0));
+  process.on('SIGTERM', () => shutdown(0));
+  process.on('uncaughtException', async err => {
+    logger.error(`Uncaught error: ${err.message}`);
+    if (config.DEBUG) console.error(err.stack);
+    await shutdown(1);
+  });
+  process.on('unhandledRejection', async reason => {
+    logger.error(`Unhandled rejection: ${reason}`);
+    if (config.DEBUG) console.error(reason);
+    await shutdown(1);
+  });
+
+  // ── Calibrate mode ─────────────────────────────────────────────────────────
+  if (opts.calibrate) {
+    logger.header('Calibration Mode — Reading DOM selectors');
+    await agent.init();
+    await agent.browser.dumpDebugInfo();
+    await agent.browser.screenshot();
+    logger.info('Done. Check the output above to update selectors in src/browser.js if needed.');
+    await shutdown(0);
+  }
+
+  // ── Validate we have a task or interactive mode ────────────────────────────
+  if (!opts.interactive && !opts.task) {
+    logger.warn('No task provided. Switching to interactive mode...\n');
+    opts.interactive = true;
+  }
+
+  // ── Launch browser ─────────────────────────────────────────────────────────
+  try {
+    await agent.init();
+  } catch (err) {
+    logger.error(`Failed to launch browser: ${err.message}`);
+    if (config.DEBUG) console.error(err.stack);
+    process.exit(1);
+  }
+
+  // ── Run ────────────────────────────────────────────────────────────────────
+  try {
+    if (opts.interactive) {
+      await agent.runInteractive();
+    } else {
+      const result = await agent.run(opts.task);
+      console.log(JSON.stringify(result, null, 2));
+    }
+  } catch (err) {
+    console.log(JSON.stringify({
+      question: opts.task || '',
+      answer: `Error: ${err.message}`,
+      duration: 0,
+      status: 'error'
+    }, null, 2));
+    await shutdown(1);
+  }
+
+  await shutdown(0);
+}
+
+main();

package/src/logger.js

@@ -0,0 +1,118 @@
+// src/logger.js — ANSI-colored terminal output (no dependencies)
+'use strict';
+
+const A = {
+  reset   : '\x1b[0m',
+  bold    : '\x1b[1m',
+  dim     : '\x1b[2m',
+  red     : '\x1b[31m',
+  green   : '\x1b[32m',
+  yellow  : '\x1b[33m',
+  blue    : '\x1b[34m',
+  magenta : '\x1b[35m',
+  cyan    : '\x1b[36m',
+  white   : '\x1b[37m',
+  gray    : '\x1b[90m',
+  lred    : '\x1b[91m',
+  lgreen  : '\x1b[92m',
+  lyellow : '\x1b[93m',
+  lblue   : '\x1b[94m',
+  lmagenta: '\x1b[95m',
+  lcyan   : '\x1b[96m',
+};
+
+const c  = (code, text) => `${A[code]}${text}${A.reset}`;
+const cb = (code, text) => `${A.bold}${A[code]}${text}${A.reset}`;
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+function truncDisplay(str, max = 400) {
+  if (!str) return '';
+  const s = String(str);
+  if (s.length <= max) return s;
+  return s.slice(0, max) + c('gray', `… (+${s.length - max} chars)`);
+}
+
+function jsonPreview(obj, max = 350) {
+  const s = JSON.stringify(obj, null, 2);
+  return truncDisplay(s, max);
+}
+
+// ── Public logger API ─────────────────────────────────────────────────────────
+const logger = {
+  banner() {
+    console.log(`
+${c('cyan','╔══════════════════════════════════════════════════╗')}
+${c('cyan','║')}   ${cb('lcyan','🤖  Yiyan Browser Agent (文心一言)')}              ${c('cyan','║')}
+${c('cyan','║')}   ${c('gray','AI Coding Agent via Browser Automation')}         ${c('cyan','║')}
+${c('cyan','║')}   ${c('gray','No API key needed — uses yiyan.baidu.com')}       ${c('cyan','║')}
+${c('cyan','╚══════════════════════════════════════════════════╝')}
+`);
+  },
+
+  header(msg) {
+    const line = '─'.repeat(50);
+    console.log(`\n${c('blue', line)}`);
+    console.log(`${c('bold','📋 ')}${cb('white', msg)}`);
+    console.log(`${c('blue', line)}\n`);
+  },
+
+  info(msg)    { console.log(`${c('lblue','  ℹ ')} ${msg}`); },
+  success(msg) { console.log(`${c('lgreen','  ✓ ')} ${c('lgreen', msg)}`); },
+  warn(msg)    { console.log(`${c('lyellow','  ⚠ ')} ${c('lyellow', msg)}`); },
+  error(msg)   { console.log(`${c('lred','  ✗ ')} ${c('lred', msg)}`); },
+  dim(msg)     { console.log(`${A.dim}    ${msg}${A.reset}`); },
+
+  /** Spinner-style line (overwrites itself with \r) */
+  thinking(msg) {
+    process.stdout.write(`  ${c('cyan','⟳')} ${c('gray', msg)}\r`);
+  },
+
+  /** Clear the current line */
+  clearLine() {
+    process.stdout.write(`\r${' '.repeat(80)}\r`);
+  },
+
+  // ── Tool call display ───────────────────────────────────────────────────────
+  toolCall(name, args) {
+    console.log(`\n  ${cb('magenta','⚡ TOOL CALL')} ${c('cyan', `→ ${name}`)}`);
+    const preview = jsonPreview(args);
+    if (preview.trim()) {
+      preview.split('\n').forEach(l => console.log(`  ${c('gray', l)}`));
+    }
+  },
+
+  toolResult(result, isError = false) {
+    const icon   = isError ? c('lred','  ✗ Result:') : c('lgreen','  ✓ Result:');
+    const text   = truncDisplay(String(result), 300);
+    const color  = isError ? 'lred' : 'gray';
+    console.log(`${icon}`);
+    text.split('\n').slice(0, 12).forEach(l => console.log(`  ${c(color, l)}`));
+    if (String(result).split('\n').length > 12) {
+      console.log(`  ${c('gray','  … (truncated for display)')}`);
+    }
+    console.log('');
+  },
+
+  // ── Final agent output ──────────────────────────────────────────────────────
+  finalOutput(msg) {
+    const line = '━'.repeat(50);
+    console.log(`\n${c('lgreen', line)}`);
+    console.log(`${cb('lgreen','✅  TASK COMPLETE')}`);
+    console.log(`${c('lgreen', line)}\n`);
+    console.log(msg);
+    console.log('');
+  },
+
+  // ── Section separator ───────────────────────────────────────────────────────
+  separator(label = '') {
+    const pad = label ? ` ${label} ` : '';
+    console.log(`\n${c('gray', '·'.repeat(20) + pad + '·'.repeat(20))}\n`);
+  },
+
+  // ── Iteration marker ────────────────────────────────────────────────────────
+  iteration(n, max) {
+    console.log(`\n${c('gray','  ┄')} ${c('dim',`Step ${n}/${max}`)} ${c('gray','┄')}`);
+  },
+};
+
+module.exports = logger;