autokap 1.5.3 → 1.5.4

package/dist/cursor-overlay-script.js

@@ -113,6 +113,14 @@ export function buildCursorOverlayScript(theme = 'minimal') {
       triggerPulse();
     };
 
+    // AUT-80 — Browser-side mousedown timestamp buffer. Real CDP-dispatched
+    // \`mousedown\` events fire here at the exact moment the click happens in
+    // the recorded video (the cursor pulse is purely decorative and fires
+    // slightly later). The runner reads this buffer after each click action
+    // and uses the timestamps for the mouse SFX track so audio = visual
+    // click, even across cursor animation latency and frame quantisation.
+    window.__akClickAt = [];
+
     // Keep DOM event listeners as fallback for real mouse events (headed mode)
     document.addEventListener('mousemove', function(e) {
       setCursorPosition(e.clientX, e.clientY);
@@ -122,6 +130,7 @@ export function buildCursorOverlayScript(theme = 'minimal') {
       setCursorPosition(e.clientX, e.clientY);
       cursor.classList.add('__ak_pressed');
       triggerPulse();
+      window.__akClickAt.push(Date.now());
     }, true);
     window.addEventListener('mouseup', function(e) {
       setCursorPosition(e.clientX, e.clientY);
@@ -130,6 +139,14 @@ export function buildCursorOverlayScript(theme = 'minimal') {
     window.addEventListener('click', function(e) {
       setCursorPosition(e.clientX, e.clientY);
       triggerPulse();
+      // Capture synthetic click() dispatches that bypass mousedown (e.g.
+      // dispatchEvent('click') from JS-dispatch opcode paths). Skip if a
+      // mousedown landed in the last 80 ms so we don't double-count a
+      // regular mouse-driven click.
+      var last = window.__akClickAt[window.__akClickAt.length - 1];
+      if (last == null || (Date.now() - last) > 80) {
+        window.__akClickAt.push(Date.now());
+      }
     }, true);
   }
 

package/dist/web-playwright-local.d.ts

@@ -165,4 +165,18 @@ export declare class WebPlaywrightLocal implements RuntimeAdapter {
     private relativeClickPosition;
     private moveClipCursorToPoint;
     private emitClipClickPulse;
+    /**
+     * Drain the browser-side `__akClickAt` buffer for timestamps newer than
+     * `sinceMs`, replay them through `onClick`, and reset the buffer so the
+     * next click action starts fresh. This is what makes mouse SFX line up
+     * exactly with the visual click in the recorded video — the mousedown
+     * listener inside the cursor overlay timestamps each click at the same
+     * instant the browser dispatches it, which is also the frame the CDP
+     * screencast captures.
+     *
+     * Falls back to `sinceMs` (Node wall-clock at action dispatch) when the
+     * buffer is empty (e.g. `useKeyboard` Enter-press path, or transient
+     * page.evaluate failure).
+     */
+    private reportClickSfxTimestamps;
 }

package/dist/web-playwright-local.js

@@ -77,12 +77,12 @@ export class WebPlaywrightLocal {
         const page = await this.browser.currentPage;
         const t0 = Date.now();
         logger.debug(`[click] start selector="${selector}"${options?.useKeyboard ? ' mode=keyboard' : ''}${options?.useJsDispatch ? ' mode=js_dispatch' : ''}${options?.coordinates ? ` mode=coords(${options.coordinates.x},${options.coordinates.y})` : ''}`);
-        const fireClickSfx = () => options?.onClick?.(Date.now());
         try {
             if (options?.coordinates) {
                 await this.moveClipCursorToPoint(options.coordinates);
-                fireClickSfx();
+                const dispatchedAt = Date.now();
                 await this.browser.clickByCoordinates(options.coordinates.x, options.coordinates.y);
+                await this.reportClickSfxTimestamps(page, dispatchedAt, options?.onClick);
                 logger.debug(`[click] done coords took ${Date.now() - t0}ms`);
                 return;
             }
@@ -90,14 +90,17 @@ export class WebPlaywrightLocal {
             const animatedTarget = await this.moveClipCursorToLocator(locator);
             if (options?.useKeyboard) {
                 await locator.focus();
-                fireClickSfx();
+                const dispatchedAt = Date.now();
                 await page.keyboard.press('Enter');
+                // No real mousedown fires on Enter — fall back to Node timing.
+                options?.onClick?.(dispatchedAt);
                 logger.debug(`[click] done keyboard took ${Date.now() - t0}ms`);
                 return;
             }
             if (options?.useJsDispatch) {
-                fireClickSfx();
+                const dispatchedAt = Date.now();
                 await locator.dispatchEvent('click');
+                await this.reportClickSfxTimestamps(page, dispatchedAt, options?.onClick);
                 logger.debug(`[click] done js_dispatch took ${Date.now() - t0}ms`);
                 return;
             }
@@ -107,18 +110,19 @@ export class WebPlaywrightLocal {
                 ? await this.relativeClickPosition(locator, animatedTarget)
                 : null;
             if (options?.button && options.button !== 'left') {
-                fireClickSfx();
+                const dispatchedAt = Date.now();
                 await locator.click({
                     button: options.button,
                     timeout: 5000,
                     force: options?.force,
                     ...(clickPosition ? { position: clickPosition } : {}),
                 });
+                await this.reportClickSfxTimestamps(page, dispatchedAt, options?.onClick);
                 logger.debug(`[click] done button=${options.button} took ${Date.now() - t0}ms`);
                 return;
             }
+            const dispatchedAt = Date.now();
             if (clickPosition) {
-                fireClickSfx();
                 await locator.click({
                     timeout: 5000,
                     force: options?.force,
@@ -126,9 +130,9 @@ export class WebPlaywrightLocal {
                 });
             }
             else {
-                fireClickSfx();
                 await this.browser.clickBySelector(selector, { force: options?.force });
             }
+            await this.reportClickSfxTimestamps(page, dispatchedAt, options?.onClick);
             await this.emitClipClickPulse();
             logger.debug(`[click] done normal took ${Date.now() - t0}ms`);
         }
@@ -151,11 +155,12 @@ export class WebPlaywrightLocal {
         const position = target
             ? await this.relativeClickPosition(resolved.locator, target)
             : null;
-        opts.onClick?.(Date.now());
+        const dispatchedAt = Date.now();
         await resolved.locator.click({
             timeout: 5000,
             ...(position ? { position } : {}),
         });
+        await this.reportClickSfxTimestamps(page, dispatchedAt, opts.onClick);
     }
     /**
      * Type into an element using semantic target resolution.
@@ -649,13 +654,14 @@ export class WebPlaywrightLocal {
             ? await this.relativeClickPosition(locator, target)
             : null;
         const opts = { timeout: 5000, ...(position ? { position } : {}) };
-        actionOpts?.onClick?.(Date.now());
+        const dispatchedAt = Date.now();
         if (checked) {
             await locator.check(opts);
         }
         else {
             await locator.uncheck(opts);
         }
+        await this.reportClickSfxTimestamps(page, dispatchedAt, actionOpts?.onClick);
     }
     async doubleClick(selector, actionOpts) {
         const page = await this.browser.currentPage;
@@ -664,11 +670,12 @@ export class WebPlaywrightLocal {
         const position = target
             ? await this.relativeClickPosition(locator, target)
             : null;
-        actionOpts?.onClick?.(Date.now());
+        const dispatchedAt = Date.now();
         await locator.dblclick({
             timeout: 5000,
             ...(position ? { position } : {}),
         });
+        await this.reportClickSfxTimestamps(page, dispatchedAt, actionOpts?.onClick);
     }
     async drag(opts) {
         const page = await this.browser.currentPage;
@@ -1021,6 +1028,47 @@ export class WebPlaywrightLocal {
                 window.__akClickPulse(px, py);
         }, { px: Math.round(x), py: Math.round(y) }).catch(() => { });
     }
+    /**
+     * Drain the browser-side `__akClickAt` buffer for timestamps newer than
+     * `sinceMs`, replay them through `onClick`, and reset the buffer so the
+     * next click action starts fresh. This is what makes mouse SFX line up
+     * exactly with the visual click in the recorded video — the mousedown
+     * listener inside the cursor overlay timestamps each click at the same
+     * instant the browser dispatches it, which is also the frame the CDP
+     * screencast captures.
+     *
+     * Falls back to `sinceMs` (Node wall-clock at action dispatch) when the
+     * buffer is empty (e.g. `useKeyboard` Enter-press path, or transient
+     * page.evaluate failure).
+     */
+    async reportClickSfxTimestamps(page, sinceMs, onClick) {
+        if (!onClick)
+            return;
+        let captured = [];
+        try {
+            captured = (await page.evaluate((cutoff) => {
+                const buf = window.__akClickAt;
+                if (!Array.isArray(buf))
+                    return [];
+                const fresh = buf.filter((t) => typeof t === 'number' && t >= cutoff);
+                // Reset the buffer so successive click actions don't see each
+                // others' timestamps. We mutate the array in place to keep the
+                // reference stable for any other consumers (none today).
+                buf.length = 0;
+                return fresh;
+            }, sinceMs));
+        }
+        catch {
+            captured = [];
+        }
+        if (captured.length > 0) {
+            for (const t of captured)
+                onClick(t);
+        }
+        else {
+            onClick(sinceMs);
+        }
+    }
 }
 function describeResolveOptions(opts) {
     const parts = [];

package/package.json

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