playwright-codegen-pro-core 1.0.2 → 1.0.4

package/bundles/zip/node_modules/yazl/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "yazl",
+  "version": "2.5.1",
+  "description": "yet another zip library for node",
+  "main": "index.js",
+  "scripts": {
+    "test": "node test/test.js",
+    "test-cov": "istanbul cover test/test.js",
+    "test-travis": "istanbul cover --report lcovonly test/test.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thejoshwolfe/yazl.git"
+  },
+  "keywords": [
+    "zip",
+    "stream",
+    "archive",
+    "file"
+  ],
+  "author": "Josh Wolfe <thejoshwolfe@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/thejoshwolfe/yazl/issues"
+  },
+  "homepage": "https://github.com/thejoshwolfe/yazl",
+  "dependencies": {
+    "buffer-crc32": "~0.2.3"
+  },
+  "devDependencies": {
+    "bl": "~0.9.3",
+    "istanbul": "^0.4.5",
+    "yauzl": "~2.3.1"
+  },
+  "files": [
+    "index.js"
+  ]
+}

package/lib/cli/program.js

@@ -305,7 +305,7 @@ import_utilsBundle.program.command("cli", { hidden: true }).allowExcessArguments
   process.argv.splice(process.argv.indexOf("cli"), 1);
   (0, import_program.program)();
 });
