autokap 1.1.3 → 1.1.4

package/dist/browser.d.ts

@@ -147,6 +147,7 @@ export declare class Browser {
      * with an overall timeout of `timeoutMs`.
      */
     private waitForDomStability;
+    private waitForFontsBeforeScreenshot;
     takeScreenshot(): Promise<Buffer>;
     takeScreenshotForAI(options?: {
         timeoutMs?: number;

package/dist/browser.js

@@ -689,11 +689,7 @@ export class Browser {
             // Page may have navigated during wait
         }
     }
-    async takeScreenshot() {
-        const page = this.ensurePage();
-        // Move cursor off-screen to avoid hover effects in screenshots
-        await page.mouse.move(0, 0);
-        await ensureCaptureHideStyles(page);
+    async waitForFontsBeforeScreenshot(page) {
         // Wait for web fonts to be loaded AND applied to the rendered page.
         // next/font and other `font-display: swap` setups can report the
         // FontFaceSet as "ready" while visible text is still painted with fallback.
@@ -762,6 +758,13 @@ export class Browser {
             })(),
             new Promise((resolve) => setTimeout(resolve, 8000)),
         ])).catch(() => { });
+    }
+    async takeScreenshot() {
+        const page = this.ensurePage();
+        // Move cursor off-screen to avoid hover effects in screenshots
+        await page.mouse.move(0, 0);
+        await ensureCaptureHideStyles(page);
+        await this.waitForFontsBeforeScreenshot(page);
         await logFontDiagnostics(page, 'before screenshot');
         return Buffer.from(await page.screenshot({ type: 'png', fullPage: false }));
     }
