playwriter 0.0.63 → 0.0.89

package/src/executor.ts

@@ -26,6 +26,7 @@ import { ScopedFS } from './scoped-fs.js'
 import {
   screenshotWithAccessibilityLabels,
   getAriaSnapshot,
+  resizeImage,
   type ScreenshotResult,
   type SnapshotFormat,
 } from './aria-snapshot.js'
@@ -33,7 +34,10 @@ import { createGhostBrowserChrome, type GhostBrowserCommandResult } from './ghos
 export type { SnapshotFormat }
 import { getCleanHTML, type GetCleanHTMLOptions } from './clean-html.js'
 import { getPageMarkdown, type GetPageMarkdownOptions } from './page-markdown.js'
-import { startRecording, stopRecording, isRecording, cancelRecording } from './screen-recording.js'
+import { createRecordingApi } from './screen-recording.js'
+import { createDemoVideo } from './ffmpeg.js'
+import { type GhostCursorClientOptions } from './ghost-cursor.js'
+import { RecordingGhostCursorController } from './recording-ghost-cursor.js'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -65,10 +69,11 @@ const usefulGlobals = {
 } as const
 
 /**
- * Determines if code should be auto-wrapped with `return await (...)`.
- * Returns true for single expression statements that aren't assignments.
+ * Parse code and check if it's a single expression that should be auto-returned.
+ * Returns the exact expression source (without trailing semicolon) using AST
+ * node offsets, or null if the code should not be auto-wrapped. See #58.
  */
