autokap 1.3.5 → 1.3.6

package/dist/browser.d.ts

@@ -96,6 +96,7 @@ export declare class Browser {
     private browser;
     private context;
     private page;
+    private nativeVideoStartedAt;
     private elementMap;
     private akNodeIndex;
     private poolContext;
@@ -116,7 +117,9 @@ export declare class Browser {
      * `--window-size`) so the captured frames match viewport × DSF pixels, and
      * the cursor overlay script so clicks/hover moments are visible.
      */
-    static forClipCapture(options: BrowserOptions, cursorScript: string): Promise<Browser>;
+    static forClipCapture(options: BrowserOptions, cursorScript: string, recording?: {
+        nativeVideoDir?: string;
+    }): Promise<Browser>;
     /**
      * Close only the browser context (not the browser process).
      * Used by clip capture to release the context promptly after the CDP loop
@@ -332,6 +335,7 @@ export declare class Browser {
     resizeViewport(width: number, height: number): Promise<void>;
     get currentPage(): Page;
     get browserContext(): BrowserContext;
+    get nativeVideoStartTime(): number | null;
     /**
      * Observation pass for mock data generation.
      * Navigates to the given URL, waits for network idle, and records all JSON API responses.

package/dist/browser.js

@@ -772,6 +772,7 @@ export class Browser {
     browser = null;
     context = null;
     page = null;
+    nativeVideoStartedAt = null;
     elementMap = new Map();
     akNodeIndex = new Map();
     poolContext = false;
@@ -804,7 +805,7 @@ export class Browser {
      * `--window-size`) so the captured frames match viewport × DSF pixels, and
      * the cursor overlay script so clicks/hover moments are visible.
      */
-    static async forClipCapture(options, cursorScript) {
+    static async forClipCapture(options, cursorScript, recording) {
         const instance = new Browser(options);
         const deviceScaleFactor = normalizeDeviceScaleFactor(options.deviceScaleFactor);
         // Enable GPU compositor on non-Linux platforms so Chrome can render
@@ -832,13 +833,23 @@ export class Browser {
             headless: !options.headed,
             args: clipArgs,
         });
-        instance.context = await instance.browser.newContext({
+        const contextOptions = {
             viewport: options.viewport,
             deviceScaleFactor,
             locale: langToLocale(options.lang ?? 'en'),
             colorScheme: options.colorScheme ?? 'light',
             storageState: options.storageState,
-        });
+        };
+        if (recording?.nativeVideoDir) {
+            contextOptions.recordVideo = {
+                dir: recording.nativeVideoDir,
+                size: {
+                    width: Math.round(options.viewport.width),
+                    height: Math.round(options.viewport.height),
+                },
+            };
+        }
+        instance.context = await instance.browser.newContext(contextOptions);
         // Inject cursor overlay at context level — survives all navigations in this session
         await instance.context.addInitScript(cursorScript);
         // Also hide dev/prototype chrome on every document, including navigations
@@ -863,7 +874,11 @@ export class Browser {
                 document.addEventListener('DOMContentLoaded', install, { once: true });
             }
         }, { styleId: CAPTURE_HIDE_STYLE_ID, css: getCaptureHideCSS() });
+        const nativeVideoStartedAt = Date.now();
         instance.page = await instance.context.newPage();