-async function launchContext(options, extraOptions) {
+async function launchContext(options, extraOptions, extraContextOptions = {}) {
   validateOptions(options);
   const browserType = lookupBrowserType(options);
   const launchOptions = extraOptions;
@@ -314,7 +314,7 @@ async function launchContext(options, extraOptions) {
   launchOptions.handleSIGINT = false;
   const contextOptions = (
     // Copy the device descriptor since we have to compare and modify the options.
-    options.device ? { ...playwright.devices[options.device] } : {}
+    options.device ? { ...playwright.devices[options.device], ...extraContextOptions } : { ...extraContextOptions }
   );
   if (!extraOptions.headless)
     contextOptions.deviceScaleFactor = import_os.default.platform() === "darwin" ? 2 : 1;
@@ -438,10 +438,17 @@ async function open(options, url) {
 async function codegen(options, url) {
   const { target: language, output: outputFile, testIdAttribute: testIdAttributeName } = options;
   const tracesDir = import_path.default.join(import_os.default.tmpdir(), `playwright-recorder-trace-${Date.now()}`);
+  const videoDir = import_path.default.join(process.cwd(), ".playwright-session-video");
+  try {
+    import_fs.default.rmSync(videoDir, { recursive: true, force: true });
+  } catch {
+  }
   const { context, browser, launchOptions, contextOptions, closeBrowser } = await launchContext(options, {
     headless: !!process.env.PWTEST_CLI_HEADLESS,
     executablePath: process.env.PWTEST_CLI_EXECUTABLE_PATH,
     tracesDir
+  }, {
+    recordVideo: { dir: videoDir, size: { width: 1280, height: 720 } }
   });
   const donePromise = new import_utils.ManualPromise();
   maybeSetupTestHooks(browser, closeBrowser, donePromise);

package/lib/server/recorder/recorderApp.js

@@ -60,6 +60,9 @@ class RecorderApp {
     this._inspectedContext = null;
     this._scenarioName = "my scenario";
     this._throttledSessionFile = null;
+    this._screenshotDir = null;
+    this._actionScreenshots = /* @__PURE__ */ new Map();
+    this._screenshotCounter = 0;
     this._page = page;
     this._recorder = recorder;
     this._frontend = createRecorderFrontend(page);
@@ -73,8 +76,18 @@ class RecorderApp {
     };
     this._aiCodegen = !!params.aiCodegen;
     this._throttledOutputFile = params.outputFile ? new import_throttledFile.ThrottledFile(params.outputFile) : null;
-    if (this._aiCodegen)
+    if (this._aiCodegen) {
       this._throttledSessionFile = new import_throttledFile.ThrottledFile(import_path.default.join(process.cwd(), ".playwright-session.md"));
+      this._screenshotDir = import_path.default.join(process.cwd(), ".playwright-session-screenshots");
+      try {
+        import_fs.default.rmSync(this._screenshotDir, { recursive: true, force: true });
+      } catch {
+      }
+      try {
+        import_fs.default.mkdirSync(this._screenshotDir, { recursive: true });
+      } catch {
+      }
+    }
     this._primaryGeneratorId = process.env.TEST_INSPECTOR_LANGUAGE || params.language || determinePrimaryGeneratorId(params.sdkLanguage);
     this._selectedGeneratorId = this._primaryGeneratorId;
     for (const languageGenerator of (0, import_languages.languageSet)()) {
@@ -113,6 +126,7 @@ class RecorderApp {
         this._networkCapture?.dispose();
         this._networkCapture = null;
         this._recorder.close();
+        void this._finalizeVideo();
         inspectedContext.close({ reason: "Recorder window closed" }).catch(() => {
         });
         this._page.browserContext.close({ reason: "Recorder window closed" }).catch(() => {
@@ -265,6 +279,7 @@ class RecorderApp {
       this._throttledSessionFile?.flush();
       this._networkCapture?.dispose();
       this._networkCapture = null;
+      void this._finalizeVideo();
       this._page.browserContext.close({ reason: "Recorder window closed" }).catch(() => {
       });
     });
@@ -300,6 +315,27 @@ class RecorderApp {
     this._actions.push(action);
     this._networkCapture?.onActionAdded(action);
     this._updateActions("reveal");
+    void this._captureScreenshotForAction(action);
+  }
+  async _captureScreenshotForAction(action) {
+    if (!this._screenshotDir || !this._inspectedContext)
+      return;
+    const page = findPageByGuid(this._inspectedContext, action.frame.pageGuid);
+    if (!page)
+      return;
+    const index = ++this._screenshotCounter;
+    const filename = `${String(index).padStart(3, "0")}-${action.action.name}.png`;
+    const filepath = import_path.default.join(this._screenshotDir, filename);
+    try {
+      const controller = new import_progress.ProgressController();
+      await controller.run(async (progress) => {
+        const buffer = await page.screenshot(progress, { type: "png", fullPage: false });
+        await import_fs.default.promises.writeFile(filepath, buffer);
+      });
+      this._actionScreenshots.set(action, filepath);
+      this._updateActions();
+    } catch {
+    }
   }
   _onSignalAdded(signal) {
     const lastAction = this._actions.findLast((a) => a.frame.pageGuid === signal.frame.pageGuid);
@@ -364,7 +400,9 @@ class RecorderApp {
         scenarioName: this._scenarioName,
         outputFile: "tests/" + this._scenarioName.replace(/\s+/g, "-") + ".spec.ts",
         mode: "clipboard",
-        pageHasWebSockets: false
+        pageHasWebSockets: false,
+        screenshots: this._actionScreenshots,
+        videoPath: this._aiCodegen ? ".playwright-session.webm" : void 0
       });
       this._throttledSessionFile.setContent(prompt);
     }
@@ -399,7 +437,9 @@ class RecorderApp {
         scenarioName,
         outputFile,
         mode: "clipboard",
-        pageHasWebSockets: false
+        pageHasWebSockets: false,
+        screenshots: this._actionScreenshots,
+        videoPath: this._aiCodegen ? ".playwright-session.webm" : void 0
       });
       const promptFilePath = import_path.default.join(process.cwd(), ".playwright-prompt.md");
       await import_fs.default.promises.writeFile(promptFilePath, prompt, "utf-8");
@@ -414,6 +454,26 @@ class RecorderApp {
       this._emitGenerationStatus({ status: "error", message: String(error?.message ?? error), progress: 0 });
     }
   }
+  async _finalizeVideo() {
+    if (!this._aiCodegen)
+      return;
+    const videoDir = import_path.default.join(process.cwd(), ".playwright-session-video");
+    const finalPath = import_path.default.join(process.cwd(), ".playwright-session.webm");
+    for (let attempt = 0; attempt < 10; attempt++) {
+      try {
+        const files = await import_fs.default.promises.readdir(videoDir);
+        const webmFile = files.find((f) => f.endsWith(".webm"));
+        if (webmFile) {
+          await import_fs.default.promises.rename(import_path.default.join(videoDir, webmFile), finalPath);
+          await import_fs.default.promises.rm(videoDir, { recursive: true, force: true }).catch(() => {
+          });
+          return;
+        }
+      } catch {
+      }
+      await new Promise((resolve) => setTimeout(resolve, 200));
+    }
+  }
   async _runGeneration(scenarioName, outputFile) {
     if (!process.env.PW_AI_ENDPOINT) {
       await this._exportPrompt(scenarioName, outputFile);

package/lib/server/recorder/sessionPromptBuilder.js

@@ -55,6 +55,10 @@ function buildPrompt(session, options) {
       const a = ctx.action;
       const location = a.selector ? `${a.selector}` : a.url ?? "";
       sessionSection += `- ${a.name}: ${location} at t=${ctx.startTime}ms
+`;
+      const screenshot = options.screenshots?.get(ctx);
+      if (screenshot)
+        sessionSection += `  Screenshot: ${import_path.default.relative(process.cwd(), screenshot)}
 `;
       const direct = (ctx.networkEvents ?? []).filter((e) => e.bucket === "direct");
       const pageLoad = (ctx.networkEvents ?? []).filter((e) => e.bucket === "pageLoad");
@@ -92,13 +96,25 @@ function buildPrompt(session, options) {
     cleanupSection = "## Data Created During Session\nNo data was created. No cleanup needed.\n";
   }
   const wsSection = hasWebSockets ? "## WebSocket Note\nThis page uses WebSocket connections. Assert on UI state changes that reflect server pushes rather than trying to intercept WS frames.\n\n" : "";
+  const screenshotCount = options.screenshots?.size ?? 0;
+  let visualSection = "";
+  if (screenshotCount > 0 || options.videoPath) {
+    visualSection = "## Visual Context\n";
+    if (screenshotCount > 0)
+      visualSection += `Per-action screenshots: ${screenshotCount} file(s) under .playwright-session-screenshots/ \u2014 referenced inline below. Read them as visual context for each step.
+`;
+    if (options.videoPath)
+      visualSection += `Full session video: ${options.videoPath} (finalized when the recorder window is closed).
+`;
+    visualSection += "\n";
+  }
   return `# Playwright Test Generation Request
 
 ## Scenario
 Name: ${options.scenarioName}
 Target file: ${relativeOutput}
 
-## Recorded Session
+${visualSection}## Recorded Session
 ${sessionSection.trimEnd()}
 
 ${cleanupSection}

package/lib/tools/mcp/program.js

@@ -40,6 +40,14 @@ var import_browserBackend = require("../backend/browserBackend");
 var import_tools = require("../backend/tools");
 var import_log = require("./log");
 const version = require("../../../package.json").version;
+const codegenProInstructions = `This is the Playwright Codegen Pro MCP server \u2014 an AI-ready fork of the Playwright recorder.
+
+When the user mentions a "codegen session", "recording", or asks you to "write the test" for what they just recorded:
+1. Call the \`recorder_get_session\` tool to read the live recording. It returns the recorded user actions, the network requests they triggered (classified as direct API calls / page-load context / noise), request payloads and response bodies, screenshot paths, and data-cleanup hints. Secrets (passwords, tokens, credit cards) are already redacted.
+2. Generate a complete Playwright test from that context, following the "Best Practices" section embedded in the returned prompt (web-first assertions, role-based locators, waitForResponse around API-triggering clicks, afterEach cleanup for created data, no hard waits).
+3. Save the test where the prompt indicates (the target file is named in the session).
+
+The session is produced by \`playwright-codegen-pro codegen <url>\` (AI capture is always on). \`recorder_get_session\` works while recording (reads \`.playwright-session.md\`) and after the user clicks "Generate Test" (reads \`.playwright-prompt.md\`). If it reports no session, ask the user to start a codegen recording first.`;
 function decorateMCPCommand(command) {
   command.option("--allowed-hosts <hosts...>", "comma-separated list of hosts this server is allowed to serve from. Defaults to the host the server is bound to. Pass '*' to disable the host check.", import_config.commaSeparatedList).option("--allowed-origins <origins>", "semicolon-separated list of TRUSTED origins to allow the browser to request. Default is to allow all.\nImportant: *does not* serve as a security boundary and *does not* affect redirects. ", import_config.semicolonSeparatedList).option("--allow-unrestricted-file-access", "allow access to files outside of the workspace roots. Also allows unrestricted access to file:// URLs. By default access to file system is restricted to workspace root directories (or cwd if no roots are configured) only, and navigation to file:// URLs is blocked.").option("--blocked-origins <origins>", "semicolon-separated list of origins to block the browser from requesting. Blocklist is evaluated before allowlist. If used without the allowlist, requests not matching the blocklist are still allowed.\nImportant: *does not* serve as a security boundary and *does not* affect redirects.", import_config.semicolonSeparatedList).option("--block-service-workers", "block service workers").option("--browser <browser>", "browser or chrome channel to use, possible values: chrome, firefox, webkit, msedge.").option("--caps <caps>", "comma-separated list of additional capabilities to enable, possible values: vision, pdf, devtools.", import_config.commaSeparatedList).option("--cdp-endpoint <endpoint>", "CDP endpoint to connect to.").option("--cdp-header <headers...>", "CDP headers to send with the connect request, multiple can be specified.", import_config.headerParser).option("--cdp-timeout <timeout>", "timeout in milliseconds for connecting to CDP endpoint, defaults to 30000ms", import_config.numberParser).option("--codegen <lang>", 'specify the language to use for code generation, possible values: "typescript", "none". Default is "typescript".', import_config.enumParser.bind(null, "--codegen", ["none", "typescript"])).option("--config <path>", "path to the configuration file.").option("--console-level <level>", 'level of console messages to return: "error", "warning", "info", "debug". Each level includes the messages of more severe levels.', import_config.enumParser.bind(null, "--console-level", ["error", "warning", "info", "debug"])).option("--device <device>", 'device to emulate, for example: "iPhone 15"').option("--executable-path <path>", "path to the browser executable.").option("--extension", 'Connect to a running browser instance (Edge/Chrome only). Requires the "Playwright MCP Bridge" browser extension to be installed.').option("--grant-permissions <permissions...>", 'List of permissions to grant to the browser context, for example "geolocation", "clipboard-read", "clipboard-write".', import_config.commaSeparatedList).option("--headless", "run browser in headless mode, headed by default").option("--host <host>", "host to bind server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.").option("--ignore-https-errors", "ignore https errors").option("--init-page <path...>", "path to TypeScript file to evaluate on Playwright page object").option("--init-script <path...>", "path to JavaScript file to add as an initialization script. The script will be evaluated in every page before any of the page's scripts. Can be specified multiple times.").option("--isolated", "keep the browser profile in memory, do not save it to disk.").option("--image-responses <mode>", 'whether to send image responses to the client. Can be "allow" or "omit", Defaults to "allow".', import_config.enumParser.bind(null, "--image-responses", ["allow", "omit"])).option("--no-sandbox", "disable the sandbox for all process types that are normally sandboxed.").option("--output-dir <path>", "path to the directory for output files.").option("--output-mode <mode>", 'whether to save snapshots, console messages, network logs to a file or to the standard output. Can be "file" or "stdout". Default is "stdout".', import_config.enumParser.bind(null, "--output-mode", ["file", "stdout"])).option("--port <port>", "port to listen on for SSE transport.").option("--proxy-bypass <bypass>", 'comma-separated domains to bypass proxy, for example ".com,chromium.org,.domain.com"').option("--proxy-server <proxy>", 'specify proxy server, for example "http://myproxy:3128" or "socks5://myproxy:8080"').option("--sandbox", "enable the sandbox for all process types that are normally not sandboxed.").option("--save-session", "Whether to save the Playwright MCP session into the output directory.").option("--secrets <path>", "path to a file containing secrets in the dotenv format", import_config.dotenvFileLoader).option("--shared-browser-context", "reuse the same browser context between all connected HTTP clients.").option("--snapshot-mode <mode>", 'when taking snapshots for responses, specifies the mode to use. Can be "full" or "none". Default is "full".').option("--storage-state <path>", "path to the storage state file for isolated sessions.").option("--test-id-attribute <attribute>", 'specify the attribute to use for test ids, defaults to "data-testid"').option("--timeout-action <timeout>", "specify action timeout in milliseconds, defaults to 5000ms", import_config.numberParser).option("--timeout-navigation <timeout>", "specify navigation timeout in milliseconds, defaults to 60000ms", import_config.numberParser).option("--user-agent <ua string>", "specify user agent string").option("--user-data-dir <path>", "path to the user data directory. If not specified, a temporary directory will be created.").option("--viewport-size <size>", 'specify browser viewport size in pixels, for example "1280x720"', import_config.resolutionParser.bind(null, "--viewport-size")).addOption(new import_utilsBundle.ProgramOption("--vision", "Legacy option, use --caps=vision instead").hideHelp()).action(async (options) => {
     options.sandbox = options.sandbox === true ? void 0 : false;
@@ -54,9 +62,10 @@ function decorateMCPCommand(command) {
     const tools = (0, import_tools.filteredTools)(config);
     if (config.extension) {
       const serverBackendFactory = {
-        name: "Playwright w/ extension",
-        nameInConfig: "playwright-extension",
+        name: "Playwright Codegen Pro w/ extension",
+        nameInConfig: "playwright-codegen-pro-extension",
         version,
+        instructions: codegenProInstructions,
         toolSchemas: tools.map((tool) => tool.schema),
         create: async (clientInfo) => {
           const browser = await (0, import_browserFactory.createBrowser)(config, clientInfo);
@@ -73,9 +82,10 @@ function decorateMCPCommand(command) {
     let sharedBrowser;
     let clientCount = 0;
     const factory = {
-      name: "Playwright",
-      nameInConfig: "playwright",
+      name: "Playwright Codegen Pro",
+      nameInConfig: "playwright-codegen-pro",
       version,
+      instructions: codegenProInstructions,
       toolSchemas: tools.map((tool) => tool.schema),
       create: async (clientInfo) => {
         if (useSharedBrowser && clientCount === 0)

package/lib/tools/utils/mcp/server.js

@@ -70,7 +70,8 @@ function createServer(name, version, factory, runHeartbeat) {
   const server = new mcpBundle.Server({ name, version }, {
     capabilities: {
       tools: {}
-    }
+    },
+    instructions: factory.instructions
   });
   server.setRequestHandler(mcpBundle.ListToolsRequestSchema, async () => {
     serverDebug("listTools");

package/lib/vite/traceViewer/index.CzAVbF3D.js

@@ -0,0 +1,2 @@
+import{T as x,r,a as C,W as F,j as e,D as z,b as I,c as P,d as A,e as O,f as V}from"./assets/defaultSettingsView-ConrJv9G.js";const $=()=>{const[o,c]=r.useState(!1),[n,l]=r.useState(),[h,u]=r.useState(),[p,b]=r.useState(N),[f,j]=r.useState({done:0,total:0}),[k,v]=r.useState(!1),[y,m]=r.useState(null),[T,R]=r.useState(null),[U,E]=r.useState(!1),g=r.useCallback(t=>{const s=new URL(window.location.href);if(!t.length)return;const i=t.item(0),a=URL.createObjectURL(i);s.searchParams.append("trace",a);const d=s.toString();window.history.pushState({},"",d),l(a),u(i.name),v(!1),m(null)},[]);r.useEffect(()=>{const t=async s=>{var a;if(!((a=s.clipboardData)!=null&&a.files.length))return;const i=["application/zip","application/x-zip-compressed"];for(const d of s.clipboardData.files)if(!i.includes(d.type))return;s.preventDefault(),g(s.clipboardData.files)};return document.addEventListener("paste",t),()=>document.removeEventListener("paste",t)}),r.useEffect(()=>{const t=s=>{const{method:i,params:a}=s.data;if(i!=="load"||!((a==null?void 0:a.trace)instanceof Blob))return;const d=new File([a.trace],"trace.zip",{type:"application/zip"}),w=new DataTransfer;w.items.add(d),g(w.files)};return window.addEventListener("message",t),()=>window.removeEventListener("message",t)});const W=r.useCallback(t=>{t.preventDefault(),g(t.dataTransfer.files)},[g]),M=r.useCallback(t=>{t.preventDefault(),t.target.files&&g(t.target.files)},[g]);r.useEffect(()=>{const t=new URL(window.location.href).searchParams,s=t.get("trace");if(c(t.has("isServer")),s!=null&&s.startsWith("file:")){R(s||null);return}if(t.has("isServer")){const i=new URLSearchParams(window.location.search).get("ws"),a=new URL(`../${i}`,window.location.toString());a.protocol=window.location.protocol==="https:"?"wss:":"ws:";const d=new C(new F(a));d.onLoadTraceRequested(async w=>{l(w.traceUrl),v(!1),m(null)}),d.initialize({}).catch(()=>{})}else s&&!s.startsWith("blob:")&&l(s)},[]);const S=r.useCallback(async t=>{const s=new URLSearchParams;s.set("trace",t);const i=await fetch(`contexts?${s.toString()}`);if(!i.ok){const{error:w}=await i.json();return m(w),w}const a=await i.json(),d=new x(t,a);j({done:0,total:0}),m(null),b(d)},[]);r.useEffect(()=>{(async()=>{if(!n){b(N);return}const t=s=>{s.data.method==="progress"&&j(s.data.params)};try{navigator.serviceWorker.addEventListener("message",t),j({done:0,total:1});let s=await S(n);s!=null&&s.includes("please grant permission for Local Network Access")&&(await fetch(n,{method:"HEAD",headers:{"x-pw-serviceworker":"skip"}}),s=await S(n)),s&&(o||l(void 0))}finally{navigator.serviceWorker.removeEventListener("message",t)}})()},[o,n,h,S]);const D=f.done!==f.total&&f.total!==0&&!y;r.useEffect(()=>{if(D){const t=setTimeout(()=>{E(!0)},200);return()=>clearTimeout(t)}else E(!1)},[D]);const L=!!(!o&&!k&&!T&&(!n||y));return e.jsxs("div",{className:"vbox workbench-loader",onDragOver:t=>{t.preventDefault(),t.dataTransfer.types.includes("Files")&&v(!0)},children:[e.jsxs("div",{className:"hbox workbench-loader-header",...L?{inert:!0}:{},children:[e.jsx("div",{className:"logo",children:e.jsx("img",{src:"playwright-logo.svg",alt:"Playwright logo"})}),e.jsx("div",{className:"product",children:"Playwright"}),p.title&&e.jsx("div",{className:"title",children:p.title}),e.jsx("div",{className:"spacer"}),e.jsx(z,{icon:"settings-gear",title:"Settings",dialogDataTestId:"settings-toolbar-dialog",children:e.jsx(I,{location:"trace-viewer"})})]}),e.jsx(P,{model:p,inert:L}),T&&e.jsxs("div",{className:"drop-target",children:[e.jsx("div",{children:"Trace Viewer uses Service Workers to show traces. To view trace:"}),e.jsxs("div",{style:{paddingTop:20},children:[e.jsxs("div",{children:["1. Click ",e.jsx("a",{href:T,children:"here"})," to put your trace into the download shelf"]}),e.jsxs("div",{children:["2. Go to ",e.jsx("a",{href:"https://trace.playwright.dev",children:"trace.playwright.dev"})]}),e.jsx("div",{children:"3. Drop the trace from the download shelf into the page"})]})]}),e.jsx(A,{open:U,isModal:!0,className:"progress-dialog",children:e.jsxs("div",{className:"progress-content",children:[e.jsx("div",{className:"title",role:"heading","aria-level":1,children:"Loading Playwright Trace..."}),e.jsx("div",{className:"progress-wrapper",children:e.jsx("div",{className:"inner-progress",style:{width:f.total?100*f.done/f.total+"%":0}})})]})}),L&&e.jsxs("div",{className:"drop-target",children:[e.jsx("div",{className:"processing-error",role:"alert",children:y}),e.jsx("div",{className:"title",role:"heading","aria-level":1,children:"Drop Playwright Trace to load"}),e.jsx("div",{children:"or"}),e.jsx("button",{onClick:()=>{const t=document.createElement("input");t.type="file",t.click(),t.addEventListener("change",s=>M(s))},type:"button",children:"Select file"}),e.jsx("div",{className:"info",children:"Playwright Trace Viewer is a Progressive Web App, it does not send your trace anywhere, it opens it locally."}),e.jsxs("div",{className:"version",children:["Playwright v","1.0.4"]})]}),o&&!n&&e.jsx("div",{className:"drop-target",children:e.jsx("div",{className:"title",children:"Select test to see the trace"})}),k&&e.jsx("div",{className:"drop-target",onDragLeave:()=>{v(!1)},onDrop:t=>W(t),children:e.jsx("div",{className:"title",children:"Release to analyse the Playwright Trace"})})]})},N=new x("",[]),q=({traceJson:o})=>{const[c,n]=r.useState(void 0),[l,h]=r.useState(0),u=r.useRef(null);return r.useEffect(()=>(u.current&&clearTimeout(u.current),u.current=setTimeout(async()=>{try{const p=await B(o);n(p)}catch{const p=new x("",[]);n(p)}finally{h(l+1)}},500),()=>{u.current&&clearTimeout(u.current)}),[o,l]),e.jsx(P,{isLive:!0,model:c})};async function B(o){const c=new URLSearchParams;c.set("trace",o);const l=await(await fetch(`contexts?${c.toString()}`)).json();return new x(o,l)}(async()=>{const o=new URLSearchParams(window.location.search);if(O(),window.location.protocol!=="file:"){if(o.get("isUnderTest")==="true"&&await new Promise(h=>setTimeout(h,1e3)),!navigator.serviceWorker)throw new Error(`Service workers are not supported.
+Make sure to serve the Trace Viewer (${window.location}) via HTTPS or localhost.`);navigator.serviceWorker.register("sw.bundle.js"),navigator.serviceWorker.controller||await new Promise(h=>{navigator.serviceWorker.oncontrollerchange=()=>h()}),setInterval(function(){fetch("ping")},1e4)}const c=o.get("trace"),l=(c==null?void 0:c.endsWith(".json"))?e.jsx(q,{traceJson:c}):e.jsx($,{});V.createRoot(document.querySelector("#root")).render(l)})();

package/lib/vite/traceViewer/index.html

@@ -7,7 +7,7 @@
     <link rel="icon" href="./playwright-logo.svg" type="image/svg+xml">
     <link rel="manifest" href="./manifest.webmanifest">
     <title>Playwright Trace Viewer</title>
-    <script type="module" crossorigin src="./index.CNL5E5VV.js"></script>
+    <script type="module" crossorigin src="./index.CzAVbF3D.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/defaultSettingsView-ConrJv9G.js">
     <link rel="stylesheet" crossorigin href="./defaultSettingsView.B4dS75f0.css">
     <link rel="stylesheet" crossorigin href="./index.CzXZzn5A.css">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playwright-codegen-pro-core",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Core engine for playwright-codegen-pro — AI-powered Playwright codegen with network capture and MCP integration",
   "repository": {
     "type": "git",