autokap 1.0.1 → 1.0.3

package/dist/cli.js

@@ -1,52 +1,135 @@
 #!/usr/bin/env node
 import { Command } from 'commander';
-import { config as loadEnv } from 'dotenv';
 import { createRequire } from 'node:module';
 import path from 'node:path';
 import fs from 'node:fs/promises';
-import readline from 'node:readline';
+import WebSocket from 'ws';
 const require = createRequire(import.meta.url);
 const { version } = require('../package.json');
 import { Browser } from './browser.js';
-import { runAgent } from './agent.js';
-import { captureIsolatedElement } from './element-capture.js';
-import { dismissCookiesAndWidgets } from './cookie-dismiss.js';
 import { logger } from './logger.js';
-import { getPostHog, shutdownPostHog, DISTINCT_ID } from './posthog.js';
-import { parseViewport, parseViewports, parseLanguages, buildThemeList, buildCredentials, parseElements, stripBuffersFromManifest, replaceSkillPlaceholders, buildRetryPrompt, } from './cli-utils.js';
-function askUser(question) {
-    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
-    return new Promise(resolve => {
-        rl.question(question, answer => {
-            rl.close();
-            resolve(answer.trim());
-        });
-    });
-}
+import { writeConfig, requireConfig, DEFAULT_API_BASE_URL, DEFAULT_WS_URL, } from './cli-config.js';
+import { replaceSkillPlaceholders } from './cli-utils.js';
+// ── Program definition ──────────────────────────────────────────────
 export const program = new Command();
 program
     .name('autokap')
     .version(version)