+        if (recording?.nativeVideoDir) {
+            instance.nativeVideoStartedAt = nativeVideoStartedAt;
+        }
         return instance;
     }
     /**
@@ -5043,6 +5058,9 @@ export class Browser {
     get browserContext() {
         return this.ensureContext();
     }
+    get nativeVideoStartTime() {
+        return this.nativeVideoStartedAt;
+    }
     /**
      * Observation pass for mock data generation.
      * Navigates to the given URL, waits for network idle, and records all JSON API responses.

package/dist/cli-runner.js

@@ -241,7 +241,13 @@ export async function runCapture(options) {
         }
         if (recordable) {
             recordingDir = await fs.mkdtemp(path.join(os.tmpdir(), `autokap-${program.mediaMode}-`));
-            browser = await Browser.forClipCapture(browserOptions, buildCursorOverlayScript(program.artifactPlan.cursorTheme ?? 'minimal'));
+            const nativeCloudClipRecording = program.mediaMode === 'clip'
+                && process.env.AUTOKAP_CLOUD_RUNNER === '1'
+                && process.env.AUTOKAP_CLIP_RECORDER !== 'cdp';
+            if (nativeCloudClipRecording) {
+                logger.info('[capture] Cloud clip recorder: native Playwright video (CDP screenshot loop disabled)');
+            }
+            browser = await Browser.forClipCapture(browserOptions, buildCursorOverlayScript(program.artifactPlan.cursorTheme ?? 'minimal'), nativeCloudClipRecording ? { nativeVideoDir: recordingDir } : undefined);
         }
         else if (browserOptions.headed) {
             // Headed mode: standalone browser (pool is always headless)

package/dist/cli.js

@@ -79,6 +79,40 @@ function ensureExportFormat(format) {
 function printJson(value) {
     console.log(JSON.stringify(value, null, 2));
 }
+function displayPresetName(preset) {
+    const name = preset.name?.trim();
+    return name && name.length > 0 ? name : preset.id;
+}
+function cloudCaptureProgressCheckpoint(event) {
+    switch (event.type) {
+        case 'variant_start':
+            return {
+                type: 'preset_progress',
+                message: `Capture started: ${event.variantId}`,
+            };
+        case 'variant_end':
+            return {
+                type: 'preset_progress',
+                message: event.status === 'ok'
+                    ? `Capture completed: ${event.variantId}`
+                    : `Capture failed: ${event.variantId}`,
+                status: event.status === 'failed' ? 'running' : undefined,
+            };
+        case 'upload_start':
+            return {
+                type: 'upload_start',
+                message: 'Export started',
+            };
+        case 'upload_end':
+            return {
+                type: 'upload_end',
+                message: event.status === 'failed' ? 'Export failed' : 'Export completed',
+                status: event.status === 'failed' ? 'running' : undefined,
+            };
+        default:
+            return null;
+    }
+}
 function buildEndpointAssetUrl(config, endpointId) {
     return `${config.apiBaseUrl}/api/v1/assets/${endpointId}`;
 }
@@ -329,7 +363,7 @@ program
         totalPresets: data.presets.length,
         completedPresets: 0,
         failedPresets: 0,
-        message: `planned ${data.presets.length} preset(s)`,
+        message: `Run planned: ${data.presets.length} preset(s)`,
     });
     if (data.presets.length === 0) {
         logger.info(`[auto-recapture] No presets enabled for project ${opts.project}`);
@@ -343,9 +377,10 @@ program
         totalPresets: data.presets.length,
         completedPresets: 0,
         failedPresets: 0,
-        message: `starting ${data.presets.length} preset(s)`,
+        message: `Runner started: ${data.presets.length} preset(s) to capture`,
     });
     for (const [index, preset] of data.presets.entries()) {
+        const presetDisplayName = displayPresetName(preset);
         const label = preset.name ? `${preset.name} (${preset.id})` : preset.id;
         logger.info(`[auto-recapture] Running ${label}`);
         await postCloudCheckpoint({
@@ -356,7 +391,7 @@ program
             totalPresets: data.presets.length,
             completedPresets: index,
             failedPresets: failures.length,
-            message: `running ${preset.name ?? preset.id}`,
+            message: `Preset started: ${presetDisplayName}`,
         });
         const result = await runCapture({
             presetId: preset.id,
@@ -364,23 +399,21 @@ program
             headed: opts.headed,
             allowUploadFailure: opts.allowUploadFailure,
             onProgress: (event) => {
-                const checkpointType = event.type === 'upload_start'
-                    ? 'upload_start'
-                    : event.type === 'upload_end'
-                        ? 'upload_end'
-                        : 'preset_progress';
+                const checkpoint = cloudCaptureProgressCheckpoint(event);
+                if (!checkpoint)
+                    return;
                 void postCloudCheckpoint({
-                    type: checkpointType,
+                    type: checkpoint.type,
                     presetId: preset.id,
                     presetName: preset.name ?? null,
                     presetIndex: index,
                     totalPresets: data.presets.length,
                     completedPresets: index,
                     failedPresets: failures.length,
-                    message: event.message,
+                    message: checkpoint.message,
                     progressEvent: event,
-                    status: event.status === 'failed' ? 'running' : undefined,
-                }, { throttle: checkpointType === 'preset_progress' });
+                    status: checkpoint.status,
+                });
             },
         });
         const childRunId = result.runId;
@@ -399,7 +432,7 @@ program
                 childRunId,
                 status: 'failed',
                 errorMessage: error,
-                message: `failed ${preset.name ?? preset.id}`,
+                message: `Preset failed: ${presetDisplayName}`,
             });
         }
         else {
@@ -413,7 +446,7 @@ program
                 failedPresets: failures.length,
                 childRunId,
                 status: 'completed',
-                message: `completed ${preset.name ?? preset.id}`,
+                message: `Preset completed: ${presetDisplayName}`,
             });
         }
     }
@@ -445,7 +478,7 @@ program
         completedPresets: data.presets.length,
         failedPresets: 0,
         status: 'completed',
-        message: 'cloud recapture completed',
+        message: 'Cloud recapture completed',
     });
     await notifyCloudCallback('completed', {
         totalPresets: data.presets.length,

package/dist/web-playwright-local.js

@@ -352,21 +352,32 @@ export class WebPlaywrightLocal {
         const cloudClipFps = isCloudRunner ? 30 : defaultFps;
         const targetFps = options.captureFps
             ?? (options.mediaMode === 'video' ? 30 : cloudClipFps);
-        const loop = new ClipCaptureLoop({
-            page,
-            framesDir,
-            targetFps,
-            // Cloud runners have CPU headroom — drop the Linux 50 ms idle cushion
-            // (sized for tight CI runners) to let the loop stay close to its target.
-            minRestMs: process.platform === 'linux' && !isCloudRunner ? 50 : 16,
-        });
-        await loop.start();
+        const nativeClipVideo = options.mediaMode === 'clip' && isCloudRunner
+            ? page.video()
+            : null;
+        let loop = null;
+        if (nativeClipVideo) {
+            logger.info('[capture] Native cloud clip recorder enabled — using Playwright video stream instead of CDP screenshots');
+        }
+        else {
+            loop = new ClipCaptureLoop({
+                page,
+                framesDir,
+                targetFps,
+                // Cloud runners have CPU headroom — drop the Linux 50 ms idle cushion
+                // (sized for tight CI runners) to let the loop stay close to its target.
+                minRestMs: process.platform === 'linux' && !isCloudRunner ? 50 : 16,
+            });
+            await loop.start();
+        }
         this.recording = {
             mediaMode: options.mediaMode,
             startedAt: Date.now(),
             framesDir,
             mp4Path: path.join(baseDir, `${options.mediaMode}.mp4`),
             loop,
+            nativeVideo: nativeClipVideo,
+            nativeVideoStartedAt: this.browser.nativeVideoStartTime,
             finalized: false,
         };
         this.clipCursor = {
@@ -446,20 +457,47 @@ export class WebPlaywrightLocal {
             throw new Error('recording was not started');
         }
         if (this.recording.finalized) {
-            const buffer = await fs.readFile(this.recording.mp4Path);
-            const durationMs = this.recording.encodedDurationMs ?? await getMediaDurationMs(this.recording.mp4Path);
+            const sourcePath = this.recording.sourcePath ?? this.recording.mp4Path;
+            const buffer = await fs.readFile(sourcePath);
+            const durationMs = this.recording.encodedDurationMs ?? await getMediaDurationMs(sourcePath);
             this.recording.encodedDurationMs = durationMs;
             return {
                 buffer,
                 durationMs,
-                mimeType: 'video/mp4',
-                trimStartMs: this.recording.result?.trimStartMs ?? 0,
+                mimeType: this.recording.sourceMimeType ?? 'video/mp4',
+                trimStartMs: this.recording.trimStartMs ?? this.recording.result?.trimStartMs ?? 0,
             };
         }
         if (this.recordingNavWatcher) {
             this.recordingNavWatcher.detach();
             this.recordingNavWatcher = null;
         }
+        if (this.recording.nativeVideo) {
+            const video = this.recording.nativeVideo;
+            const trimStartMs = Math.max(0, this.recording.startedAt
+                - (this.recording.nativeVideoStartedAt ?? this.sessionStartedAt));
+            await this.browser.closeContext();
+            const videoPath = await video.path();
+            const durationMs = await getMediaDurationMs(videoPath);
+            logger.info(`[capture] Native clip recording finalized: source ${durationMs}ms, ` +
+                `trim start ${Math.round(trimStartMs)}ms`);
+            this.recording.finalized = true;
+            this.recording.sourcePath = videoPath;
+            this.recording.sourceMimeType = 'video/webm';
+            this.recording.trimStartMs = trimStartMs;
+            this.recording.encodedDurationMs = durationMs;
+            this.clipCursor = null;
+            const buffer = await fs.readFile(videoPath);
+            return {
+                buffer,
+                durationMs,
+                mimeType: 'video/webm',
+                trimStartMs,
+            };
+        }
+        if (!this.recording.loop) {
+            throw new Error('recording loop was not initialized');
+        }
         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 ` +
@@ -475,6 +513,8 @@ export class WebPlaywrightLocal {
         });
         this.recording.finalized = true;
         this.recording.result = result;
+        this.recording.sourcePath = this.recording.mp4Path;
+        this.recording.sourceMimeType = 'video/mp4';
         this.recording.encodedDurationMs = await getMediaDurationMs(this.recording.mp4Path);
         this.clipCursor = null;
         const buffer = await fs.readFile(this.recording.mp4Path);

package/package.json

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