Add GitGlimpse workflow for automated demo recording

[DeDuckProject]

Summary

This PR adds automated demo recording capabilities to the repository using GitGlimpse, a tool that generates visual recordings of application interactions. The implementation includes GitHub Actions workflows and configuration to automatically record demos on pull requests and via comment commands.

Key Changes

• GitHub Actions Workflows:

  • git-glimpse.yml: Main workflow that triggers on pull requests and /glimpse comments, sets up the environment (Node.js, FFmpeg, Playwright), and runs the GitGlimpse action with appropriate permissions and error handling
  • git-glimpse-ack.yml: Acknowledgment workflow that reacts with an "eyes" emoji when a /glimpse command is detected on a PR comment

• GitGlimpse Configuration (git-glimpse.config.ts):

  • Configured to start the development server via npm run dev
  • Set to wait for application readiness at http://localhost:5173/epp-demo/
  • Recording settings: GIF format, 30-second max duration, 1280x720 viewport

Implementation Details

• The main workflow runs on PR open/sync events and on /glimpse comments on PRs
• Requires ANTHROPIC_API_KEY and GITHUB_TOKEN secrets for operation
• Includes success/failure reactions on comment-triggered runs for user feedback
• Proper checkout configuration handles both PR and comment-triggered scenarios with appropriate ref resolution

https://claude.ai/code/session_01L74tc3msNfg2KcEuUef4Wf

[github-actions]

🧐 UI Demo Preview

Changes detected in: .github/workflows/git-glimpse-ack.yml, .github/workflows/git-glimpse.yml, git-glimpse.config.ts

What changed: This change adds GitGlimpse CI automation — a GitHub Actions workflow that automatically records a demo video of UI changes when a pull request is opened or when '/glimpse' is commented on a PR. No visible UI changes were made; this is purely infrastructure for automated demo generation.

📱 Can't see the preview? Open it directly

Demo script (auto-generated)

import type { Page } from '@playwright/test';

export async function demo(page: Page): Promise<void> {
  await page.setViewportSize({ width: 1280, height: 720 });

  // Navigate to home page
  await page.goto('http://localhost:5173');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(400);

  // Gently scroll down to reveal content
  await page.mouse.move(640, 360);
  await page.waitForTimeout(400);
  await page.mouse.wheel(0, 300);
  await page.waitForTimeout(400);
  await page.mouse.wheel(0, 300);
  await page.waitForTimeout(400);

  // Scroll back to top
  await page.mouse.wheel(0, -600);
  await page.waitForTimeout(400);

  // Hover over navigation links if present
  const navLinks = page.locator('nav a, header a');
  const navCount = await navLinks.count();

  if (navCount > 0) {
    const firstNav = navLinks.first();
    const firstBox = await firstNav.boundingBox();
    if (firstBox) {
      await page.mouse.move(640, 360);
      await page.waitForTimeout(200);
      await page.mouse.move(firstBox.x + firstBox.width / 2, firstBox.y + firstBox.height / 2);
      await page.waitForTimeout(400);
    }
  }

  if (navCount > 1) {
    const secondNav = navLinks.nth(1);
    const secondBox = await secondNav.boundingBox();
    if (secondBox) {
      await page.mouse.move(secondBox.x + secondBox.width / 2, secondBox.y + secondBox.height / 2);
      await page.waitForTimeout(400);
    }
  }

  // Hover over any prominent buttons
  const buttons = page.locator('button, [role="button"]');
  const buttonCount = await buttons.count();
  if (buttonCount > 0) {
    const firstButton = buttons.first();
    const btnBox = await firstButton.boundingBox();
    if (btnBox) {
      await page.mouse.move(640, 400);
      await page.waitForTimeout(200);
      await page.mouse.move(btnBox.x + btnBox.width / 2, btnBox.y + btnBox.height / 2);
      await page.waitForTimeout(400);
    }
  }

  // Try navigating to a second meaningful route via nav link click
  if (navCount > 1) {
    const secondNav = navLinks.nth(1);
    const secondBox = await secondNav.boundingBox();
    if (secondBox) {
      await page.mouse.move(640, 360);
      await page.waitForTimeout(200);
      await page.mouse.move(secondBox.x + secondBox.width / 2, secondBox.y + secondBox.height / 2);
      await page.waitForTimeout(400);
      await secondNav.click();
      await page.waitForLoadState('networkidle');
      await page.waitForTimeout(400);

      // Scroll gently on this page
      await page.mouse.move(640, 360);
      await page.waitForTimeout(200);
      await page.mouse.wheel(0, 250);
      await page.waitForTimeout(400);
      await page.mouse.wheel(0, -250);
      await page.waitForTimeout(400);
    }
  }

  // Try navigating to a third route if available
  if (navCount > 2) {
    const thirdNav = navLinks.nth(2);
    const thirdBox = await thirdNav.boundingBox();
    if (thirdBox) {
      await page.mouse.move(640, 360);
      await page.waitForTimeout(200);
      await page.mouse.move(thirdBox.x + thirdBox.width / 2, thirdBox.y + thirdBox.height / 2);
      await page.waitForTimeout(400);
      await thirdNav.click();
      await page.waitForLoadState('networkidle');
      await page.waitForTimeout(400);

      await page.mouse.move(640, 360);
      await page.mouse.wheel(0, 200);
      await page.waitForTimeout(400);
      await page.mouse.wheel(0, -200);
      await page.waitForTimeout(400);
    }
  }

  // Return home to finish the tour
  await page.goto('http://localhost:5173');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(400);

  // Final gentle scroll and settle
  await page.mouse.move(640, 360);
  await page.waitForTimeout(200);
  await page.mouse.wheel(0, 150);
  await page.waitForTimeout(400);
  await page.mouse.wheel(0, -150);
  await page.waitForTimeout(400);
}

---

Generated by git-glimpse