-    .description('AI-powered screenshot capture tool')
-    .option('--url <url>', 'Target URL')
-    .option('--prompt <prompt>', 'What to capture (natural language)')
-    .option('--dark', 'Also capture dark mode variant', false)
-    .option('--langs <codes>', 'Comma-separated language codes (e.g., en,fr,de)', 'en')
-    .option('--output <dir>', 'Output directory', './output')
-    .option('--headed', 'Show browser window (debug mode)', false)
-    .option('--viewport <size>', 'Viewport size WxH (e.g., 1440x900)', '1440x900')
-    .option('--viewports <sizes>', 'Comma-separated viewport sizes for multi-viewport capture (e.g., "1440x900,768x1024,375x812")')
-    .option('--max-iter <n>', 'Max agent iterations', '30')
-    .option('--model <id>', 'OpenRouter model ID', 'x-ai/grok-4.1-fast')
-    .option('--reasoning-effort <level>', 'Reasoning effort for compatible models: low, medium, high, off', 'medium')
-    .option('--login-url <url>', 'Login page URL (if different from --url)')
-    .option('--email <email>', 'Login email/username')
-    .option('--password <password>', 'Login password')
-    .option('--cookies <file>', 'Path to a JSON file with cookies to inject (for OAuth/session auth)')
-    .option('--lang-instructions <text>', 'How to switch language on the site (e.g., "Click the language selector in the footer and choose the target language")')
-    .option('--theme-instructions <text>', 'How to switch theme on the site (e.g., "Click the sun/moon icon in the top-right corner")')
-    .option('--element <specs...>', 'Isolated elements to capture (format: "name:description")');
-// ── Skill subcommand ──────────────────────────────────────────────────
+    .description('AI-powered screenshot capture — local Playwright proxy');
+// ── login command ───────────────────────────────────────────────────
+program
+    .command('login <key>')
+    .description('Authenticate with the AutoKap API')
+    .option('--api-base-url <url>', 'API base URL', DEFAULT_API_BASE_URL)
+    .option('--ws-url <url>', 'WebSocket server URL', DEFAULT_WS_URL)
+    .action(async (key, opts) => {
+    try {
+        const res = await fetch(`${opts.apiBaseUrl}/api/v1/presets`, {
+            headers: { Authorization: `Bearer ${key}` },
+        });
+        if (!res.ok) {
+            logger.error('Invalid API key. Generate one in the AutoKap dashboard.');
+            process.exit(1);
+        }
+    }
+    catch (err) {
+        logger.error(`Cannot reach API: ${err.message}`);
+        process.exit(1);
+    }
+    await writeConfig({
+        apiKey: key,
+        apiBaseUrl: opts.apiBaseUrl,
+        wsUrl: opts.wsUrl,
+    });
+    logger.success('Authenticated. Key stored in ~/.autokap/config.json');
+    process.exit(0);
+});
+// ── run command ─────────────────────────────────────────────────────
+program
+    .command('run <preset-id>')
+    .description('Run a preset capture using local Playwright')
+    .option('--headed', 'Show browser window for debugging', false)
+    .action(async (presetId, opts) => {
+    const config = await requireConfig();
+    logger.info(`Connecting to ${config.wsUrl}...`);
+    const browser = new Browser({
+        headed: opts.headed,
+        viewport: { width: 1440, height: 900 },
+    });
+    await browser.launch();
+    logger.success('Browser launched');
+    const wsUrl = `${config.wsUrl}?key=${encodeURIComponent(config.apiKey)}&preset_id=${encodeURIComponent(presetId)}`;
+    const ws = new WebSocket(wsUrl);
+    const cleanup = async () => {
+        try {
+            await browser.close();
+        }
+        catch { /* ignore */ }
+        try {
+            ws.close();
+        }
+        catch { /* ignore */ }
+    };
+    ws.on('error', async (err) => {
+        logger.error(`WebSocket error: ${err.message}`);
+        await cleanup();
+        process.exit(1);
+    });
+    ws.on('close', async () => {
+        await cleanup();
+    });
+    ws.on('open', () => {
+        logger.success('Connected to AutoKap server');
+    });
+    ws.on('message', async (data) => {
+        const raw = typeof data === 'string' ? data : data.toString('utf-8');
+        let msg;
+        try {
+            msg = JSON.parse(raw);
+        }
+        catch {
+            return;
+        }
+        // Handle server events (progress, done, error)
+        if ('type' in msg) {
+            const event = msg;
+            switch (event.type) {
+                case 'progress':
+                    logger.info(event.message ?? '');
+                    break;
+                case 'done':
+                    if (event.summary) {
+                        logger.success(`Done: ${event.summary.successes}/${event.summary.total} captures succeeded`);
+                    }
+                    await cleanup();
+                    process.exit(0);
+                    break;
+                case 'error':
+                    logger.error(event.message ?? 'Unknown error');
+                    await cleanup();
+                    process.exit(1);
+                    break;
+            }
+            return;
+        }
+        // Handle browser commands from server
+        const cmd = msg;
+        try {
+            const result = await executeBrowserCommand(browser, cmd.method, cmd.params);
+            ws.send(JSON.stringify({ id: cmd.id, result }));
+        }
+        catch (err) {
+            ws.send(JSON.stringify({ id: cmd.id, error: err.message }));
+        }
+    });
+    // Handle SIGINT gracefully
+    process.on('SIGINT', async () => {
+        logger.info('Interrupted. Cleaning up...');
+        await cleanup();
+        process.exit(130);
+    });
+});
+// ── skill command ───────────────────────────────────────────────────
 program
     .command('skill')
     .description('Output or install the AutoKap preset creation skill for AI coding agents')
@@ -82,282 +165,161 @@ program
     }
     process.exit(0);
 });