-export function shouldAutoReturn(code: string): boolean {
+export function getAutoReturnExpression(code: string): string | null {
   try {
     const ast = acorn.parse(code, {
       ecmaVersion: 'latest',
@@ -79,19 +84,19 @@ export function shouldAutoReturn(code: string): boolean {
 
     // Must be exactly one statement
     if (ast.body.length !== 1) {
-      return false
+      return null
     }
 
     const stmt = ast.body[0]
 
     // If it's already a return statement, don't auto-wrap
     if (stmt.type === 'ReturnStatement') {
-      return false
+      return null
     }
 
     // Must be an ExpressionStatement
     if (stmt.type !== 'ExpressionStatement') {
-      return false
+      return null
     }
 
     // Don't auto-return side-effect expressions
@@ -101,24 +106,44 @@ export function shouldAutoReturn(code: string): boolean {
       expr.type === 'UpdateExpression' ||
       (expr.type === 'UnaryExpression' && (expr as acorn.UnaryExpression).operator === 'delete')
     ) {
-      return false
+      return null
     }
 
     // Don't auto-return sequence expressions that contain assignments
     if (expr.type === 'SequenceExpression') {
       const hasAssignment = expr.expressions.some((e: acorn.Expression) => e.type === 'AssignmentExpression')
       if (hasAssignment) {
-        return false
+        return null
       }
     }
 
-    return true
+    // Use the expression node's start/end offsets to extract just the expression
+    // source, excluding any trailing semicolon. This is more robust than regex.
+    return code.slice(expr.start, expr.end)
   } catch {
     // Parse failed, don't auto-return
-    return false
+    return null
   }
 }
 
+/** Backward-compatible helper: returns true if code should be auto-wrapped. */
+export function shouldAutoReturn(code: string): boolean {
+  return getAutoReturnExpression(code) !== null
+}
+
+/**
+ * Wraps user code in an async IIFE for vm execution.
+ * Uses AST node offsets to extract the expression without trailing semicolons,
+ * avoiding SyntaxError when embedding inside `return await (...)`. See #58.
+ */
+export function wrapCode(code: string): string {
+  const expr = getAutoReturnExpression(code)
+  if (expr !== null) {
+    return `(async () => { return await (${expr}) })()`
+  }
+  return `(async () => { ${code} })()`
+}
+
 const EXTENSION_NOT_CONNECTED_ERROR = `The Playwriter Chrome extension is not connected. Make sure you have:
 1. Installed the extension: https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe
 2. Clicked the extension icon on a tab to enable it (or refreshed the page if just installed)`
@@ -173,6 +198,15 @@ export interface ExecuteResult {
   isError: boolean
 }
 
+interface WarningEvent {
+  id: number
+  message: string
+}
+
+interface WarningScope {
+  cursor: number
+}
+
 export interface ExecutorLogger {
   log(...args: any[]): void
   error(...args: any[]): void
@@ -217,8 +251,20 @@ export class PlaywrightExecutor {
 
   private userState: Record<string, any> = {}
   private browserLogs: Map<string, string[]> = new Map()
-  private lastSnapshots: WeakMap<Page, string> = new WeakMap()
+  private lastSnapshots: WeakMap<Page, Map<string, string>> = new WeakMap()
   private lastRefToLocator: WeakMap<Page, Map<string, string>> = new WeakMap()
+  private warningEvents: WarningEvent[] = []
+  private nextWarningEventId = 0
+  private lastDeliveredWarningEventId = 0
+
+  // Recording timestamp tracking: when recording is active, each execute()
+  // call pushes {start, end} (seconds relative to recordingStartedAt).
+  // Returned by stopRecording() so the model can speed up idle sections.
+  private recordingStartedAt: number | null = null
+  private executionTimestamps: Array<{ start: number; end: number }> = []
+  private activeWarningScopes = new Set<WarningScope>()
+  private pagesWithListeners = new WeakSet<Page>()
+  private suppressPageCloseWarnings = false
 
   private scopedFs: ScopedFS
   private sandboxedRequire: NodeRequire
@@ -273,16 +319,6 @@ export class PlaywrightExecutor {
     options.deviceScaleFactor = 2
   }
 
-  private async preserveSystemColorScheme(context: BrowserContext): Promise<void> {
-    const options = (context as any)._options
-    if (!options) {
-      return
-    }
-    options.colorScheme = 'no-override'
-    options.reducedMotion = 'no-override'
-    options.forcedColors = 'no-override'
-  }
-
   private clearUserState() {
     Object.keys(this.userState).forEach((key) => delete this.userState[key])
   }
@@ -294,6 +330,49 @@ export class PlaywrightExecutor {
     this.context = null
   }
 
+  private enqueueWarning(message: string) {
+    this.nextWarningEventId += 1
+    this.warningEvents.push({ id: this.nextWarningEventId, message })
+  }
+
+  private beginWarningScope(): WarningScope {
+    const scope: WarningScope = {
+      cursor: this.nextWarningEventId,
+    }
+    this.activeWarningScopes.add(scope)
+    return scope
+  }
+
+  private flushWarningsForScope(scope: WarningScope): string {
+    const relevantWarnings = this.warningEvents.filter((warning) => {
+      return warning.id > scope.cursor
+    })
+    const latestWarningId = relevantWarnings.at(-1)?.id
+    if (latestWarningId && latestWarningId > this.lastDeliveredWarningEventId) {
+      this.lastDeliveredWarningEventId = latestWarningId
+    }
+
+    this.activeWarningScopes.delete(scope)
+    this.pruneDeliveredWarnings()
+
+    if (relevantWarnings.length === 0) {
+      return ''
+    }
+
+    return `${relevantWarnings.map((warning) => `[WARNING] ${warning.message}`).join('\n')}\n`
+  }
+
+  private pruneDeliveredWarnings() {
+    const activeCursors = [...this.activeWarningScopes].map((scope) => {
+      return scope.cursor
+    })
+    const minActiveCursor = activeCursors.length > 0 ? Math.min(...activeCursors) : this.lastDeliveredWarningEventId
+    const pruneBeforeOrAt = Math.min(this.lastDeliveredWarningEventId, minActiveCursor)
+    this.warningEvents = this.warningEvents.filter((warning) => {
+      return warning.id > pruneBeforeOrAt
+    })
+  }
+
   private warnIfExtensionOutdated(playwriterVersion: string | null) {
     if (this.hasWarnedExtensionOutdated) {
       return
@@ -305,9 +384,96 @@ export class PlaywrightExecutor {
     }
   }
 
+  private setupPageListeners(page: Page) {
+    if (this.pagesWithListeners.has(page)) {
+      return
+    }
+    this.pagesWithListeners.add(page)
+    this.setupPageCloseDetection(page)
+    this.setupPageConsoleListener(page)
+    this.setupPopupDetection(page)
+  }
+
+  private setupPageCloseDetection(page: Page) {
+    page.on('close', () => {
+      const stateKeysForClosedPage = Object.entries(this.userState)
+        .filter(([, value]) => {
+          return value === page
+        })
+        .map(([key]) => key)
+
+      const wasCurrentPage = this.page === page
+      let replacementPageInfo: { index: string; url: string } | null = null
+
+      if (wasCurrentPage) {
+        this.page = null
+        const context = this.context || page.context()
+        const openPages = context.pages().filter((candidate) => {
+          return !candidate.isClosed()
+        })
+        if (openPages.length > 0) {
+          const replacementPage = openPages[0]
+          this.page = replacementPage
+          const replacementIndex = context.pages().indexOf(replacementPage)
+          replacementPageInfo = {
+            index: replacementIndex >= 0 ? String(replacementIndex) : 'unknown',
+            url: replacementPage.url() || 'unknown',
+          }
+        }
+      }
+
+      if (!this.isConnected || this.suppressPageCloseWarnings || stateKeysForClosedPage.length === 0) {
+        return
+      }
+
+      const stateKeyLabel = stateKeysForClosedPage.map((key) => `state.${key}`).join(', ')
+      const closedUrl = page.url() || 'unknown'
+
+      if (!wasCurrentPage) {
+        this.enqueueWarning(
+          `Page closed (url: ${closedUrl}) for ${stateKeyLabel}. ` +
+            `Assign a new open page to ${stateKeyLabel} before reusing it.`,
+        )
+        return
+      }
+
+      if (replacementPageInfo) {
+        this.enqueueWarning(
+          `The current page in ${stateKeyLabel} was closed (url: ${closedUrl}). ` +
+            `Switched active page to index ${replacementPageInfo.index} (url: ${replacementPageInfo.url}). ` +
+            `Reassign ${stateKeyLabel} before using it again.`,
+        )
+        return
+      }
+
+      this.enqueueWarning(
+        `The current page in ${stateKeyLabel} was closed (url: ${closedUrl}). ` +
+          `No open pages remain. Open a tab with Playwriter enabled, then reassign ${stateKeyLabel}.`,
+      )
+    })
+  }
+
+  private setupPopupDetection(page: Page) {
+    // Listen for popup events (window.open, target=_blank) on each page.
+    // This is more reliable than checking page.opener() on context 'page' event,
+    // which also fires for context.newPage() and CDP reconnection scenarios.
+    page.on('popup', (popup) => {
+      const context = page.context()
+      const pages = context.pages()
+      const rawIndex = pages.indexOf(popup)
+      const pageIndex = rawIndex >= 0 ? String(rawIndex) : 'unknown'
+      const url = popup.url()
+      this.enqueueWarning(
+        `Popup window detected (page index ${pageIndex}, url: ${url}). ` +
+          `Popup windows cannot be controlled by playwriter. ` +
+          `Repeat the interaction in a way that does not open a popup, or navigate to the URL directly in a new tab.`,
+      )
+    })
+  }
+
   private setupPageConsoleListener(page: Page) {
     // Use targetId() if available, fallback to internal _guid for CDP connections
-    const targetId = page.targetId() || (page as any)._guid as string | undefined
+    const targetId = page.targetId() || ((page as any)._guid as string | undefined)
     if (!targetId) {
       return
     }
@@ -343,7 +509,11 @@ export class PlaywrightExecutor {
     })
   }
 
-  private async checkExtensionStatus(): Promise<{ connected: boolean; activeTargets: number; playwriterVersion: string | null }> {
+  private async checkExtensionStatus(): Promise<{
+    connected: boolean
+    activeTargets: number
+    playwriterVersion: string | null
+  }> {
     const { host = '127.0.0.1', port = 19988, extensionId } = this.cdpConfig
     const { httpBaseUrl } = parseRelayHost(host, port)
     const notConnected = { connected: false, activeTargets: 0, playwriterVersion: null }
@@ -359,10 +529,19 @@ export class PlaywrightExecutor {
           if (!fallback.ok) {
             return notConnected
           }
-          return (await fallback.json()) as { connected: boolean; activeTargets: number; playwriterVersion: string | null }
+          return (await fallback.json()) as {
+            connected: boolean
+            activeTargets: number
+            playwriterVersion: string | null
+          }
         }
-        const data = await response.json() as {
-          extensions: Array<{ extensionId: string; stableKey?: string; activeTargets: number; playwriterVersion?: string | null }>
+        const data = (await response.json()) as {
+          extensions: Array<{
+            extensionId: string
+            stableKey?: string
+            activeTargets: number
+            playwriterVersion?: string | null
+          }>
         }
         const extension = data.extensions.find((item) => {
           return item.extensionId === extensionId || item.stableKey === extensionId
@@ -370,7 +549,11 @@ export class PlaywrightExecutor {
         if (!extension) {
           return notConnected
         }
-        return { connected: true, activeTargets: extension.activeTargets, playwriterVersion: extension?.playwriterVersion || null }
+        return {
+          connected: true,
+          activeTargets: extension.activeTargets,
+          playwriterVersion: extension?.playwriterVersion || null,
+        }
       }
 
       const response = await fetch(`${httpBaseUrl}/extension/status`, {
@@ -409,14 +592,19 @@ export class PlaywrightExecutor {
     const contexts = browser.contexts()
     const context = contexts.length > 0 ? contexts[0] : await browser.newContext()
 
+    // Action timeout (click, fill, hover, etc.) is longer to tolerate slower
+    // SPA/Turbo navigations and post-click settling on real sites.
+    // Navigation timeout (goto, reload) remains separate.
+    context.setDefaultTimeout(60000)
+    context.setDefaultNavigationTimeout(10000)
+
     context.on('page', (page) => {
-      this.setupPageConsoleListener(page)
+      this.setupPageListeners(page)
     })
 
-    context.pages().forEach((p) => this.setupPageConsoleListener(p))
+    context.pages().forEach((p) => this.setupPageListeners(p))
     const page = await this.ensurePageForContext({ context, timeout: 10000 })
 
-    await this.preserveSystemColorScheme(context)
     await this.setDeviceScaleFactorForMacOS(context)
 
     this.browser = browser
@@ -455,10 +643,13 @@ export class PlaywrightExecutor {
 
   async reset(): Promise<{ page: Page; context: BrowserContext }> {
     if (this.browser) {
+      this.suppressPageCloseWarnings = true
       try {
         await this.browser.close()
       } catch (e) {
         this.logger.error('Error closing browser:', e)
+      } finally {
+        this.suppressPageCloseWarnings = false
       }
     }
 
@@ -484,14 +675,19 @@ export class PlaywrightExecutor {
     const contexts = browser.contexts()
     const context = contexts.length > 0 ? contexts[0] : await browser.newContext()
 
+    // Action timeout (click, fill, hover, etc.) is longer to tolerate slower
+    // SPA/Turbo navigations and post-click settling on real sites.
+    // Navigation timeout (goto, reload) remains separate.
+    context.setDefaultTimeout(60000)
+    context.setDefaultNavigationTimeout(10000)
+
     context.on('page', (page) => {
-      this.setupPageConsoleListener(page)
+      this.setupPageListeners(page)
     })
 
-    context.pages().forEach((p) => this.setupPageConsoleListener(p))
+    context.pages().forEach((p) => this.setupPageListeners(p))
     const page = await this.ensurePageForContext({ context, timeout: 10000 })
 
-    await this.preserveSystemColorScheme(context)
     await this.setDeviceScaleFactorForMacOS(context)
 
     this.browser = browser
@@ -504,6 +700,7 @@ export class PlaywrightExecutor {
 
   async execute(code: string, timeout = 10000): Promise<ExecuteResult> {
     const consoleLogs: Array<{ method: string; args: any[] }> = []
+    const warningScope = this.beginWarningScope()
 
     const formatConsoleLogs = (logs: Array<{ method: string; args: any[] }>, prefix = 'Console output') => {
       if (logs.length === 0) {
@@ -514,7 +711,13 @@ export class PlaywrightExecutor {
         const formattedArgs = args
           .map((arg) => {
             if (typeof arg === 'string') return arg
-            return util.inspect(arg, { depth: 4, colors: false, maxArrayLength: 100, maxStringLength: 1000, breakLength: 80 })
+            return util.inspect(arg, {
+              depth: 4,
+              colors: false,
+              maxArrayLength: 100,
+              maxStringLength: 1000,
+              breakLength: 80,
+            })
           })
           .join(' ')
         text += `[${method}] ${formattedArgs}\n`
@@ -526,7 +729,6 @@ export class PlaywrightExecutor {
       await this.ensureConnection()
       const page = await this.getCurrentPage(timeout)
       const context = this.context || page.context()
-      context.setDefaultTimeout(timeout)
 
       this.logger.log('Executing code:', code)
 
@@ -548,7 +750,7 @@ export class PlaywrightExecutor {
         },
       }
 
-      const accessibilitySnapshot = async (options: {
+      const snapshot = async (options: {
         page?: Page
         /** Optional frame to scope the snapshot (e.g. from iframe.contentFrame() or page.frames()) */
         frame?: Frame | FrameLocator
@@ -561,14 +763,25 @@ export class PlaywrightExecutor {
         /** Only include interactive elements (default: true) */
         interactiveOnly?: boolean
       }) => {
-        const { page: targetPage, frame, locator, search, showDiffSinceLastCall = true, interactiveOnly = false } = options
+        const {
+          page: targetPage,
+          frame,
+          locator,
+          search,
+          showDiffSinceLastCall = !search,
+          interactiveOnly = false,
+        } = options
         const resolvedPage = targetPage || page
         if (!resolvedPage) {
-          throw new Error('accessibilitySnapshot requires a page')
+          throw new Error('snapshot requires a page')
         }
 
         // Use new in-page implementation via getAriaSnapshot
-        const { snapshot: rawSnapshot, refs, getSelectorForRef } = await getAriaSnapshot({
+        const {
+          snapshot: rawSnapshot,
+          refs,
+          getSelectorForRef,
+        } = await getAriaSnapshot({
           page: resolvedPage,
           frame,
           locator,
@@ -586,12 +799,20 @@ export class PlaywrightExecutor {
         this.lastRefToLocator.set(resolvedPage, refToLocator)
 
         const shouldCacheSnapshot = !frame
-        const previousSnapshot = shouldCacheSnapshot ? this.lastSnapshots.get(resolvedPage) : undefined
+        // Cache keyed by locator selector so full-page and locator-scoped snapshots
+        // don't pollute each other's diff baselines
+        const snapshotKey = locator ? `locator:${locator.selector()}` : 'page'
+        let pageSnapshots = this.lastSnapshots.get(resolvedPage)
+        if (!pageSnapshots) {
+          pageSnapshots = new Map()
+          this.lastSnapshots.set(resolvedPage, pageSnapshots)
+        }
+        const previousSnapshot = shouldCacheSnapshot ? pageSnapshots.get(snapshotKey) : undefined
         if (shouldCacheSnapshot) {
-          this.lastSnapshots.set(resolvedPage, snapshotStr)
+          pageSnapshots.set(snapshotKey, snapshotStr)
         }
 
-        // Return diff if we have a previous snapshot and diff mode is enabled
+        // Diff defaults off when search is provided, but agent can explicitly enable both
         if (showDiffSinceLastCall && previousSnapshot && shouldCacheSnapshot) {
           const diffResult = createSmartDiff({
             oldContent: previousSnapshot,
@@ -680,7 +901,7 @@ export class PlaywrightExecutor {
 
         if (filterPage) {
           // Use targetId() if available, fallback to internal _guid for CDP connections
-          const targetId = filterPage.targetId() || (filterPage as any)._guid as string | undefined
+          const targetId = filterPage.targetId() || ((filterPage as any)._guid as string | undefined)
           if (!targetId) {
             throw new Error('Could not get page targetId')
           }
@@ -770,18 +991,51 @@ export class PlaywrightExecutor {
       // Recording uses chrome.tabCapture which requires activeTab permission.
       // This permission is granted when the user clicks the Playwriter extension icon on a tab.
       const relayPort = this.cdpConfig.port || 19988
-      // Recording will work on any tab where the user has clicked the icon.
-      const withRecordingDefaults = <T extends { page?: Page; sessionId?: string }, R>(
-        fn: (opts: T & { relayPort: number; sessionId?: string }) => Promise<R>,
-      ) => {
-        return async (options: T = {} as T) => {
-          const targetPage = options.page || page
-          // Use Playwright's exposed sessionId directly
-          const sessionId = options.sessionId || targetPage.sessionId() || undefined
-          return fn({ page: targetPage, sessionId, relayPort, ...options })
-        }
-      }
       const self = this
+      const recordingGhostCursor = new RecordingGhostCursorController({
+        logger: {
+          error: (...args: unknown[]) => {
+            self.logger.error(...args)
+          },
+        },
+      })
+
+      const showGhostCursor = async (options?: ({ page?: Page } & GhostCursorClientOptions)) => {
+        const targetPage = options?.page || page
+        const cursorOptions: GhostCursorClientOptions | undefined = (() => {
+          if (!options) {
+            return undefined
+          }
+
+          const { page: _ignoredPage, ...rest } = options
+          return rest
+        })()
+
+        await recordingGhostCursor.show({ page: targetPage, cursorOptions })
+      }
+
+      const hideGhostCursor = async (options?: { page?: Page }) => {
+        const targetPage = options?.page || page
+        await recordingGhostCursor.hide({ page: targetPage })
+      }
+
+      const recordingApi = createRecordingApi({
+        context,
+        defaultPage: page,
+        relayPort,
+        ghostCursorController: recordingGhostCursor,
+        onStart: () => {
+          self.recordingStartedAt = Date.now()
+          self.executionTimestamps = []
+        },
+        onFinish: () => {
+          self.recordingStartedAt = null
+          self.executionTimestamps = []
+        },
+        getExecutionTimestamps: () => {
+          return self.executionTimestamps
+        },
+      })
 
       // Ghost Browser API - creates chrome object that mirrors Ghost Browser's APIs
       // See extension/src/ghost-browser-api.d.ts for full API documentation
@@ -800,7 +1054,8 @@ export class PlaywrightExecutor {
         context,
         state: this.userState,
         console: customConsole,
-        accessibilitySnapshot,
+        snapshot,
+        accessibilitySnapshot: snapshot, // backward compat alias
         refToLocator,
         getCleanHTML,
         getPageMarkdown,
@@ -815,10 +1070,23 @@ export class PlaywrightExecutor {
         formatStylesAsText,
         getReactSource: getReactSourceFn,
         screenshotWithAccessibilityLabels: screenshotWithAccessibilityLabelsFn,
-        startRecording: withRecordingDefaults(startRecording),
-        stopRecording: withRecordingDefaults(stopRecording),
-        isRecording: withRecordingDefaults(isRecording),
-        cancelRecording: withRecordingDefaults(cancelRecording),
+        resizeImage,
+        ghostCursor: {
+          show: showGhostCursor,
+          hide: hideGhostCursor,
+        },
+        recording: {
+          start: recordingApi.start,
+          stop: recordingApi.stop,
+          isRecording: recordingApi.isRecording,
+          cancel: recordingApi.cancel,
+        },
+        // Backward-compatible aliases
+        startRecording: recordingApi.start,
+        stopRecording: recordingApi.stop,
+        isRecording: recordingApi.isRecording,
+        cancelRecording: recordingApi.cancel,
+        createDemoVideo,
         resetPlaywright: async () => {
           const { page: newPage, context: newContext } = await self.reset()
           vmContextObj.page = newPage
@@ -833,16 +1101,37 @@ export class PlaywrightExecutor {
       }
 
       const vmContext = vm.createContext(vmContextObj)
-      const autoReturn = shouldAutoReturn(code)
-      const wrappedCode = autoReturn
-        ? `(async () => { return await (${code}) })()`
+      const autoReturnExpr = getAutoReturnExpression(code)
+      const wrappedCode = autoReturnExpr !== null
+        ? `(async () => { return await (${autoReturnExpr}) })()`
         : `(async () => { ${code} })()`
-      const hasExplicitReturn = autoReturn || /\breturn\b/.test(code)
-
-      const result = await Promise.race([
-        vm.runInContext(wrappedCode, vmContext, { timeout, displayErrors: true }),
-        new Promise((_, reject) => setTimeout(() => reject(new CodeExecutionTimeoutError(timeout)), timeout)),
-      ])
+      const hasExplicitReturn = autoReturnExpr !== null || /\breturn\b/.test(code)
+
+      // Track execution timestamps relative to recording start (seconds).
+      // Used to identify idle gaps that can be sped up in demo videos.
+      // Captured before execution so we can record timing even if it throws.
+      const recordingStartSnapshot = this.recordingStartedAt
+      const execStartSec = recordingStartSnapshot !== null
+        ? (Date.now() - recordingStartSnapshot) / 1000
+        : -1
+
+      const result = await (async () => {
+        try {
+          return await Promise.race([
+            vm.runInContext(wrappedCode, vmContext, { timeout, displayErrors: true }),
+            new Promise((_, reject) => setTimeout(() => reject(new CodeExecutionTimeoutError(timeout)), timeout)),
+          ])
+        } finally {
+          // Record timestamp even on error — the execution still occupied real time
+          // that should not be sped up in the demo video.
+          // Compare against snapshot to avoid cross-session contamination if
+          // recording was stopped and restarted inside the same execute() call.
+          if (recordingStartSnapshot !== null && execStartSec >= 0 && this.recordingStartedAt === recordingStartSnapshot) {
+            const execEndSec = (Date.now() - recordingStartSnapshot) / 1000
+            this.executionTimestamps.push({ start: execStartSec, end: execEndSec })
+          }
+        }
+      })()
 
       let responseText = formatConsoleLogs(consoleLogs)
 
@@ -853,13 +1142,21 @@ export class PlaywrightExecutor {
           const formatted =
             typeof resolvedResult === 'string'
               ? resolvedResult
-              : util.inspect(resolvedResult, { depth: 4, colors: false, maxArrayLength: 100, maxStringLength: 1000, breakLength: 80 })
+              : util.inspect(resolvedResult, {
+                  depth: 4,
+                  colors: false,
+                  maxArrayLength: 100,
+                  maxStringLength: 1000,
+                  breakLength: 80,
+                })
           if (formatted.trim()) {
             responseText += `[return value] ${formatted}\n`
           }
         }
       }
 
+      responseText += this.flushWarningsForScope(warningScope)
+
       if (!responseText.trim()) {
         responseText = 'Code executed successfully (no output)'
       }
@@ -883,17 +1180,21 @@ export class PlaywrightExecutor {
       return { text: finalText, images, isError: false }
     } catch (error: any) {
       const errorStack = error.stack || error.message
-      const isTimeoutError = error instanceof CodeExecutionTimeoutError || error.name === 'TimeoutError'
+      const isTimeoutError =
+        error instanceof CodeExecutionTimeoutError || error?.name === 'TimeoutError' || error?.name === 'AbortError'
 
       this.logger.error('Error in execute:', errorStack)
 
       const logsText = formatConsoleLogs(consoleLogs, 'Console output (before error)')
+      const warningText = this.flushWarningsForScope(warningScope)
       const resetHint = isTimeoutError
         ? ''
         : '\n\n[HINT: If this is an internal Playwright error, page/browser closed, or connection issue, call reset to reconnect.]'
 
+      // timeout stacks are internal noise (Promise.race / setTimeout); only show the message
+      const errorText = isTimeoutError ? error.message : errorStack
       return {
-        text: `${logsText}\nError executing code: ${error.message}\n${errorStack}${resetHint}`,
+        text: `${logsText}${warningText}\nError executing code: ${errorText}${resetHint}`,
         images: [],
         isError: true,
       }
@@ -927,7 +1228,7 @@ export class PlaywrightExecutor {
     }
 
     const page = await context.newPage()
-    this.setupPageConsoleListener(page)
+    this.setupPageListeners(page)
     const pageUrl = page.url()
     if (pageUrl === 'about:blank') {
       return page