@@ -4135,6 +4138,8 @@ export class Browser {
             if (clip.width <= 0 || clip.height <= 0) {
                 throw new Error(`Element index ${index} is still outside the viewport after alignment`);
             }
+            await this.waitForFontsBeforeScreenshot(page);
+            await logFontDiagnostics(page, 'before element screenshot');
             return Buffer.from(await page.screenshot({ type: 'png', clip }));
         }
         finally {
@@ -4160,6 +4165,8 @@ export class Browser {
         // Hide fixed/sticky overlays (navbars, banners) that could cover the region
         await this.hideFixedOverlays();
         try {
+            await this.waitForFontsBeforeScreenshot(page);
+            await logFontDiagnostics(page, 'before region screenshot');
             const fullPage = Buffer.from(await page.screenshot({ type: 'png', fullPage: true }));
             const image = sharp(fullPage);
             const meta = await image.metadata();
@@ -4281,6 +4288,8 @@ export class Browser {
         await this.hideFixedOverlays();
         try {
             const dpr = pageInfo.dpr;
+            await this.waitForFontsBeforeScreenshot(page);
+            await logFontDiagnostics(page, 'before selector screenshot');
             const fullPage = Buffer.from(await page.screenshot({ type: 'png', fullPage: true }));
             const image = sharp(fullPage);
             const meta = await image.metadata();
@@ -4343,6 +4352,8 @@ export class Browser {
         await this.hideFixedOverlays();
         try {
             const dpr = pageInfo.dpr;
+            await this.waitForFontsBeforeScreenshot(page);
+            await logFontDiagnostics(page, 'before bounding-region screenshot');
             const fullPage = Buffer.from(await page.screenshot({ type: 'png', fullPage: true }));
             const image = sharp(fullPage);
             const meta = await image.metadata();

package/dist/cli-runner.js

@@ -92,10 +92,13 @@ export async function runCapture(options) {
         credentials: program.preconditions.credentials,
     });
     // Step 4: Execute the program
+    const maxParallelVariants = program.mediaMode === 'clip'
+        ? 1
+        : program.maxParallelCaptures;
     const runOptions = {
         recoveryChain,
         abortSignal: options.abortSignal,
-        maxParallelVariants: program.maxParallelCaptures,
+        maxParallelVariants,
         llmConfig,
         presetName: program.presetId,
         onProgress: (event) => {
@@ -106,8 +109,12 @@ export async function runCapture(options) {
         },
     };
     const captureStart = Date.now();
-    if (program.maxParallelCaptures) {
-        logger.info(`[capture] Concurrency cap resolved to ${program.maxParallelCaptures} parallel variant(s)`);
+    if (maxParallelVariants) {
+        logger.info(`[capture] Concurrency cap resolved to ${maxParallelVariants} parallel variant(s)`);
+        if (program.mediaMode === 'clip' && program.maxParallelCaptures && program.maxParallelCaptures > 1) {
+            logger.info(`[capture] Clip capture concurrency capped at 1 ` +
+                `(requested ${program.maxParallelCaptures}) to avoid CI CPU contention`);
+        }
     }
     const createAdapter = async (variant) => {
         const recordable = program.mediaMode === 'clip';

package/dist/clip-capture-loop.d.ts

@@ -24,6 +24,13 @@ export interface ClipCaptureLoopOptions {
      * content (high-contrast text, flat colors) but unlocks a 33% fluidity gain.
      */
     jpegQuality?: number;
+    /**
+     * Maximum capture attempts per second. The loop also yields after every frame
+     * so Playwright input and page JS can make progress while a clip is recording.
+     */
+    targetFps?: number;
+    /** Minimum rest after each CDP screenshot, even when capture is already slow. */
+    minRestMs?: number;
 }
 export interface ClipCaptureLoopResult {
     framesDir: string;
@@ -46,6 +53,8 @@ export declare class ClipCaptureLoop {
     private readonly page;
     private readonly framesDir;
     private readonly jpegQuality;
+    private readonly targetFrameIntervalMs;
+    private readonly minRestMs;
     private cdp;
     private running;
     private loopPromise;

package/dist/clip-capture-loop.js

@@ -18,6 +18,8 @@ export class ClipCaptureLoop {
     page;
     framesDir;
     jpegQuality;
+    targetFrameIntervalMs;
+    minRestMs;
     cdp = null;
     running = false;
     loopPromise = null;
@@ -30,6 +32,9 @@ export class ClipCaptureLoop {
         this.page = opts.page;
         this.framesDir = opts.framesDir;
         this.jpegQuality = opts.jpegQuality ?? 80;
+        const targetFps = Math.max(1, Math.min(30, opts.targetFps ?? (process.platform === 'linux' ? 8 : 15)));
+        this.targetFrameIntervalMs = 1000 / targetFps;
+        this.minRestMs = Math.max(0, Math.min(250, opts.minRestMs ?? (process.platform === 'linux' ? 50 : 16)));
     }
     async start() {
         this.cdp = await this.page.context().newCDPSession(this.page);
@@ -80,6 +85,7 @@ export class ClipCaptureLoop {
         while (this.running) {
             if (!this.cdp)
                 return;
+            const frameStartedAt = performance.now();
             let data;
             try {
                 const r = await this.cdp.send('Page.captureScreenshot', {
@@ -105,6 +111,11 @@ export class ClipCaptureLoop {
             // Decode+write happens in stop().
             this.frames.push(data);
             this.frameTimestamps.push(ts);
+            const elapsed = performance.now() - frameStartedAt;
+            const restMs = Math.max(this.minRestMs, this.targetFrameIntervalMs - elapsed);
+            if (restMs > 0 && this.running) {
+                await new Promise(resolve => setTimeout(resolve, restMs));
+            }
         }
     }
 }

package/dist/mouse-animation.d.ts

@@ -43,4 +43,7 @@ export declare function animatedHover(page: Page, target: {
  * Type text into the currently focused element at a human-like typing speed.
  * Assumes the field is already focused (via a preceding click).
  */
-export declare function humanType(page: Page, text: string): Promise<void>;
+export declare function humanType(page: Page, text: string, options?: {
+    minDelayMs?: number;
+    maxDelayMs?: number;
+}): Promise<void>;

package/dist/mouse-animation.js

@@ -103,12 +103,16 @@ export async function animatedHover(page, target, fromCurrent, options = {}) {
  * Type text into the currently focused element at a human-like typing speed.
  * Assumes the field is already focused (via a preceding click).
  */
-export async function humanType(page, text) {
+export async function humanType(page, text, options = {}) {
+    const minDelay = Math.max(0, options.minDelayMs ?? 60);
+    const maxDelay = Math.max(minDelay, options.maxDelayMs ?? 140);
     for (const char of text) {
         await page.keyboard.type(char);
         // 60–120 WPM → ~80–130ms between characters (5 chars per word)
-        const delay = 60 + Math.random() * 80;
-        await page.waitForTimeout(delay);
+        const delay = minDelay + Math.random() * (maxDelay - minDelay);
+        if (delay > 0) {
+            await page.waitForTimeout(delay);
+        }
     }
 }
 //# sourceMappingURL=mouse-animation.js.map

package/dist/web-playwright-local.js

@@ -278,7 +278,12 @@ export class WebPlaywrightLocal {
             ?? await fs.mkdtemp(path.join(os.tmpdir(), 'autokap-recording-'));
         const framesDir = path.join(baseDir, 'frames');
         await fs.mkdir(framesDir, { recursive: true });
-        const loop = new ClipCaptureLoop({ page, framesDir });
+        const loop = new ClipCaptureLoop({
+            page,
+            framesDir,
+            targetFps: process.platform === 'linux' ? 8 : 15,
+            minRestMs: process.platform === 'linux' ? 50 : 16,
+        });
         await loop.start();
         this.recording = {
             mediaMode: options.mediaMode,
@@ -651,7 +656,9 @@ export class WebPlaywrightLocal {
             await page.keyboard.press('Control+A');
         }
         await page.waitForTimeout(70);
-        await humanType(page, text);
+        await humanType(page, text, this.clipCursor
+            ? { minDelayMs: 20, maxDelayMs: 45 }
+            : undefined);
     }
     async seedClipCursor() {
         if (!this.clipCursor)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autokap",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "AI-powered CLI tool for capturing clean screenshots of websites",
   "type": "module",
   "main": "./dist/index.js",