-export async function main() {
-    loadEnv();
-    const opts = program.opts();
-    if (!opts.url) {
-        logger.error("Missing required option: --url <url>");
-        process.exit(1);
-    }
-    if (!opts.prompt) {
-        logger.error("Missing required option: --prompt <prompt>");
-        process.exit(1);
-    }
-    const apiKey = process.env.OPENROUTER_API_KEY;
-    if (!apiKey) {
-        logger.error('OPENROUTER_API_KEY not set. Create a .env file or set the environment variable.');
-        process.exit(1);
-    }
-    // Parse viewport
-    const { width: vw, height: vh } = parseViewport(opts.viewport);
-    // Parse multi-viewports (if provided)
-    const viewports = opts.viewports ? parseViewports(opts.viewports) : undefined;
-    // Parse languages
-    const langs = parseLanguages(opts.langs);
-    // Build theme list
-    const themes = buildThemeList(opts.dark);
-    // Build credentials (if provided)
-    const credentials = buildCredentials({
-        email: opts.email,
-        password: opts.password,
-        loginUrl: opts.loginUrl,
-    });
-    // Parse isolated elements
-    const elements = opts.element ? parseElements(opts.element) : [];
-    // Ensure output directory exists
-    const outputDir = path.resolve(opts.output);
-    await fs.mkdir(outputDir, { recursive: true });
-    logger.info(`URL: ${opts.url}`);
-    logger.info(`Prompt: "${opts.prompt}"`);
-    logger.info(`Model: ${opts.model}${opts.reasoningEffort !== 'off' ? ` (reasoning: ${opts.reasoningEffort})` : ''}`);
-    logger.info(`Viewport: ${vw}x${vh}${viewports ? ` + multi: ${viewports.map(v => `${v.width}x${v.height}`).join(', ')}` : ''}`);
-    logger.info(`Themes: ${themes.join(', ')}`);
-    logger.info(`Languages: ${langs.join(', ')}`);
-    logger.info(`Max iterations: ${opts.maxIter}`);
-    if (credentials)
-        logger.info(`Login: ${credentials.email || '(no email)'}${credentials.loginUrl ? ` via ${credentials.loginUrl}` : ''}`);
-    if (opts.cookies)
-        logger.info(`Cookies: ${opts.cookies}`);
-    if (opts.langInstructions)
-        logger.info(`Lang instructions: "${opts.langInstructions}"`);
-    if (opts.themeInstructions)
-        logger.info(`Theme instructions: "${opts.themeInstructions}"`);
-    if (elements.length > 0)
-        logger.info(`Isolated elements: ${elements.map(e => e.name).join(', ')}`);
-    logger.info(`Output: ${outputDir}`);
-    // Track capture start
-    getPostHog().capture({
-        distinctId: DISTINCT_ID,
-        event: 'capture_started',
-        properties: {
-            url: opts.url,
-            prompt: opts.prompt,
-            model: opts.model,
-            themes,
-            langs,
-            viewport: `${vw}x${vh}`,
-            multi_viewports: viewports ? viewports.map(v => `${v.width}x${v.height}`) : null,
-            max_iterations: parseInt(opts.maxIter, 10),
-            has_credentials: !!credentials,
-            has_cookies: !!opts.cookies,
-            element_count: elements.length,
-        },
-    });
-    // Launch browser
-    const browser = new Browser({
-        headed: opts.headed,
-        viewport: { width: vw, height: vh },
-    });
-    await browser.launch();
-    logger.success('Browser launched');
-    // Inject cookies if provided
-    if (opts.cookies) {
-        try {
-            const cookieFile = await fs.readFile(path.resolve(opts.cookies), 'utf-8');
-            const cookies = JSON.parse(cookieFile);
-            if (!Array.isArray(cookies))
-                throw new Error('Cookies file must contain a JSON array');
-            await browser.addCookies(cookies);
-            logger.success(`Injected ${cookies.length} cookies from ${opts.cookies}`);
+// ── Browser command executor ────────────────────────────────────────
+async function executeBrowserCommand(browser, method, params) {
+    switch (method) {
+        // Lifecycle
+        case 'launch':
+            await browser.launch();
+            return null;
+        case 'close':
+            await browser.close();
+            return null;
+        case 'closeContext':
+            await browser.closeContext();
+            return null;
+        // Navigation
+        case 'navigateTo':
+            await browser.navigateTo(params.url);
+            return null;
+        case 'addCookies':
+            await browser.addCookies(params.cookies);
+            return null;
+        // Screenshots — serialize buffers to base64
+        case 'takeScreenshot': {
+            const buf = await browser.takeScreenshot();
+            return { screenshot: buf.toString('base64') };
         }
-        catch (err) {
-            logger.error(`Failed to load cookies: ${err.message}`);
-            process.exit(1);
+        case 'takeScreenshotForAI': {
+            const buf = await browser.takeScreenshotForAI(params);
+            return { screenshot: buf.toString('base64') };
         }
-    }
-    const manifest = {
-        url: opts.url,
-        prompt: opts.prompt,
-        timestamp: new Date().toISOString(),
-        captures: [],
-    };
-    try {
-        for (const lang of langs) {
-            for (const theme of themes) {
-                logger.info(`--- Capturing: theme=${theme}, lang=${lang} ---`);
-                // Set language and navigate
-                await browser.setLanguage(lang);
-                await browser.navigateTo(opts.url);
-                logger.info('Page loaded');
-                // Pre-cleanup: dismiss cookies and widgets
-                const cookieResult = await dismissCookiesAndWidgets(browser.currentPage);
-                if (cookieResult.dismissed) {
-                    logger.success(`Cookies dismissed: ${cookieResult.method}`);
-                }
-                // Set color scheme
-                await browser.setColorScheme(theme);
-                // Wait for re-renders
-                await browser.wait(500);
-                // Run AI agent with retry on give_up
-                let currentPrompt = opts.prompt;
-                let retryCount = 0;
-                const maxRetries = 3;
-                let result;
-                while (true) {
-                    const config = {
-                        url: opts.url,
-                        prompt: currentPrompt,
-                        dark: theme === 'dark',
-                        langs: [lang],
-                        outputDir,
-                        headed: opts.headed,
-                        viewport: { width: vw, height: vh },
-                        maxIterations: parseInt(opts.maxIter, 10),
-                        model: opts.model,
-                        reasoningEffort: opts.reasoningEffort,
-                        credentials,
-                        langInstructions: opts.langInstructions,
-                        themeInstructions: opts.themeInstructions,
-                        currentLang: lang,
-                        currentTheme: theme,
-                        viewports,
-                    };
-                    result = await runAgent(browser, config, apiKey);
-                    // If succeeded or max retries reached, stop
-                    if (result.success || retryCount >= maxRetries)
-                        break;
-                    // Save diagnostic state on failure
-                    if (result.diagnostic) {
-                        const diagFilename = `diagnostic_${lang}_${theme}_attempt${retryCount}.png`;
-                        const diagPath = path.join(outputDir, diagFilename);
-                        await fs.writeFile(diagPath, result.diagnostic.screenshot);
-                        logger.info(`Diagnostic screenshot saved: ${diagPath}`);
-                        const diagStateFilename = `diagnostic_${lang}_${theme}_attempt${retryCount}.json`;
-                        const diagStatePath = path.join(outputDir, diagStateFilename);
-                        await fs.writeFile(diagStatePath, JSON.stringify({
-                            reason: result.diagnostic.giveUpReason,
-                            url: result.diagnostic.url,
-                            interactiveElements: result.diagnostic.interactiveElements.slice(0, 50),
-                            accessibilityTreeSnippet: result.diagnostic.accessibilityTreeSnippet,
-                            actions: result.actions,
-                        }, null, 2));
-                        logger.info(`Diagnostic state saved: ${diagStatePath}`);
-                    }
-                    // Ask user for clarification
-                    logger.error(`Agent gave up: ${result.assessment}`);
-                    logger.info('You can provide additional instructions to help the agent retry, or press Enter to skip.');
-                    const clarification = await askUser('\nAdditional instructions (or Enter to skip): ');
-                    if (!clarification)
-                        break; // User chose to skip
-                    // Append clarification to the prompt and retry
-                    retryCount++;
-                    currentPrompt = buildRetryPrompt(opts.prompt, result.assessment, clarification, retryCount + 1);
-                    logger.info(`Retrying with clarification (attempt ${retryCount + 1}/${maxRetries + 1})...`);
-                }
-                // Save final screenshot
-                const filename = `screenshot_${lang}_${theme}.png`;
-                const filepath = path.join(outputDir, filename);
-                const finalScreenshot = await browser.takeScreenshot();
-                await fs.writeFile(filepath, finalScreenshot);
-                result.screenshotPath = filepath;
-                if (result.success) {
-                    logger.success(`Final screenshot saved: ${filepath}`);
-                }
-                else {
-                    logger.error(`Failed (diagnostic saved): ${filepath}`);
-                }
-                // Save workflow screenshots (intermediate captures)
-                const screenshotEntries = [];
-                for (const ws of result.screenshots) {
-                    const wsFilename = `screenshot_${lang}_${theme}_step${ws.index}.png`;
-                    const wsPath = path.join(outputDir, wsFilename);
-                    await fs.writeFile(wsPath, ws.buffer);
-                    ws.path = wsPath;
-                    screenshotEntries.push({
-                        index: ws.index,
-                        iteration: ws.iteration,
-                        label: ws.label,
-                        filename: wsFilename,
-                    });
-                    logger.success(`Workflow screenshot saved: ${wsPath} ("${ws.label}")`);
-                }
-                manifest.captures.push({
-                    theme,
-                    lang,
-                    filename,
-                    screenshots: screenshotEntries,
-                    result,
-                });
-                // Capture isolated elements (if page is ready)
-                if (elements.length > 0 && result.success) {
-                    logger.info(`--- Capturing ${elements.length} isolated element(s): lang=${lang}, theme=${theme} ---`);
-                    await browser.forceLoadLazyImages({ timeout: 8000 });
-                    for (const element of elements) {
-                        const elementResult = await captureIsolatedElement(browser, element, apiKey, opts.model);
-                        if (elementResult.success) {
-                            const elFilename = `${element.name}__${lang}_${theme}.png`;
-                            const elPath = path.join(outputDir, elFilename);
-                            await fs.writeFile(elPath, elementResult.buffer);
-                            logger.success(`Element "${element.name}" saved: ${elPath}`);
-                        }
-                        else {
-                            logger.error(`Element "${element.name}" failed: ${elementResult.assessment}`);
-                        }
-                    }
-                }
-            }
+        case 'screenshotElement': {
+            const buf = await browser.screenshotElement(params.index, params.padding);
+            return { screenshot: buf.toString('base64') };
         }
+        case 'screenshotRegion': {
+            const buf = await browser.screenshotRegion(params.x, params.y, params.width, params.height, params.padding);
+            return { screenshot: buf.toString('base64') };
+        }
+        case 'screenshotBySelector': {
+            const r = await browser.screenshotBySelector(params.selector, params.outscale);
+            return { buffer: r.buffer.toString('base64'), validation: r.validation };
+        }
+        case 'screenshotByRegion': {
+            const buf = await browser.screenshotByRegion(params.region, params.outscale);
+            return { screenshot: buf.toString('base64') };
+        }
+        // Page state — serialize screenshots inside PageState
+        case 'getPageState': {
+            const state = await browser.getPageState(params);
+            return {
+                ...state,
+                cleanScreenshot: state.cleanScreenshot.toString('base64'),
+                screenshot: state.screenshot.toString('base64'),
+            };
+        }
+        case 'getPageStateLite':
+            return await browser.getPageStateLite();
+        case 'getAccessibilityTree':
+            return await browser.getAccessibilityTree(params);
+        case 'getInteractiveElements':
+            return await browser.getInteractiveElements(params);
+        case 'getSimplifiedDOM':
+            return await browser.getSimplifiedDOM();
+        case 'captureObservation':
+            return await browser.captureObservation();
+        case 'capturePageSignals':
+            return await browser.capturePageSignals(params);
+        case 'captureVerificationBundle': {
+            const bundle = await browser.captureVerificationBundle(params);
+            return { ...bundle, screenshot: bundle.screenshot.toString('base64') };
+        }
+        case 'captureVideoVerificationBundle': {
+            const bundle = await browser.captureVideoVerificationBundle(params);
+            return { ...bundle, screenshot: bundle.screenshot.toString('base64') };
+        }
+        // Interactions
+        case 'clickByIndex':
+            await browser.clickByIndex(params.index);
+            return null;
+        case 'clickBySelector':
+            await browser.clickBySelector(params.selector, params);
+            return null;
+        case 'clickByCoordinates':
+            await browser.clickByCoordinates(params.x, params.y);
+            return null;
+        case 'hoverByIndex':
+            await browser.hoverByIndex(params.index);
+            return null;
+        case 'hoverBySelector':
+            await browser.hoverBySelector(params.selector);
+            return null;
+        case 'hoverByCoordinates':
+            await browser.hoverByCoordinates(params.x, params.y);
+            return null;
+        case 'typeText':
+            await browser.typeText(params.text, params);
+            return null;
+        case 'selectOption':
+            await browser.selectOption(params);
+            return null;
+        case 'scroll':
+            await browser.scroll(params.direction, params.amount, params.selector);
+            return null;
+        case 'scrollElementIntoView':
+            await browser.scrollElementIntoView(params.index, params);
+            return null;
+        case 'safeExpand':
+            await browser.safeExpand(params);
+            return null;
+        case 'pressKey':
+            await browser.pressKey(params.key);
+            return null;
+        case 'searchText': return await browser.searchText(params.query);
+        // Reactions
+        case 'waitForPageReaction':
+            return await browser.waitForPageReaction(params.before, params);
+        // UI manipulation
+        case 'wait':
+            await browser.wait(params.ms);
+            return null;
+        case 'dismissOverlays': return await browser.dismissOverlays();
+        case 'setColorScheme':
+            await browser.setColorScheme(params.scheme);
+            return null;
+        case 'setLanguage':
+            await browser.setLanguage(params.lang);
+            return null;
+        case 'resizeViewport':
+            await browser.resizeViewport(params.width, params.height);
+            return null;
+        case 'forceLoadLazyImages':
+            await browser.forceLoadLazyImages(params);
+            return null;
+        // Storage
+        case 'exportStorageState': return await browser.exportStorageState();
+        case 'exportSessionStorage': return await browser.exportSessionStorage();
+        case 'prepareSessionStorage':
+            await browser.prepareSessionStorage(params.bundle, params);
+            return null;
+        // Network
+        case 'observeNetworkRequests': return await browser.observeNetworkRequests(params.url, params.waitMs);
+        case 'setupRouteInterception':
+            await browser.setupRouteInterception(params.mocks);
+            return null;
+        case 'clearRouteInterception':
+            await browser.clearRouteInterception();
+            return null;
+        default:
+            throw new Error(`Unknown browser command: ${method}`);
     }
-    finally {
-        await browser.close();
-        logger.info('Browser closed');
-    }
-    // Track capture completion
-    const successes = manifest.captures.filter(c => c.result.success).length;
-    const total = manifest.captures.length;
-    const totalScreenshots = manifest.captures.reduce((sum, c) => sum + c.screenshots.length, 0);
-    const totalTokens = manifest.captures.reduce((sum, c) => sum + c.result.usage.reduce((s, u) => s + (u.totalTokens ?? 0), 0), 0);
-    getPostHog().capture({
-        distinctId: DISTINCT_ID,
-        event: 'capture_completed',
-        properties: {
-            url: opts.url,
-            model: opts.model,
-            successes,
-            total,
-            total_workflow_screenshots: totalScreenshots,
-            total_tokens: totalTokens,
-            all_succeeded: successes === total,
-        },
-    });
-    // Write manifest (strip Buffer fields from screenshots before serializing)
-    const manifestForJson = stripBuffersFromManifest(manifest);
-    const manifestPath = path.join(outputDir, 'manifest.json');
-    await fs.writeFile(manifestPath, JSON.stringify(manifestForJson, null, 2));
-    logger.info(`Manifest saved: ${manifestPath}`);
-    // Summary
-    if (successes === total) {
-        logger.success(`Done: ${successes}/${total} captures succeeded (${totalScreenshots} workflow screenshots)`);
-    }
-    else {
-        logger.error(`Done: ${successes}/${total} captures succeeded (${totalScreenshots} workflow screenshots)`);
-    }
-    await shutdownPostHog();
 }
-// Only run when executed directly (not imported by tests)
-const isDirectExecution = process.argv[1] && (process.argv[1].endsWith('/cli.js') ||
-    process.argv[1].endsWith('/cli.ts'));
+// ── Entry point ─────────────────────────────────────────────────────
+const resolvedArgv = process.argv[1] && fs.realpath(process.argv[1]).catch(() => process.argv[1]);
+const isDirectExecution = resolvedArgv && await resolvedArgv.then(p => p.endsWith('/cli.js') || p.endsWith('/cli.ts'));
 if (isDirectExecution) {
-    // Use parseAsync so that subcommand action handlers (e.g. `skill`) complete
-    // before any fallback code runs. Without this, the sync `parse()` would
-    // trigger `main()` before the async skill handler can call process.exit().
-    program.parseAsync().then(async () => {
-        // If a subcommand was invoked, its action handler calls process.exit().
-        // The code below only runs for the default capture command.
-        await main();
-    }).catch(async (err) => {
-        getPostHog().captureException(err, DISTINCT_ID);
-        await shutdownPostHog();
+    program.parseAsync().catch(async (err) => {
         logger.error(err.message);
         process.exit(1);
     });