Merge pull request #31 from DeDuckProject/fix/lazy-playwright-import

fix: lazy-load Playwright to prevent it leaking into check-trigger bu…

Author: DeDuckProject

packages/action/dist/check.js

@@ -25800,12 +25800,6 @@ function computeChangeMagnitude(files) {
   return files.reduce((sum, f) => sum + f.additions + f.deletions, 0);
 }
 
-// ../core/dist/recorder/playwright-runner.js
-var import_test = require("@playwright/test");
-
-// ../core/dist/recorder/fallback.js
-var import_test2 = require("@playwright/test");
-
 // ../core/dist/config/loader.js
 var import_node_url = require("node:url");
 var import_node_fs = require("node:fs");
@@ -30108,6 +30102,15 @@ async function check() {
       core.setOutput("should-run", "false");
       return;
     }
+    try {
+      await octokit.rest.reactions.createForIssueComment({
+        owner,
+        repo,
+        comment_id: context2.payload.comment.id,
+        content: "eyes"
+      });
+    } catch {
+    }
     pullNumber = context2.payload.issue.number;
     eventType = "comment";
     const pr = await octokit.rest.pulls.get({ owner, repo, pull_number: pullNumber });

packages/action/dist/check.js.map

@@ -41787,7 +41787,6 @@ function buildScriptGenerationPrompt(options) {
 ## Rules
 - Navigate to the affected pages
 - Interact with new/changed UI elements (click buttons, fill forms, hover states)
-- Add \`await page.waitForTimeout(1500)\` pauses on key visual states so the recording captures them clearly
 - Use resilient selectors in priority order: text content > ARIA roles > test IDs > CSS classes
 - The script must be self-contained and immediately runnable
 - Total demo should be under ${options.maxDuration} seconds
@@ -41796,6 +41795,16 @@ function buildScriptGenerationPrompt(options) {
 - Do NOT inject code into the page via \`page.evaluate\`, \`page.addInitScript\`, or inline \`<script>\` / \`<style>\` tags. The recording infrastructure handles visual overlays \u2014 the script should not.
 - Always call \`await page.waitForLoadState('networkidle')\` after navigation
 
+## Timing
+- Keep pauses short: use \`await page.waitForTimeout(300)\` between most actions
+- Only use a longer pause (\`await page.waitForTimeout(800)\`) directly after an interaction whose visual result (animation, state change, panel opening) is the point of the demo
+- Avoid stacking multiple pauses in a row \u2014 one pause per meaningful moment is enough
+
+## Mouse movement
+- Move the mouse naturally between interactions: before clicking or hovering a target, briefly move to a nearby point first so the cursor doesn't teleport
+- Use \`await page.mouse.move(x, y)\` for a single intermediate waypoint \u2014 keep it simple, one waypoint is enough
+- Coordinates should be plausible screen positions relative to the viewport (${options.viewport.width}x${options.viewport.height})
+
 ## Context
 - Base URL: ${options.baseUrl}
 - Viewport: ${options.viewport.width}x${options.viewport.height}
@@ -41895,15 +41904,15 @@ async function generateDemoScript(client, analysis, rawDiff, baseUrl, config) {
 }
 
 // ../core/dist/recorder/playwright-runner.js
-var import_test = require("@playwright/test");
 var import_node_fs2 = require("node:fs");
 var import_node_path = require("node:path");
 async function runScriptAndRecord(options) {
   const { script, baseUrl, recording, outputDir } = options;
   if (!(0, import_node_fs2.existsSync)(outputDir)) {
     (0, import_node_fs2.mkdirSync)(outputDir, { recursive: true });
   }
-  const browser = await import_test.chromium.launch({ headless: true });
+  const { chromium } = await import("@playwright/test");
+  const browser = await chromium.launch({ headless: true });
   const startTime = Date.now();
   try {
     const context2 = await createContext(browser, recording, outputDir);
@@ -42155,14 +42164,14 @@ function scanForFfmpeg(cacheDir) {
 }
 
 // ../core/dist/recorder/fallback.js
-var import_test2 = require("@playwright/test");
 var import_node_fs4 = require("node:fs");
 var import_node_path3 = require("node:path");
 async function takeScreenshots(baseUrl, routes, recording, outputDir) {
   if (!(0, import_node_fs4.existsSync)(outputDir)) {
     (0, import_node_fs4.mkdirSync)(outputDir, { recursive: true });
   }
-  const browser = await import_test2.chromium.launch({ headless: true });
+  const { chromium } = await import("@playwright/test");
+  const browser = await chromium.launch({ headless: true });
   const screenshots = [];
   try {
     const context2 = await browser.newContext({
@@ -46444,7 +46453,7 @@ async function postSkipComment(token, options) {
 ${options.reason}
 
 ---
-*Generated by [git-glimpse](https://github.com/git-glimpse/git-glimpse)*`;
+*Generated by [git-glimpse](https://github.com/DeDuckProject/git-glimpse)*`;
   const existing = await findExistingComment(octokit, options);
   if (existing) {
     const response2 = await octokit.rest.issues.updateComment({
@@ -46498,13 +46507,16 @@ function buildCommentBody(options) {
   const { analysis, recordingUrl, screenshots, script, rerunUrl } = options;
   const changedFilesList = analysis.changedFiles.slice(0, 5).map((f2) => `\`${f2}\``).join(", ");
   const moreFiles = analysis.changedFiles.length > 5 ? ` (+${analysis.changedFiles.length - 5} more)` : "";
-  const mediaSection = recordingUrl ? `![Demo](${recordingUrl})` : screenshots && screenshots.length > 0 ? screenshots.map((s2, i2) => `![Screenshot ${i2 + 1}](${s2})`).join("\n") : "_No recording available._";
+  const mediaSection = recordingUrl ? `![Demo](${recordingUrl})
+
+[\u{1F4F1} Can't see the preview? Open it directly](${recordingUrl})` : screenshots && screenshots.length > 0 ? screenshots.map((s2, i2) => `![Screenshot ${i2 + 1}](${s2})
+
+[\u{1F4F1} Can't see screenshot ${i2 + 1}? Open it directly](${s2})`).join("\n\n") : "_No recording available._";
   const rerunSection = rerunUrl ? `
 
 [\u21BA Re-run demo](${rerunUrl})` : "";
-  const logoUrl = "https://raw.githubusercontent.com/DeDuckProject/git-glimpse/main/assets/logo_square_small.png";
   return `${COMMENT_MARKER}
-## <img src="${logoUrl}" width="40" height="40" align="absmiddle" alt="git-glimpse logo" /> UI Demo Preview
+## \u{1F9D0} UI Demo Preview
 
 **Changes detected in**: ${changedFilesList}${moreFiles}
 
@@ -46521,7 +46533,9 @@ ${script}
 </details>
 
 ---
-*Generated by [git-glimpse](https://github.com/git-glimpse/git-glimpse)${rerunSection}*`;
+*Generated by [git-glimpse](https://github.com/DeDuckProject/git-glimpse)${rerunSection}*
+
+<img src="https://raw.githubusercontent.com/DeDuckProject/git-glimpse/main/assets/logo_square_small.png" width="90" height="90" alt="git-glimpse logo" />`;
 }
 
 // ../core/dist/publisher/storage.js
@@ -46688,6 +46702,19 @@ async function run() {
   let headSha;
   let eventType;
   let command = null;
+  let commentId = null;
+  const addCommentReaction = async (content) => {
+    if (commentId === null) return;
+    try {
+      await octokit.rest.reactions.createForIssueComment({
+        owner,
+        repo,
+        comment_id: commentId,
+        content
+      });
+    } catch {
+    }
+  };
   if (eventName === "issue_comment") {
     if (!context2.payload.issue?.pull_request) {
       core.info("Comment is on an issue, not a PR. Skipping.");
@@ -46700,16 +46727,8 @@ async function run() {
       return;
     }
     pullNumber = context2.payload.issue.number;
+    commentId = context2.payload.comment.id;
     eventType = "comment";
-    try {
-      await octokit.rest.reactions.createForIssueComment({
-        owner,
-        repo,
-        comment_id: context2.payload.comment.id,
-        content: "eyes"
-      });
-    } catch {
-    }
     const pr2 = await octokit.rest.pulls.get({ owner, repo, pull_number: pullNumber });
     baseSha = pr2.data.base.sha;
     headSha = pr2.data.head.sha;
@@ -46798,6 +46817,10 @@ ${result.errors.join("\n")}`);
     core.info(`Demo comment posted: ${comment.url}`);
     core.setOutput("comment-url", comment.url);
     core.setOutput("success", String(result.success));
+    await addCommentReaction("hooray");
+  } catch (err) {
+    await addCommentReaction("confused");
+    throw err;
   } finally {
     appProcess?.kill();
   }

packages/action/dist/index.js

@@ -1,4 +1,3 @@
-import { chromium } from '@playwright/test';
 import { mkdirSync, existsSync } from 'node:fs';
 import { join } from 'node:path';
 import type { RecordingConfig } from '../config/schema.js';
@@ -18,6 +17,7 @@ export async function takeScreenshots(
     mkdirSync(outputDir, { recursive: true });
   }
 
+  const { chromium } = await import('@playwright/test');
   const browser = await chromium.launch({ headless: true });
   const screenshots: string[] = [];
 

packages/action/dist/index.js.map

@@ -1,4 +1,4 @@
-import { chromium, type Browser, type BrowserContext, type Page } from '@playwright/test';
+import type { Browser, BrowserContext, Page } from '@playwright/test';
 import { existsSync, mkdirSync } from 'node:fs';
 import { join } from 'node:path';
 import type { RecordingConfig } from '../config/schema.js';
@@ -22,6 +22,7 @@ export async function runScriptAndRecord(options: RunScriptOptions): Promise<Rec
     mkdirSync(outputDir, { recursive: true });
   }
 
+  const { chromium } = await import('@playwright/test');
   const browser = await chromium.launch({ headless: true });
   const startTime = Date.now();