autokap 1.1.2 → 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

@@ -98,7 +98,7 @@ function resolveEffectivePadding(config, bbox) {
 }
 import { dismissCookiesAndWidgets, ensureCaptureHideStyles } from './cookie-dismiss.js';
 import { CHROMIUM_ARGS, browserPool } from './browser-pool.js';
-import { logger } from './logger.js';
+import { isDebugEnabled, logger } from './logger.js';
 async function withHelperTimeout(label, timeoutMs, work) {
     if (!timeoutMs || timeoutMs <= 0) {
         return work();
@@ -117,6 +117,82 @@ async function withHelperTimeout(label, timeoutMs, work) {
             clearTimeout(timer);
     }
 }
+function isLikelyFontUrl(url) {
+    return /\.(?:woff2?|ttf|otf)(?:[?#]|$)/i.test(url);
+}
+async function logFontDiagnostics(page, stage) {
+    if (!isDebugEnabled())
+        return;
+    try {
+        const diagnostics = await page.evaluate(async () => {
+            const fontPreloads = Array.from(document.querySelectorAll('link[rel="preload"][as="font"], link[as="font"]')).map((link) => ({
+                href: link.href,
+                type: link.type || null,
+                crossOrigin: link.crossOrigin || null,
+            }));
+            const fetches = [];
+            for (const preload of fontPreloads) {
+                const startedAt = performance.now();
+                try {
+                    const response = await fetch(preload.href, {
+                        cache: 'no-store',
+                        credentials: 'include',
+                    });
+                    fetches.push({
+                        url: preload.href,
+                        ok: response.ok,
+                        status: response.status,
+                        contentType: response.headers.get('content-type'),
+                        contentLength: response.headers.get('content-length'),
+                        durationMs: Math.round(performance.now() - startedAt),
+                    });
+                }
+                catch (error) {
+                    fetches.push({
+                        url: preload.href,
+                        durationMs: Math.round(performance.now() - startedAt),
+                        error: error instanceof Error ? error.message : String(error),
+                    });
+                }
+            }
+            const normalizeFamily = (family) => family.trim().replace(/^['"]|['"]$/g, '');
+            const computedFamilies = Array.from(new Set([document.body, ...Array.from(document.querySelectorAll('h1,h2,h3,h4,h5,h6,p,a,button,input,textarea,label,span,[data-ak]')).slice(0, 40)]
+                .filter(Boolean)
+                .flatMap((node) => getComputedStyle(node).fontFamily
+                .split(',')
+                .map(normalizeFamily)
+                .filter(Boolean))));
+            const fontChecks = computedFamilies.map((family) => ({
+                family,
+                weight400: document.fonts.check(`400 16px "${family}"`, 'AutoKap Aa 0123456789'),
+                weight600: document.fonts.check(`600 16px "${family}"`, 'AutoKap Aa 0123456789'),
+            }));
+            return {
+                url: location.href,
+                count: document.fonts.size,
+                status: document.fonts.status,
+                faces: Array.from(document.fonts).map((font) => ({
+                    family: font.family,
+                    weight: font.weight,
+                    style: font.style,
+                    stretch: font.stretch,
+                    status: font.status,
+                })),
+                bodyComputed: getComputedStyle(document.body).fontFamily,
+                documentElementClass: document.documentElement.className,
+                bodyClass: document.body.className,
+                computedFamilies,
+                fontChecks,
+                preloads: fontPreloads,
+                fetches,
+            };
+        });
+        logger.debug(`[capture] font diagnostics ${stage}: ${JSON.stringify(diagnostics)}`);
+    }
+    catch (error) {
+        logger.debug(`[capture] font diagnostics ${stage} failed: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}
 /**
  * Map a BCP-47 language tag to a Playwright-compatible locale string.
  * Playwright accepts both "fr" and "fr-FR". We normalize 2-char codes to their
@@ -401,6 +477,8 @@ export class Browser {
     attachDebugLifecycleListeners() {
         if (!this.page || !this.context)
             return;
+        if (!isDebugEnabled())
+            return;
         const page = this.page;
         const context = this.context;
         page.on('crash', () => {
@@ -423,6 +501,21 @@ export class Browser {
                 logger.debug(`[page] console.${type}: ${msg.text().slice(0, 200)}`);
             }
         });
+        page.on('requestfailed', (request) => {
+            const url = request.url();
+            if (request.resourceType() !== 'font' && !isLikelyFontUrl(url))
+                return;
+            logger.debug(`[page] font request failed: ${url} — ${request.failure()?.errorText ?? 'unknown error'}`);
+        });
+        page.on('response', (response) => {
+            const request = response.request();
+            const url = response.url();
+            if (request.resourceType() !== 'font' && !isLikelyFontUrl(url))
+                return;
+            const headers = response.headers();
+            logger.debug(`[page] font response: status=${response.status()} type=${headers['content-type'] ?? 'unknown'} ` +
+                `length=${headers['content-length'] ?? 'unknown'} url=${url}`);
+        });
         context.on('close', () => {
             logger.debug(`[context] CLOSE event`);
         });
@@ -466,6 +559,7 @@ export class Browser {
         this.context = await this.browser.newContext(this.buildContextOptions());
         this.page = await this.context.newPage();
         this.elementMap.clear();
+        this.attachDebugLifecycleListeners();
     }
     async setDeviceScaleFactor(deviceScaleFactor) {
         const normalizedScale = normalizeDeviceScaleFactor(deviceScaleFactor);
@@ -595,11 +689,83 @@ export class Browser {
             // Page may have navigated during wait
         }
     }
+    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.
+        // We force-load declared and currently computed families, verify the
+        // primary rendered families with document.fonts.check(), then wait for a
+        // committed repaint.
+        await page.evaluate(() => Promise.race([
+            (async () => {
+                const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+                const nextPaint = () => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+                const normalizeFamily = (family) => family.trim().replace(/^['"]|['"]$/g, '');
+                const computedFamilies = () => {
+                    const families = new Set();
+                    const nodes = [
+                        document.body,
+                        ...Array.from(document.querySelectorAll('h1,h2,h3,h4,h5,h6,p,a,button,input,textarea,label,span,[data-ak]')).slice(0, 80),
+                    ].filter(Boolean);
+                    for (const node of nodes) {
+                        const stack = getComputedStyle(node).fontFamily;
+                        for (const family of stack.split(',')) {
+                            const normalized = normalizeFamily(family);
+                            if (normalized
+                                && !/^(serif|sans-serif|monospace|system-ui|ui-sans-serif|ui-monospace)$/i.test(normalized)) {
+                                families.add(normalized);
+                            }
+                        }
+                    }
+                    return families;
+                };
+                const allFamilies = () => new Set([
+                    ...Array.from(document.fonts).map((font) => font.family),
+                    ...computedFamilies(),
+                ]);
+                const probe = document.createElement('div');
+                probe.setAttribute('aria-hidden', 'true');
+                probe.style.cssText = 'position:fixed;left:-9999px;top:-9999px;visibility:hidden;pointer-events:none;';
+                for (const family of allFamilies()) {
+                    const span = document.createElement('span');
+                    span.style.fontFamily = `"${family}"`;
+                    span.textContent = 'AutoKap Aa 0123456789';
+                    probe.appendChild(span);
+                }
+                document.body.appendChild(probe);
+                void probe.offsetHeight;
+                const sample = 'AutoKap Aa 0123456789';
+                await Promise.all([
+                    ...Array.from(document.fonts).map((font) => font.load().catch(() => null)),
+                    ...Array.from(allFamilies()).flatMap((family) => [
+                        document.fonts.load(`400 16px "${family}"`, sample).catch(() => null),
+                        document.fonts.load(`600 16px "${family}"`, sample).catch(() => null),
+                    ]),
+                ]);
+                await document.fonts.ready;
+                const deadline = performance.now() + 7000;
+                while (performance.now() < deadline) {
+                    const renderedFamilies = Array.from(computedFamilies()).filter((family) => !/\bFallback\b/i.test(family));
+                    const loaded = renderedFamilies.length === 0
+                        || renderedFamilies.every((family) => document.fonts.check(`400 16px "${family}"`, sample)
+                            || document.fonts.check(`600 16px "${family}"`, sample));
+                    if (document.fonts.status === 'loaded' && loaded)
+                        break;
+                    await sleep(100);
+                }
+                probe.remove();
+                await nextPaint();
+            })(),
+            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 }));
     }
     async takeScreenshotForAI(options = {}) {
@@ -3972,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 {
@@ -3997,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();
@@ -4118,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();
@@ -4180,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

@@ -26,6 +26,7 @@ import { logger } from './logger.js';
 import { callLLM } from './llm-provider.js';
 import { APP_VERSION } from './version.js';
 import { normalizeAllowedOrigins, normalizeHttpOrigin, verifySignedExecutionProgramEnvelope, } from './program-signing.js';
+const MAX_CLIP_CAPTURE_DEVICE_SCALE_FACTOR = 1;
 const HEALER_SYSTEM_PROMPT = 'You repair failed deterministic browser opcodes. Respond only with JSON.';
 // ── Main entry point ────────────────────────────────────────────────
 export async function runCapture(options) {
@@ -91,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) => {
@@ -105,22 +109,34 @@ 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';
+        const requestedDeviceScaleFactor = variant.deviceScaleFactor ?? program.outputScale ?? 2;
+        const runtimeDeviceScaleFactor = recordable && Number.isFinite(requestedDeviceScaleFactor)
+            ? Math.min(Number(requestedDeviceScaleFactor), MAX_CLIP_CAPTURE_DEVICE_SCALE_FACTOR)
+            : requestedDeviceScaleFactor;
         const browserOptions = {
             headed: options.headed ?? false,
             viewport: variant.viewport,
-            deviceScaleFactor: variant.deviceScaleFactor ?? program.outputScale,
+            deviceScaleFactor: runtimeDeviceScaleFactor,
             lang: variant.locale,
             colorScheme: variant.theme,
             storageState: program.preconditions.storageState,
         };
-        const recordable = program.mediaMode === 'clip';
         let recordingDir;
         let browser;
         logger.info(`[capture] Launching browser${browserOptions.headed ? ' (headed)' : ''}…`);
+        if (recordable && runtimeDeviceScaleFactor !== requestedDeviceScaleFactor) {
+            logger.info(`[capture] Clip capture scale capped at ${runtimeDeviceScaleFactor} ` +
+                `(requested ${requestedDeviceScaleFactor}) to preserve recording FPS`);
+        }
         if (recordable) {
             recordingDir = await fs.mkdtemp(path.join(os.tmpdir(), `autokap-${program.mediaMode}-`));
             browser = await Browser.forClipCapture(browserOptions, buildCursorOverlayScript(program.artifactPlan.cursorTheme ?? 'minimal'));
@@ -228,7 +244,10 @@ async function uploadResults(config, program, result) {
             if (variantSpec?.deviceFrame) {
                 formData.append('deviceFrame', variantSpec.deviceFrame);
             }
-            const deviceScaleFactor = variantSpec?.deviceScaleFactor ?? program.outputScale;
+            const requestedDeviceScaleFactor = variantSpec?.deviceScaleFactor ?? program.outputScale ?? 2;
+            const deviceScaleFactor = artifact.mediaMode === 'clip' && Number.isFinite(requestedDeviceScaleFactor)
+                ? Math.min(Number(requestedDeviceScaleFactor), MAX_CLIP_CAPTURE_DEVICE_SCALE_FACTOR)
+                : requestedDeviceScaleFactor;
             if (Number.isFinite(deviceScaleFactor)) {
                 formData.append('deviceScaleFactor', String(deviceScaleFactor));
             }

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,
@@ -305,6 +310,8 @@ export class WebPlaywrightLocal {
             };
         }
         const result = await this.recording.loop.stop();
+        logger.info(`[capture] Clip frame capture: ${result.frameCount} frame(s), ` +
+            `${result.measuredFps.toFixed(1)} fps over ${(result.actualDurationMs / 1000).toFixed(2)}s`);
         await this.browser.closeContext();
         await assembleMp4FromFrames({
             framesDir: this.recording.framesDir,
@@ -649,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.2",
+  "version": "1.1.4",
   "description": "AI-powered CLI tool for capturing clean screenshots of websites",
   "type": "module",
   "main": "./dist/index.js",
@@ -179,7 +179,7 @@
     "autokap": "dist/cli.js"
   },
   "scripts": {
-    "postinstall": "node -e \"try{require('child_process').execSync('npx playwright install chromium',{stdio:'inherit'})}catch(e){console.warn('AutoKap: Playwright Chromium install failed. Run `npx playwright install chromium` manually.',e.message||'')}\""
+    "postinstall": "node -e \"try{require('child_process').execSync('npx playwright install chromium',{stdio:'inherit'})}catch(e){console.warn('AutoKap: Playwright Chromium install failed. Run npx playwright install chromium manually.',e.message||'')}\""
   },
   "engines": {
     "node": ">=20"