playwriter 0.0.16 → 0.0.21

package/src/mcp.ts

@@ -4,13 +4,16 @@ import { z } from 'zod'
 import { Page, Browser, BrowserContext, chromium } from 'playwright-core'
 import fs from 'node:fs'
 import path from 'node:path'
+import os from 'node:os'
 import { spawn } from 'node:child_process'
 import { createRequire } from 'node:module'
 import { fileURLToPath } from 'node:url'
 import vm from 'node:vm'
 import dedent from 'string-dedent'
 import { createPatch } from 'diff'
-import { getCdpUrl } from './utils.js'
+import { getCdpUrl, LOG_FILE_PATH } from './utils.js'
+import { waitForPageLoad, WaitForPageLoadOptions, WaitForPageLoadResult } from './wait-for-page-load.js'
+import { getCDPSessionForPage, CDPSession } from './cdp-session.js'
 
 const require = createRequire(import.meta.url)
 
@@ -59,6 +62,8 @@ interface VMContext {
   resetPlaywright: () => Promise<{ page: Page; context: BrowserContext }>
   getLatestLogs: (options?: { page?: Page; count?: number; search?: string | RegExp }) => Promise<string[]>
   clearAllLogs: () => void
+  waitForPageLoad: (options: WaitForPageLoadOptions) => Promise<WaitForPageLoadResult>
+  getCDPSession: (options: { page: Page }) => Promise<CDPSession>
   require: NodeRequire
   import: (specifier: string) => Promise<any>
 }
@@ -83,11 +88,48 @@ const MAX_LOGS_PER_PAGE = 5000
 // Store last accessibility snapshot per page for diff feature
 const lastSnapshots: WeakMap<Page, string> = new WeakMap()
 
+// Cache CDP sessions per page
+const cdpSessionCache: WeakMap<Page, CDPSession> = new WeakMap()
+
 const RELAY_PORT = 19988
 const NO_TABS_ERROR = `No browser tabs are connected. Please install and enable the Playwriter extension on at least one tab: https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe`
 
+async function setDeviceScaleFactorForMacOS(context: BrowserContext): Promise<void> {
+  if (os.platform() !== 'darwin') {
+    return
+  }
+  const options = (context as any)._options
+  if (!options || options.deviceScaleFactor === 2) {
+    return
+  }
+  options.deviceScaleFactor = 2
+  for (const page of context.pages()) {
+    const delegate = (page as any)._delegate
+    if (delegate?.updateEmulatedViewportSize) {
+      await delegate.updateEmulatedViewportSize().catch(() => {})
+    }
+  }
+}
+
+async function 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'
+  await Promise.all(
+    context.pages().map((page) => {
+      return page.emulateMedia({ colorScheme: null, reducedMotion: null, forcedColors: null }).catch(() => {})
+    }),
+  )
+}
+
 function isRegExp(value: any): value is RegExp {
-  return typeof value === 'object' && value !== null && typeof value.test === 'function' && typeof value.exec === 'function'
+  return (
+    typeof value === 'object' && value !== null && typeof value.test === 'function' && typeof value.exec === 'function'
+  )
 }
 
 function clearUserState() {
@@ -152,7 +194,7 @@ async function ensureRelayServer(): Promise<void> {
     }
   }
 
