autokap 1.1.2 → 1.1.3

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);
@@ -600,6 +694,75 @@ export class Browser {
         // Move cursor off-screen to avoid hover effects in screenshots
         await page.mouse.move(0, 0);
         await ensureCaptureHideStyles(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(() => { });
+        await logFontDiagnostics(page, 'before screenshot');
         return Buffer.from(await page.screenshot({ type: 'png', fullPage: false }));
     }
     async takeScreenshotForAI(options = {}) {

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) {
@@ -109,18 +110,26 @@ export async function runCapture(options) {
         logger.info(`[capture] Concurrency cap resolved to ${program.maxParallelCaptures} parallel variant(s)`);
     }
     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 +237,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/web-playwright-local.js

@@ -305,6 +305,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autokap",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "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"