Merge pull request #5 from DeDuckProject/claude/show-mouse-clicks-playwright-e3sd3

Add mouse click visualization overlay to recordings

Author: DeDuckProject

packages/core/src/config/defaults.ts

@@ -5,6 +5,7 @@ export const DEFAULT_RECORDING: RecordingConfig = {
   format: 'gif',
   maxDuration: 30,
   deviceScaleFactor: 2,
+  showMouseClicks: true,
 };
 
 export const DEFAULT_LLM: LLMConfig = {

packages/core/src/config/schema.ts

@@ -23,6 +23,7 @@ export const RecordingConfigSchema = z.object({
   format: z.enum(['gif', 'mp4', 'webm']).default('gif'),
   maxDuration: z.number().default(30),
   deviceScaleFactor: z.number().default(2),
+  showMouseClicks: z.boolean().default(true),
 });
 
 export const LLMConfigSchema = z.object({

packages/core/src/recorder/playwright-runner.ts

@@ -56,14 +56,66 @@ async function createContext(
   recording: RecordingConfig,
   outputDir: string
 ): Promise<BrowserContext> {
-  return browser.newContext({
+  const context = await browser.newContext({
     recordVideo: {
       dir: outputDir,
       size: recording.viewport,
     },
     viewport: recording.viewport,
     deviceScaleFactor: recording.deviceScaleFactor,
   });
+
+  if (recording.showMouseClicks !== false) {
+    await context.addInitScript(buildMouseClickOverlayScript());
+  }
+
+  return context;
+}
+
+function buildMouseClickOverlayScript(): string {
+  return `(() => {
+  const style = document.createElement('style');
+  style.textContent = \`
+    .gg-cursor {
+      width: 16px; height: 16px; border-radius: 50%;
+      background: rgba(255, 80, 0, 0.85);
+      border: 2px solid white;
+      position: fixed; pointer-events: none; z-index: 999999;
+      transform: translate(-50%, -50%);
+      transition: left 30ms linear, top 30ms linear;
+      box-shadow: 0 0 4px rgba(0,0,0,0.4);
+    }
+    @keyframes gg-ripple {
+      from { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
+      to   { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
+    }
+    .gg-ripple {
+      width: 24px; height: 24px; border-radius: 50%;
+      border: 3px solid rgba(255, 80, 0, 0.9);
+      position: fixed; pointer-events: none; z-index: 999998;
+      animation: gg-ripple 500ms ease-out forwards;
+    }
+  \`;
+  document.head.appendChild(style);
+
+  const cursor = document.createElement('div');
+  cursor.className = 'gg-cursor';
+  document.body.appendChild(cursor);
+
+  document.addEventListener('mousemove', (e) => {
+    cursor.style.left = e.clientX + 'px';
+    cursor.style.top = e.clientY + 'px';
+  });
+
+  document.addEventListener('click', (e) => {
+    const ripple = document.createElement('div');
+    ripple.className = 'gg-ripple';
+    ripple.style.left = e.clientX + 'px';
+    ripple.style.top = e.clientY + 'px';
+    document.body.appendChild(ripple);
+    setTimeout(() => ripple.remove(), 500);
+  });
+})();`;
 }
 
 async function executeScript(script: string, page: Page, _baseUrl: string): Promise<void> {