-  throw new Error('Failed to start CDP relay server after 5 seconds')
+  throw new Error(`Failed to start CDP relay server after 5 seconds. Check logs at: ${LOG_FILE_PATH}`)
 }
 
 async function ensureConnection(): Promise<{ browser: Browser; page: Page }> {
@@ -182,6 +224,9 @@ async function ensureConnection(): Promise<{ browser: Browser; page: Page }> {
   // Set up console listener for all existing pages
   context.pages().forEach((p) => setupPageConsoleListener(p))
 
+  await preserveSystemColorScheme(context)
+  await setDeviceScaleFactorForMacOS(context)
+
   state.browser = browser
   state.page = page
   state.context = context
@@ -195,22 +240,12 @@ async function getPageTargetId(page: Page): Promise<string> {
     throw new Error('Page is null or undefined')
   }
 
-  // Always use internal _guid for consistency and speed
   const guid = (page as any)._guid
   if (guid) {
     return guid
   }
 
-  try {
-    // Fallback to CDP if _guid is not available
-    const client = await page.context().newCDPSession(page)
-    const { targetInfo } = await client.send('Target.getTargetInfo')
-    await client.detach()
-
-    return targetInfo.targetId
-  } catch (e) {
-    throw new Error(`Could not get page identifier: ${e}`)
-  }
+  throw new Error('Could not get page identifier: _guid not available')
 }
 
 function setupPageConsoleListener(page: Page) {
@@ -227,31 +262,32 @@ function setupPageConsoleListener(page: Page) {
     browserLogs.set(targetId, [])
   }
 
-  // Clear logs on navigation/reload
   page.on('framenavigated', (frame) => {
-    // Only clear if it's the main frame navigating (page reload/navigation)
     if (frame === page.mainFrame()) {
       browserLogs.set(targetId, [])
     }
   })
 
-  // Delete logs when page is closed
   page.on('close', () => {
     browserLogs.delete(targetId)
   })
 
   page.on('console', (msg) => {
-    const logEntry = `[${msg.type()}] ${msg.text()}`
+    try {
+      let logEntry = `[${msg.type()}] ${msg.text()}`
 
-    // Get or create logs array for this page targetId
-    if (!browserLogs.has(targetId)) {
-      browserLogs.set(targetId, [])
-    }
-    const pageLogs = browserLogs.get(targetId)!
+      if (!browserLogs.has(targetId)) {
+        browserLogs.set(targetId, [])
+      }
+      const pageLogs = browserLogs.get(targetId)!
 
-    pageLogs.push(logEntry)
-    if (pageLogs.length > MAX_LOGS_PER_PAGE) {
-      pageLogs.shift()
+      pageLogs.push(logEntry)
+      if (pageLogs.length > MAX_LOGS_PER_PAGE) {
+        pageLogs.shift()
+      }
+    } catch (e) {
+      console.error('[MCP] Failed to get console message text:', e)
+      return
     }
   })
 }
@@ -268,8 +304,7 @@ async function getCurrentPage(timeout = 5000) {
 
       if (pages.length > 0) {
         const page = pages[0]
-        page.waitForEvent('load', { timeout })
-        await page.emulateMedia({ colorScheme: null })
+        await page.waitForLoadState('load', { timeout }).catch(() => {})
         return page
       }
     }
@@ -315,6 +350,9 @@ async function resetConnection(): Promise<{ browser: Browser; page: Page; contex
   // Set up console listener for all existing pages
   context.pages().forEach((p) => setupPageConsoleListener(p))
 
+  await preserveSystemColorScheme(context)
+  await setDeviceScaleFactorForMacOS(context)
+
   state.browser = browser
   state.page = page
   state.context = context
@@ -329,7 +367,9 @@ const server = new McpServer({
   version: '1.0.0',
 })
 
-const promptContent = fs.readFileSync(path.join(path.dirname(fileURLToPath(import.meta.url)), 'prompt.md'), 'utf-8')
+const promptContent =
+  fs.readFileSync(path.join(path.dirname(fileURLToPath(import.meta.url)), 'prompt.md'), 'utf-8') +
+  `\n\nfor debugging internal playwriter errors, check playwriter relay server logs at: ${LOG_FILE_PATH}`
 
 server.tool(
   'execute',
@@ -464,20 +504,19 @@ server.tool(
           throw new Error('getLocatorStringForElement: argument must be a Playwright Locator or ElementHandle')
         }
 
-        return await element.evaluate(async (el: any) => {
-          const WIN = globalThis as any
-          if (!WIN.__selectorGenerator) {
-            const module: SelectorGenerator = await import(
-              // @ts-ignore
-              'https://unpkg.com/@mizchi/selector-generator@1.50.0-next/dist/index.js'
-            )
-            WIN.__selectorGenerator = {
-              createSelectorGenerator: module.createSelectorGenerator,
-              toLocator: module.toLocator,
-            }
-          }
-          const { createSelectorGenerator, toLocator } = WIN.__selectorGenerator as SelectorGenerator
-          const generator = createSelectorGenerator(WIN)
+        const elementPage = element.page ? element.page() : page
+        const hasGenerator = await elementPage.evaluate(() => !!(globalThis as any).__selectorGenerator)
+
+        if (!hasGenerator) {
+          const currentDir = path.dirname(fileURLToPath(import.meta.url))
+          const scriptPath = path.join(currentDir, '..', 'dist', 'selector-generator.js')
+          const scriptContent = fs.readFileSync(scriptPath, 'utf-8')
+          await elementPage.addScriptTag({ content: scriptContent })
+        }
+
+        return await element.evaluate((el: any) => {
+          const { createSelectorGenerator, toLocator } = (globalThis as any).__selectorGenerator
+          const generator = createSelectorGenerator(globalThis)
           const result = generator(el)
           return toLocator(result.selector, 'javascript')
         })
@@ -516,6 +555,17 @@ server.tool(
         browserLogs.clear()
       }
 
+      const getCDPSession = async (options: { page: Page }) => {
+        const cached = cdpSessionCache.get(options.page)
+        if (cached) {
+          return cached
+        }
+        const wsUrl = getCdpUrl({ port: RELAY_PORT })
+        const session = await getCDPSessionForPage({ page: options.page, wsUrl })
+        cdpSessionCache.set(options.page, session)
+        return session
+      }
+
       let vmContextObj: VMContextWithGlobals = {
         page,
         context,
@@ -525,6 +575,8 @@ server.tool(
         getLocatorStringForElement,
         getLatestLogs,
         clearAllLogs,
+        waitForPageLoad,
+        getCDPSession,
         resetPlaywright: async () => {
           const { page: newPage, context: newContext } = await resetConnection()
 
@@ -537,6 +589,8 @@ server.tool(
             getLocatorStringForElement,
             getLatestLogs,
             clearAllLogs,
+            waitForPageLoad,
+            getCDPSession,
             resetPlaywright: vmContextObj.resetPlaywright,
             require,
             // TODO --experimental-vm-modules is needed to make import work in vm
@@ -659,13 +713,13 @@ server.tool(
   },
 )
 
-// Start the server
 async function main() {
   await ensureRelayServer()
   const transport = new StdioServerTransport()
   await server.connect(transport)
-  // console.error('Playwright MCP server running on stdio')
 }
 
-main().catch(console.error)
-
+main().catch((error) => {
+  console.error('Fatal error starting MCP server:', error)
+  process.exit(1)
+})

package/src/prompt.md

@@ -51,13 +51,16 @@ IMPORTANT! never call bringToFront unless specifically asked by the user. It is
 
 - only call `page.close()` if the user asks you so or if you previously created this page yourself with `newPage`. do not close user created pages unless asked
 - try to never sleep or run `page.waitForTimeout` unless you have to. there are better ways to wait for an element
+- use `page.waitForLoadState('load')` instead of `page.waitForEvent('load')`. `waitForEvent` waits for a future event and will timeout if the page is already loaded, while `waitForLoadState` resolves immediately if already in that state
 - never close browser or context. NEVER call `browser.close()`
+- NEVER use `page.context().newCDPSession()` or `browser.newCDPSession()` - these do not work through the playwriter relay. If you need to send raw CDP commands, use the `getCDPSession` utility function instead.
+
 
 ## always check the current page state after an action
 
 after you click a button or submit a form you ALWAYS have to then check what is the current state of the page. you cannot assume what happened after doing an action. instead run the following code to know what happened after the action:
 
-`console.log('url:', page.url()); console.log(await accessibilitySnapshot({ page }).then(x => x.slice(0, 1000)));`
+`console.log('url:', page.url()); console.log(await accessibilitySnapshot({ page }).then(x => x.split('\n').slice(0, 30).join('\n')));`
 
 if nothing happened you may need to wait before the action completes, using something like `page.waitForNavigation({timeout: 3000})` or `await page.waitForLoadState('networkidle', {timeout: 3000})`
 
@@ -81,8 +84,25 @@ you have access to some functions in addition to playwright methods:
     - `page`: (optional) filter logs by a specific page instance. Only returns logs from that page
     - `count`: (optional) limit number of logs to return. If not specified, returns all available logs
     - `search`: (optional) string or regex to filter logs. Only returns logs that match
-
-To bring a tab to front and focus it, use the standard Playwright method `await page.bringToFront()`
+- `waitForPageLoad({ page, timeout, pollInterval, minWait })`: smart network-aware page load detection. Playwright's `networkidle` waits for ALL requests to finish, which often times out on sites with analytics/ads. This function ignores those and returns when meaningful content is loaded.
+    - `page`: the page object to wait on
+    - `timeout`: (optional) max wait time in ms (default: 30000)
+    - `pollInterval`: (optional) how often to check in ms (default: 100)
+    - `minWait`: (optional) minimum wait before checking in ms (default: 500)
+    - Returns: `{ success, readyState, pendingRequests, waitTimeMs, timedOut }`
+    - Filters out: ad networks (doubleclick, googlesyndication), analytics (google-analytics, mixpanel, segment), social (facebook.net, twitter), support widgets (intercom, zendesk), and slow fonts/images
+- `getCDPSession({ page })`: creates a CDP session to send raw Chrome DevTools Protocol commands. Use this instead of `page.context().newCDPSession()` which does not work through the playwriter relay. Sessions are cached per page.
+    - `page`: the page object to create the session for
+    - Returns: `{ send(method, params?), on(event, callback), off(event, callback) }`
+    - Example: `const cdp = await getCDPSession({ page }); const metrics = await cdp.send('Page.getLayoutMetrics');`
+    - Example listening for events:
+      ```js
+      const cdp = await getCDPSession({ page });
+      await cdp.send('Debugger.enable');
+      const pausedEvent = await new Promise((resolve) => { cdp.on('Debugger.paused', resolve); });
+      console.log('Paused at:', pausedEvent.callFrames[0].location);
+      await cdp.send('Debugger.resume');
+      ```
 
 example:
 
@@ -108,14 +128,24 @@ Then you can use `page.locator(`aria-ref=${ref}`)` to get an element with a spec
 
 IMPORTANT: notice that we do not add any quotes in `aria-ref`! it MUST be called without quotes
 
-## getting selector for a locator identified by snapshot aria-ref
+## getting a stable selector for an element (getLocatorStringForElement)
+
+The `aria-ref` values from accessibility snapshots are ephemeral - they change on page reload and when components remount. Use `getLocatorStringForElement(element)` to get a stable Playwright locator string that you can reuse programmatically.
 
-in some cases you want to get a selector for a locator you just identified using `const element = page.locator('aria-ref=${ref}')`. To do so you can use `await getLocatorStringForElement(element)`. This is useful if you need to find other elements of the same type in a list for example. If you know the selector you can usually change a bit the selector to find the other elements of the same type in the list or table
+This is useful for:
+- Getting a selector you can store and reuse across page reloads
+- Finding similar elements in a list (modify the selector pattern)
+- Debugging which selector Playwright would use for an element
 
 ```js
-const loc = page.locator('aria-ref=123');
-console.log(await getLocatorStringForElement(loc)); 
-// => "getByRole('button', { name: 'Save' })" or similar
+const loc = page.locator('aria-ref=e14');
+const selector = await getLocatorStringForElement(loc);
+console.log(selector);
+// => "getByRole('button', { name: 'Save' })"
+
+// use the selector programmatically with eval:
+const stableLocator = page.getByRole('button', { name: 'Save' })
+await stableLocator.click();
 ```
 
 ## finding specific elements with snapshot

package/src/snapshots/shadcn-ui-accessibility.md

@@ -18,124 +18,127 @@ Return value:
             - /url: /charts/area
           - link "Directory" [ref=e13] [cursor=pointer]:
             - /url: /docs/directory
-          - link "Themes" [ref=e14] [cursor=pointer]:
-            - /url: /themes
-          - link "Colors" [ref=e15] [cursor=pointer]:
-            - /url: /colors
-        - generic [ref=e16]:
-          - button "Search documentation... ⌘ K" [ref=e18]:
-            - generic [ref=e19]: Search documentation...
-            - generic [ref=e21]:
-              - generic: ⌘
-              - generic: K
-          - link "100.5k" [ref=e22] [cursor=pointer]:
+          - link "Create" [ref=e14] [cursor=pointer]:
+            - /url: /create
+        - generic [ref=e15]:
+          - button "Search documentation... ⌘K" [ref=e17]:
+            - generic [ref=e18]: Search documentation...
+            - generic [ref=e19]:
+              - generic: ⌘K
+          - link "103k" [ref=e20] [cursor=pointer]:
             - /url: https://github.com/shadcn-ui/ui
             - img
-            - generic [ref=e23]: 100.5k
-          - button "Toggle theme" [ref=e24]:
+            - generic [ref=e21]: 103k
+          - button "Toggle theme" [ref=e22]:
             - img
-            - generic [ref=e25]: Toggle theme
-    - main [ref=e26]:
-      - generic [ref=e27]:
-        - generic [ref=e30]:
-          - 'link "New New Components: Field, Input Group, Item and more" [ref=e31] [cursor=pointer]':
+            - generic [ref=e23]: Toggle theme
+          - link "New Project" [ref=e24] [cursor=pointer]:
+            - /url: /create
+            - img
+            - text: New Project
+    - main [ref=e25]:
+      - generic [ref=e26]:
+        - generic [ref=e29]:
+          - link "New npx shadcn create" [ref=e30] [cursor=pointer]:
             - /url: /docs/changelog
-            - generic "New" [ref=e32]
-            - text: "New Components: Field, Input Group, Item and more"
+            - generic "New" [ref=e31]
+            - text: npx shadcn create
             - img
-          - heading "The Foundation for your Design System" [level=1] [ref=e33]
-          - paragraph [ref=e34]: A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.
-          - generic [ref=e35]:
-            - link "Get Started" [ref=e36] [cursor=pointer]:
-              - /url: /docs/installation
-            - link "View Components" [ref=e37] [cursor=pointer]:
+          - heading "The Foundation for your Design System" [level=1] [ref=e32]
+          - paragraph [ref=e33]: A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.
+          - generic [ref=e34]:
+            - link "New Project" [ref=e35] [cursor=pointer]:
+              - /url: /create
+              - img
+              - text: New Project
+            - link "View Components" [ref=e36] [cursor=pointer]:
               - /url: /docs/components
-        - generic [ref=e39]:
-          - generic [ref=e44]:
-            - link "Examples" [ref=e45] [cursor=pointer]:
+        - generic [ref=e38]:
+          - generic [ref=e43]:
+            - link "Examples" [ref=e44] [cursor=pointer]:
               - /url: /
-            - link "Dashboard" [ref=e46] [cursor=pointer]:
+            - link "Dashboard" [ref=e45] [cursor=pointer]:
               - /url: /examples/dashboard
-            - link "Tasks" [ref=e47] [cursor=pointer]:
+            - link "Tasks" [ref=e46] [cursor=pointer]:
               - /url: /examples/tasks
-            - link "Playground" [ref=e48] [cursor=pointer]:
+            - link "Playground" [ref=e47] [cursor=pointer]:
               - /url: /examples/playground
-            - link "Authentication" [ref=e49] [cursor=pointer]:
+            - link "Authentication" [ref=e48] [cursor=pointer]:
               - /url: /examples/authentication
-          - generic [ref=e50]:
-            - generic [ref=e51]: Theme
-            - combobox "Theme" [ref=e52]:
-              - generic [ref=e53]: "Theme:"
+          - generic [ref=e49]:
+            - generic [ref=e50]: Theme
+            - combobox "Theme" [ref=e51]:
+              - generic [ref=e52]: "Theme:"
               - generic: Neutral
               - img
-            - button "Copy Code" [ref=e54]:
+            - button "Copy Code" [ref=e53]:
               - img
-              - generic [ref=e55]: Copy Code
-        - generic [ref=e59]:
-          - generic [ref=e63]:
-            - group "Payment Method" [ref=e64]:
-              - generic [ref=e65]: Payment Method
-              - paragraph [ref=e66]: All transactions are secure and encrypted
-              - generic [ref=e67]:
-                - group [ref=e68]:
-                  - generic [ref=e69]: Name on Card
-                  - textbox "Name on Card" [ref=e70]:
+              - generic [ref=e54]: Copy Code
+        - generic [ref=e58]:
+          - generic [ref=e62]:
+            - group "Payment Method" [ref=e63]:
+              - generic [ref=e64]: Payment Method
+              - paragraph [ref=e65]: All transactions are secure and encrypted
+              - generic [ref=e66]:
+                - group [ref=e67]:
+                  - generic [ref=e68]: Name on Card
+                  - textbox "Name on Card" [ref=e69]:
                     - /placeholder: John Doe
-                - generic [ref=e71]:
-                  - group [ref=e72]:
-                    - generic [ref=e73]: Card Number
-                    - textbox "Card Number" [ref=e74]:
+                - generic [ref=e70]:
+                  - group [ref=e71]:
+                    - generic [ref=e72]: Card Number
+                    - textbox "Card Number" [ref=e73]:
                       - /placeholder: 1234 5678 9012 3456
-                    - paragraph [ref=e75]: Enter your 16-digit number.
-                  - group [ref=e76]:
-                    - generic [ref=e77]: CVV
-                    - textbox "CVV" [ref=e78]:
+                    - paragraph [ref=e74]: Enter your 16-digit number.
+                  - group [ref=e75]:
+                    - generic [ref=e76]: CVV
+                    - textbox "CVV" [ref=e77]:
                       - /placeholder: "123"
-                - generic [ref=e79]:
-                  - group [ref=e80]:
-                    - generic [ref=e81]: Month
-                    - combobox "Month" [ref=e82]:
+                - generic [ref=e78]:
+                  - group [ref=e79]:
+                    - generic [ref=e80]: Month
+                    - combobox "Month" [ref=e81]:
                       - generic: MM
                       - img
-                    - combobox [ref=e83]
-                  - group [ref=e84]:
-                    - generic [ref=e85]: Year
-                    - combobox "Year" [ref=e86]:
+                    - combobox [ref=e82]
+                  - group [ref=e83]:
+                    - generic [ref=e84]: Year
+                    - combobox "Year" [ref=e85]:
                       - generic: YYYY
                       - img
-                    - combobox [ref=e87]
-            - group "Billing Address" [ref=e89]:
-              - generic [ref=e90]: Billing Address
-              - paragraph [ref=e91]: The billing address associated with your payment method
-              - group [ref=e93]:
-                - checkbox "Same as shipping address" [checked] [ref=e94]:
+                    - combobox [ref=e86]
+            - group "Billing Address" [ref=e88]:
+              - generic [ref=e89]: Billing Address
+              - paragraph [ref=e90]: The billing address associated with your payment method
+              - group [ref=e92]:
+                - checkbox "Same as shipping address" [checked] [ref=e93]:
                   - generic:
                     - img
                 - checkbox [checked]
-                - generic [ref=e95]: Same as shipping address
-            - group [ref=e97]:
-              - group [ref=e99]:
-                - generic [ref=e100]: Comments
-                - textbox "Comments" [ref=e101]:
+                - generic [ref=e94]: Same as shipping address
+            - group [ref=e96]:
+              - group [ref=e98]:
+                - generic [ref=e99]: Comments
+                - textbox "Comments" [ref=e100]:
                   - /placeholder: Add any additional comments
-            - group [ref=e102]:
-              - button "Submit" [ref=e103]
-              - button "Cancel" [ref=e104]
-          - generic [ref=e105]:
-            - generic [ref=e106]:
-              - generic [ref=e107]:
-                - generic [ref=e109]:
-                  - img "@shadcn" [ref=e111]
-                  - img "@maxleiter" [ref=e113]
-                  - img "@evilrabbit" [ref=e115]
-                - generic [ref=e116]: No Team Members
-                - generic [ref=e117]: Invite your team to collaborate on this project.
-              - button "Invite Members" [ref=e119]:
+            - group [ref=e101]:
+              - button "Submit" [ref=e102]
+              - button "Cancel" [ref=e103]
+          - generic [ref=e104]:
+            - generic [ref=e105]:
+              - generic [ref=e106]:
+                - generic [ref=e108]:
+                  - img "@shadcn" [ref=e110]
+                  - img "@maxleiter" [ref=e112]
+                  - img "@evilrabbit" [ref=e114]
+                - generic [ref=e115]: No Team Members
+                - generic [ref=e116]: Invite your team to collaborate on this project.
+              - button "Invite Members" [ref=e118]:
                 - img
                 - text: Invite Members
-            - generic [ref=e120]:
-              - generic [ref=e121]:
+            - generic [ref=e119]:
+              - generic [ref=e120]:
                 - status "Loading"
-       
+         
 
 [Truncated to 6000 characters. Better manage your logs or paginate them to read the full logs]

package/src/start-relay-server.ts

@@ -1,26 +1,9 @@
 import { startPlayWriterCDPRelayServer } from './extension/cdp-relay.js'
-import fs from 'node:fs'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import util from 'node:util'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const logFilePath = path.join(__dirname, '..', 'relay-server.log')
+import { createFileLogger } from './create-logger.js'
 
 process.title = 'playwriter-ws-server'
-fs.writeFileSync(logFilePath, '')
-
-const log = (...args: any[]) => {
-  const message = args.map(arg =>
-    typeof arg === 'string' ? arg : util.inspect(arg, { depth: null, colors: false })
-  ).join(' ')
-  return fs.promises.appendFile(logFilePath, message + '\n')
-}
 
-const logger = {
-  log,
-  error: log
-}
+const logger = createFileLogger()
 
 process.on('uncaughtException', async (err) => {
   await logger.error('Uncaught Exception:', err);
@@ -41,7 +24,7 @@ export async function startServer({ port = 19988 }: { port?: number } = {}) {
   const server = await startPlayWriterCDPRelayServer({ port, logger })
 
   console.log('CDP Relay Server running. Press Ctrl+C to stop.')
-  console.log('Logs are being written to:', logFilePath)
+  console.log('Logs are being written to:', logger.logFilePath)
 
   process.on('SIGINT', () => {
     console.log('\nShutting down...')

package/src/utils.ts

@@ -1,4 +1,49 @@
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+import { xdgData } from 'xdg-basedir'
+
 export function getCdpUrl({ port = 19988, host = '127.0.0.1' }: { port?: number; host?: string } = {}) {
   const id = `${Math.random().toString(36).substring(2, 15)}_${Date.now()}`
   return `ws://${host}:${port}/cdp/${id}`
 }
+
+export function getDataDir(): string {
+  const dataDir = xdgData || path.join(os.homedir(), '.local', 'share')
+  return path.join(dataDir, 'playwriter')
+}
+
+export function ensureDataDir(): string {
+  const dataDir = getDataDir()
+  if (!fs.existsSync(dataDir)) {
+    fs.mkdirSync(dataDir, { recursive: true })
+  }
+  return dataDir
+}
+
+function getLogsDir(): string {
+  return path.join(getDataDir(), 'logs')
+}
+
+function getLogFilePath(): string {
+  if (process.env.PLAYWRITER_LOG_PATH) {
+    return process.env.PLAYWRITER_LOG_PATH
+  }
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-')
+  return path.join(getLogsDir(), `relay-server-${timestamp}.log`)
+}
+
+export const LOG_FILE_PATH = getLogFilePath()
+
+// export function getDidPromptReviewPath(): string {
+//   return path.join(getDataDir(), 'did-prompt-review')
+// }
+
+// export function hasReviewedPrompt(): boolean {
+//   return fs.existsSync(getDidPromptReviewPath())
+// }
+
+// export function markPromptReviewed(): void {
+//   ensureDataDir()
+//   fs.writeFileSync(getDidPromptReviewPath(), new Date().toISOString())
+// }