playwriter 0.0.105 → 0.2.0

package/src/aria-snapshots/prosemirror-interactive.txt

@@ -60,4 +60,6 @@
         - role=link[name="Backers"]
         - role=link[name="Code of Conduct"]
         - role=link[name="Discuss"] >> nth=1
-        - role=link[name="Report an Issue"]
+        - role=link[name="Report an Issue"]
+  - role=button[name="Pin element — click any element to copy its Playwriter reference"]
+  - role=button[name="Close Playwriter toolbar"]

package/src/aria-snapshots/prosemirror-raw.txt

@@ -138,4 +138,7 @@
         - role=link[name="Backers"]
         - role=link[name="Code of Conduct"]
         - role=link[name="Discuss"] >> nth=1
-        - role=link[name="Report an Issue"]
+        - role=link[name="Report an Issue"]
+  - toolbar "Playwriter tools":
+    - role=button[name="Pin element — click any element to copy its Playwriter reference"]
+    - role=button[name="Close Playwriter toolbar"]

package/src/cdp-relay.ts

@@ -1755,7 +1755,7 @@ export async function startPlayWriterCDPRelayServer({
       const { ExecutorManager } = await import('./executor.js')
       // Pass config instead of URL so executor can generate unique client IDs for each connection
       executorManager = new ExecutorManager({
-        cdpConfig: { host: '127.0.0.1', port },
+        cdpConfig: { host: '127.0.0.1', port, token },
         logger: logger || { log: console.error, error: console.error },
       })
     }
@@ -1763,20 +1763,24 @@ export async function startPlayWriterCDPRelayServer({
   }
 
   // ============================================================================
-  // Security middleware for privileged HTTP routes (/cli/*, /recording/*)
+  // Security middleware for privileged HTTP routes (/cli/*, /recording/*, /mcp-log)
   //
   // CORS alone does NOT prevent cross-origin POST attacks. Browsers skip the
   // preflight for "simple" requests (POST + Content-Type: text/plain), so a
   // malicious website can fire-and-forget a POST to localhost:19988/cli/execute
   // and the code executes before CORS even enters the picture.
   //
-  // Two layers of defense:
+  // Three layers of defense:
   // 1. Sec-Fetch-Site: browsers set this forbidden header on every request.
   //    If present and not "same-origin"/"none", it's a cross-origin browser
   //    request → reject. Node.js clients don't send it → unaffected.
   // 2. Content-Type must be application/json on POST. This forces a CORS
   //    preflight as a fallback, which our CORS policy already blocks.
-  // 3. When token mode is enabled (remote access), require the token.
+  // 3. When token mode is enabled (remote access), require the token on EVERY
+  //    request, including loopback. Tunnel agents (traforo, ngrok, cloudflared)
+  //    forward public traffic from 127.0.0.1, so a loopback bypass would be
+  //    a full auth bypass. In-process callers attach the token themselves
+  //    via PLAYWRITER_TOKEN env (set by the `serve` command at startup).
   // ============================================================================
   const privilegedRouteMiddleware = async (
     c: Parameters<Parameters<typeof app.use>[1]>[0],
@@ -1801,7 +1805,14 @@ export async function startPlayWriterCDPRelayServer({
       }
     }
 
-    // When token mode is enabled (remote/serve mode), require authentication.
+    // When token mode is enabled (remote/serve mode), require authentication
+    // on EVERY request, including loopback. Earlier versions bypassed the
+    // check for 127.0.0.1/::1 to spare in-process callers, but that's unsafe:
+    // when the relay is fronted by a tunnel agent (traforo, ngrok, cloudflared,
+    // etc.) running as a local process, every public request reaches the relay
+    // from 127.0.0.1 and would skip auth. In-process callers must instead
+    // attach the token themselves — they read PLAYWRITER_TOKEN from env, which
+    // the `serve` command sets at startup.
     if (token) {
       const authHeader = c.req.header('authorization') || ''
       const bearerToken = authHeader.startsWith('Bearer ') ? authHeader.slice(7) : null
@@ -1818,6 +1829,7 @@ export async function startPlayWriterCDPRelayServer({
 
   app.use('/cli/*', privilegedRouteMiddleware)
   app.use('/recording/*', privilegedRouteMiddleware)
+  app.use('/mcp-log', privilegedRouteMiddleware)
 
   app.post('/cli/execute', async (c) => {
     try {

package/src/cli-help.test.ts

@@ -0,0 +1,63 @@
+// Verifies CLI help stays runnable without loading browser-start-only dependencies.
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { execFile } from 'node:child_process'
+import { promisify } from 'node:util'
+import { describe, expect, test } from 'vitest'
+
+const execFileAsync = promisify(execFile)
+const currentDir = path.dirname(fileURLToPath(import.meta.url))
+const playwriterDir = path.resolve(currentDir, '..')
+const viteNodeBinary = path.join(
+  playwriterDir,
+  'node_modules',
+  '.bin',
+  process.platform === 'win32' ? 'vite-node.cmd' : 'vite-node',
+)
+
+async function runCli(args: string[]): Promise<{ stdout: string; stderr: string }> {
+  return execFileAsync(viteNodeBinary, ['src/cli.ts', ...args], {
+    cwd: playwriterDir,
+    env: process.env,
+  })
+}
+
+describe('playwriter cli help', () => {
+  test('renders root help without crashing', async () => {
+    const { stdout, stderr } = await runCli(['--help'])
+
+    expect(stdout).toContain('playwriter')
+    expect(stdout).toContain('serve')
+    expect(stderr).toBe('')
+  }, 30000)
+
+  test('renders serve help without crashing', async () => {
+    const { stdout, stderr } = await runCli(['serve', '--help'])
+
+    expect(stdout).toContain('Start the relay server on this machine')
+    expect(stdout).toContain('--replace')
+    expect(stderr).toBe('')
+  }, 30000)
+
+  test('unknown command exits with code 1', async () => {
+    try {
+      await runCli(['run'])
+      expect.unreachable('should have thrown')
+    } catch (error: any) {
+      expect(error.code).toBe(1)
+      expect(error.stderr).toContain('Unknown command: run')
+      expect(error.stderr).toContain('playwriter --help')
+    }
+  }, 30000)
+
+  test('unknown subcommand exits with code 1', async () => {
+    try {
+      await runCli(['session', 'nonexistent'])
+      expect.unreachable('should have thrown')
+    } catch (error: any) {
+      expect(error.code).toBe(1)
+      expect(error.stdout).toContain('Unknown command: session nonexistent')
+      expect(error.stdout).toContain('session new')
+    }
+  }, 30000)
+})

package/src/cli.ts

@@ -7,13 +7,6 @@ import { fileURLToPath } from 'node:url'
 import { goke } from 'goke'
 import { z } from 'zod'
 import pc from 'picocolors'
-import {
-  getBrowserLaunchArgs,
-  getDefaultBrowserUserDataDir,
-  startBrowserProcess,
-} from './browser-launch.js'
-import { resolveBrowserExecutablePath, shouldUseHeadlessByDefault } from './browser-config.js'
-import { getBundledExtensionPath } from './package-paths.js'
 
 // Prevent Buffers from dumping hex bytes in util.inspect output.
 Buffer.prototype[util.inspect.custom] = function () {
@@ -52,6 +45,14 @@ cli
       }
 
       try {
+        // Avoid loading playwright-core during generic CLI startup/help. This command
+        // is the only path that needs browser discovery and bundled extension launch.
+        const [{ getBrowserLaunchArgs, getDefaultBrowserUserDataDir, startBrowserProcess }, { resolveBrowserExecutablePath, shouldUseHeadlessByDefault }, { getBundledExtensionPath }] = await Promise.all([
+          import('./browser-launch.js'),
+          import('./browser-config.js'),
+          import('./package-paths.js'),
+        ])
+
         await ensureRelayServer({ logger: console, env: cliRelayEnv })
 
         const browserPath = resolveBrowserExecutablePath({ browserPath: binaryPath })
@@ -104,12 +105,33 @@ cli
   .option('--token <token>', 'Authentication token (or use PLAYWRITER_TOKEN env var)')
   .option('-s, --session <name>', 'Session ID (required for -e, get one with `playwriter session new`)')
   .option('-e, --eval <code>', 'Execute JavaScript code and exit, read https://playwriter.dev/SKILL.md for usage')
+  .option('-f, --file <path>', 'Execute JavaScript from a file and exit')
   .option('--timeout [ms]', z.number().default(10000).describe('Execution timeout in milliseconds'))
   .action(async (options) => {
-    // If -e flag is provided, execute code via relay server
-    if (options.eval) {
+    if (options.eval && options.file) {
+      console.error('Error: -e and -f cannot be used together.')
+      process.exit(1)
+    }
+
+    // If -e or -f flag is provided, execute code via relay server
+    const code = (() => {
+      if (options.eval) {
+        return options.eval
+      }
+      if (options.file) {
+        const filePath = path.resolve(options.file)
+        if (!fs.existsSync(filePath)) {
+          console.error(`Error: File not found: ${filePath}`)
+          process.exit(1)
+        }
+        return fs.readFileSync(filePath, 'utf-8')
+      }
+      return null
+    })()
+
+    if (code) {
       await executeCode({
-        code: options.eval,
+        code,
         timeout: options.timeout || 10000,
         sessionId: options.session,
         host: options.host,
@@ -133,6 +155,20 @@ async function getServerUrl(host?: string): Promise<string> {
   return httpBaseUrl
 }
 
+// Centralized header builder so every CLI subcommand sends the token consistently.
+// Falls back to PLAYWRITER_TOKEN env var when --token is not provided.
+function buildAuthHeaders({ token, json }: { token?: string; json?: boolean }): Record<string, string> {
+  const headers: Record<string, string> = {}
+  if (json) {
+    headers['Content-Type'] = 'application/json'
+  }
+  const effectiveToken = token || process.env.PLAYWRITER_TOKEN
+  if (effectiveToken) {
+    headers['Authorization'] = `Bearer ${effectiveToken}`
+  }
+  return headers
+}
+
 async function fetchExtensionsStatus(host?: string): Promise<ExtensionStatus[]> {
   try {
     const serverUrl = await getServerUrl(host)
@@ -224,12 +260,7 @@ async function executeCode(options: {
   try {
     const response = await fetch(executeUrl, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        ...(token || process.env.PLAYWRITER_TOKEN
-          ? { Authorization: `Bearer ${token || process.env.PLAYWRITER_TOKEN}` }
-          : {}),
-      },
+      headers: buildAuthHeaders({ token, json: true }),
       body: JSON.stringify({ sessionId, code, timeout, cwd }),
     })
 
@@ -320,11 +351,16 @@ interface BrowserOption {
 cli
   .command('session new', 'Create a new session and print the session ID')
   .option('--host <host>', 'Remote relay server host')
+  .option('--token <token>', 'Authentication token (or use PLAYWRITER_TOKEN env var)')
   .option('--browser <key>', 'Browser key when multiple browsers are available')
   .option('--direct [endpoint]', 'Use direct CDP connection without the extension. Enable debugging first at chrome://inspect/#remote-debugging or launch Chrome with --remote-debugging-port=9222. Auto-discovers instances or accepts an explicit ws:// endpoint')
   .action(async (options) => {
     const isLocal = !options.host && !process.env.PLAYWRITER_HOST
-    const directEndpoint = typeof options.direct === 'string' ? options.direct : null
+    // goke 6.6: optional-value flags are string | undefined
+    //   `--direct ws://...` → 'ws://...' (explicit endpoint)
+    //   `--direct`          → ''          (bare flag, auto-discover)
+    //   (omitted)           → undefined   (don't use direct CDP)
+    const directEndpoint = options.direct || null
 
     // If --direct with explicit endpoint, resolve it (handles host:port → ws://) then skip discovery
     if (directEndpoint) {
@@ -337,14 +373,14 @@ cli
       }
       await ensureRelayForSessionCreation(isLocal)
       const serverUrl = await getServerUrl(options.host)
-      const result = await createDirectSession({ serverUrl, cdpEndpoint })
+      const result = await createDirectSession({ serverUrl, cdpEndpoint, token: options.token })
       console.log(`Session ${result.id} created (direct CDP). Use with: playwriter -s ${result.id} -e "..."`)
       console.log(pc.dim('NOTE: Recording unavailable in direct CDP mode.'))
       return
     }
 
     // If --direct with no endpoint, discover Chrome instances
-    if (options.direct === true) {
+    if (options.direct === '') {
       if (!isLocal) {
         console.error('Error: --direct auto-discovery only works locally.')
         console.error('For remote relay, pass an explicit endpoint reachable from the relay host:')
@@ -367,7 +403,7 @@ cli
       if (instances.length === 1 && !options.browser) {
         const instance = instances[0]
         const serverUrl = await getServerUrl(options.host)
-        const result = await createDirectSession({ serverUrl, cdpEndpoint: instance.wsUrl, browser: instance.browser, profiles: instance.profiles })
+        const result = await createDirectSession({ serverUrl, cdpEndpoint: instance.wsUrl, browser: instance.browser, profiles: instance.profiles, token: options.token })
         const profileLabel = formatInstanceProfiles(instance)
         console.log(
           `Session ${result.id} created (direct CDP, ${instance.browser}${profileLabel}). Use with: playwriter -s ${result.id} -e "..."`,
@@ -391,7 +427,7 @@ cli
           process.exit(1)
         }
         const serverUrl = await getServerUrl(options.host)
-        const result = await createDirectSession({ serverUrl, cdpEndpoint: selected.wsUrl!, browser: selected.browser, profiles: selected.profiles })
+        const result = await createDirectSession({ serverUrl, cdpEndpoint: selected.wsUrl!, browser: selected.browser, profiles: selected.profiles, token: options.token })
         console.log(`Session ${result.id} created (direct CDP). Use with: playwriter -s ${result.id} -e "..."`)
         console.log(pc.dim('NOTE: Recording unavailable in direct CDP mode.'))
         return
@@ -452,7 +488,7 @@ cli
         const cwd = process.cwd()
         const response = await fetch(`${serverUrl}/cli/session/new`, {
           method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
+          headers: buildAuthHeaders({ token: options.token, json: true }),
           body: JSON.stringify({ extensionId, cwd }),
         })
         if (!response.ok) {
@@ -504,14 +540,14 @@ cli
       try {
         const serverUrl = await getServerUrl(options.host)
         if (selected.type === 'direct') {
-          const result = await createDirectSession({ serverUrl, cdpEndpoint: selected.wsUrl!, browser: selected.browser, profiles: selected.profiles })
+          const result = await createDirectSession({ serverUrl, cdpEndpoint: selected.wsUrl!, browser: selected.browser, profiles: selected.profiles, token: options.token })
           console.log(`Session ${result.id} created (direct CDP). Use with: playwriter -s ${result.id} -e "..."`)
           console.log(pc.dim('NOTE: Recording unavailable in direct CDP mode.'))
         } else {
           const cwd = process.cwd()
           const response = await fetch(`${serverUrl}/cli/session/new`, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
+            headers: buildAuthHeaders({ token: options.token, json: true }),
             body: JSON.stringify({ extensionId: selected.extensionId, cwd }),
           })
           if (!response.ok) {
@@ -547,16 +583,18 @@ async function createDirectSession({
   cdpEndpoint,
   browser,
   profiles,
+  token,
 }: {
   serverUrl: string
   cdpEndpoint: string
   browser?: string
   profiles?: Array<{ name: string; email: string }>
+  token?: string
 }): Promise<{ id: string }> {
   const cwd = process.cwd()
   const response = await fetch(`${serverUrl}/cli/session/new`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    headers: buildAuthHeaders({ token, json: true }),
     body: JSON.stringify({ cdpEndpoint, cwd, browser, profiles }),
   })
   if (!response.ok) {
@@ -617,6 +655,7 @@ function printBrowserTable(options: BrowserOption[]): void {
 cli
   .command('session list', 'List all active sessions')
   .option('--host <host>', 'Remote relay server host')
+  .option('--token <token>', 'Authentication token (or use PLAYWRITER_TOKEN env var)')
   .action(async (options) => {
     if (!options.host && !process.env.PLAYWRITER_HOST) {
       await ensureRelayServer({ logger: console, env: cliRelayEnv })
@@ -634,6 +673,7 @@ cli
 
     try {
       const response = await fetch(`${serverUrl}/cli/sessions`, {
+        headers: buildAuthHeaders({ token: options.token }),
         signal: AbortSignal.timeout(2000),
       })
       if (!response.ok) {
@@ -706,6 +746,7 @@ cli
 cli
   .command('session delete <sessionId>', 'Delete a session and clear its state')
   .option('--host <host>', 'Remote relay server host')
+  .option('--token <token>', 'Authentication token (or use PLAYWRITER_TOKEN env var)')
   .action(async (sessionId, options) => {
     const serverUrl = await getServerUrl(options.host)
 
@@ -716,7 +757,7 @@ cli
     try {
       const response = await fetch(`${serverUrl}/cli/session/delete`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: buildAuthHeaders({ token: options.token, json: true }),
         body: JSON.stringify({ sessionId }),
       })
 
@@ -736,6 +777,7 @@ cli
 cli
   .command('session reset <sessionId>', 'Reset the browser connection for a session')
   .option('--host <host>', 'Remote relay server host')
+  .option('--token <token>', 'Authentication token (or use PLAYWRITER_TOKEN env var)')
   .action(async (sessionId, options) => {
     const cwd = process.cwd()
     const serverUrl = await getServerUrl(options.host)
@@ -747,7 +789,7 @@ cli
     try {
       const response = await fetch(`${serverUrl}/cli/reset`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: buildAuthHeaders({ token: options.token, json: true }),
         body: JSON.stringify({ sessionId, cwd }),
       })
 
@@ -784,6 +826,14 @@ cli
       process.exit(1)
     }
 
+    // Expose the token to in-process callers (screen-recording.ts, etc.) so
+    // they can attach Authorization: Bearer ... when calling the relay's own
+    // privileged endpoints. Required because we no longer bypass auth for
+    // loopback — see commit history for the tunnel-agent threat model.
+    if (token) {
+      process.env.PLAYWRITER_TOKEN = token
+    }
+
     // Check if server is already running on the port
     const net = await import('node:net')
     const isPortInUse = await new Promise<boolean>((resolve) => {
@@ -867,6 +917,7 @@ cli
 cli
   .command('browser list', 'List all available browsers: extension-connected and direct CDP on port 9222')
   .option('--host <host>', z.string().describe('Remote relay server host'))
+  .option('--token <token>', 'Authentication token (or use PLAYWRITER_TOKEN env var)')
   .action(async (options) => {
     const isLocal = !options.host && !process.env.PLAYWRITER_HOST
 
@@ -928,6 +979,7 @@ cli.command('skill', 'Print the full playwriter usage instructions').action(() =
 })
 
 cli.help()
+cli.completions()
 cli.version(VERSION)
 
-cli.parse()
+await cli.parse()

package/src/executor.ts

@@ -3,7 +3,7 @@
  * Used by both MCP and CLI to execute Playwright code with persistent state.
  */
 
-import { Page, Frame, Browser, BrowserContext, chromium, Locator, FrameLocator } from '@xmorse/playwright-core'
+import { Page, Frame, Browser, BrowserContext, chromium, Locator, FrameLocator, ElementHandle } from '@xmorse/playwright-core'
 import crypto from 'node:crypto'
 import fs from 'node:fs'
 import path from 'node:path'
@@ -21,7 +21,7 @@ import { ICDPSession, getCDPSessionForPage } from './cdp-session.js'
 import { Debugger } from './debugger.js'
 import { Editor } from './editor.js'
 import { getStylesForLocator, formatStylesAsText, type StylesResult } from './styles.js'
-import { getReactSource, type ReactSourceLocation } from './react-source.js'
+import { getReactSource, getReactComponentInfo, type ReactSourceLocation } from './react-source.js'
 import { ScopedFS } from './scoped-fs.js'
 import {
   screenshotWithAccessibilityLabels,
@@ -37,7 +37,7 @@ import { getPageMarkdown, type GetPageMarkdownOptions } from './page-markdown.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'
+import { GhostCursorController } from './ghost-cursor-controller.js'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -104,14 +104,14 @@ export function getAutoReturnExpression(code: string): string | null {
     if (
       expr.type === 'AssignmentExpression' ||
       expr.type === 'UpdateExpression' ||
-      (expr.type === 'UnaryExpression' && (expr as acorn.UnaryExpression).operator === 'delete')
+      (expr.type === 'UnaryExpression' && expr.operator === 'delete')
     ) {
       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')
+      const hasAssignment = expr.expressions.some((e) => e.type === 'AssignmentExpression')
       if (hasAssignment) {
         return null
       }
@@ -312,6 +312,8 @@ export class PlaywrightExecutor {
   private sessionCwd: string | null
   private hasWarnedExtensionOutdated = false
 
+  private ghostCursorController: GhostCursorController
+
   constructor(options: ExecutorOptions) {
     this.cdpConfig = options.cdpConfig
     this.logger = options.logger || { log: console.log, error: console.error }
@@ -323,6 +325,13 @@ export class PlaywrightExecutor {
       this.sessionCwd || undefined,
     )
     this.sandboxedRequire = this.createSandboxedRequire(require)
+    this.ghostCursorController = new GhostCursorController({
+      logger: {
+        error: (...args: unknown[]) => {
+          this.logger.error(...args)
+        },
+      },
+    })
   }
 
   private createSandboxedRequire(originalRequire: NodeRequire): NodeRequire {
@@ -437,6 +446,10 @@ export class PlaywrightExecutor {
     this.setupPageCloseDetection(page)
     this.setupPageConsoleListener(page)
     this.setupNewPageLogging(page)
+    this.ghostCursorController.attachToPage({ page })
+    page.on('close', () => {
+      this.ghostCursorController.detachFromPage({ page })
+    })
   }
 
   private setupPageCloseDetection(page: Page) {
@@ -1030,6 +1043,47 @@ export class PlaywrightExecutor {
         return getReactSource({ locator: options.locator, cdp })
       }
 
+      const getReactComponentInfoFn = async (options: { locator: Locator | ElementHandle }) => {
+        const targetPage = await (async (): Promise<Page | null> => {
+          if ('page' in options.locator) {
+            return options.locator.page()
+          }
+
+          return (await options.locator.ownerFrame())?.page() ?? null
+        })()
+        if (!targetPage) {
+          throw new Error('Could not get page from locator')
+        }
+        const cdp = await getCDPSession({ page: targetPage })
+        return getReactComponentInfo({ locator: options.locator, cdp })
+      }
+
+      const inspectPinnedElement = async (pageUrl: string, elementExpression: string) => {
+        const targetPage = context.pages().find((candidate) => candidate.url() === pageUrl) || context.pages()[0]
+        if (!targetPage) {
+          throw new Error('No Playwright pages are available')
+        }
+
+        this.userState.page = targetPage
+        const handle = (await targetPage.evaluateHandle((expression) => {
+          return Function(`return (${expression})`)()
+        }, elementExpression)).asElement()
+
+        const result = await (async () => {
+          if (!handle) {
+            return { url: targetPage.url(), outerHTML: null, react: null }
+          }
+          return {
+            url: targetPage.url(),
+            outerHTML: await handle.evaluate((el) => el.outerHTML),
+            react: await getReactComponentInfoFn({ locator: handle }),
+          }
+        })()
+
+        console.log(result)
+        return result
+      }
+
       const screenshotCollector: ScreenshotResult[] = []
       // Separate collector for images produced by resizeImageForAgent() calls.
       // These get merged into result.images so the CLI can emit them via Kitty Graphics.
@@ -1061,13 +1115,7 @@ export class PlaywrightExecutor {
       // This permission is granted when the user clicks the Playwriter extension icon on a tab.
       const relayPort = this.cdpConfig.port || 19988
       const self = this
-      const recordingGhostCursor = new RecordingGhostCursorController({
-        logger: {
-          error: (...args: unknown[]) => {
-            self.logger.error(...args)
-          },
-        },
-      })
+      const ghostCursorController = this.ghostCursorController
 
       const showGhostCursor = async (options?: ({ page?: Page } & GhostCursorClientOptions)) => {
         const targetPage = options?.page || page
@@ -1080,19 +1128,19 @@ export class PlaywrightExecutor {
           return rest
         })()
 
-        await recordingGhostCursor.show({ page: targetPage, cursorOptions })
+        await ghostCursorController.show({ page: targetPage, cursorOptions })
       }
 
       const hideGhostCursor = async (options?: { page?: Page }) => {
         const targetPage = options?.page || page
-        await recordingGhostCursor.hide({ page: targetPage })
+        await ghostCursorController.hide({ page: targetPage })
       }
 
       const recordingApi = createRecordingApi({
         context,
         defaultPage: page,
         relayPort,
-        ghostCursorController: recordingGhostCursor,
+        ghostCursorController,
         onStart: () => {
           self.recordingStartedAt = Date.now()
           self.executionTimestamps = []
@@ -1139,6 +1187,8 @@ export class PlaywrightExecutor {
         getStylesForLocator: getStylesForLocatorFn,
         formatStylesAsText,
         getReactSource: getReactSourceFn,
+        getReactComponentInfo: getReactComponentInfoFn,
+        inspectPinnedElement,
         screenshotWithAccessibilityLabels: screenshotWithAccessibilityLabelsFn,
         resizeImageForAgent: resizeImageForAgentFn,
         // Backward-compatible alias for resizeImageForAgent