Add video behavior diffing and DOM timeline comparison

MARKETING_PLAN.md

@@ -0,0 +1,235 @@
+# BehaviorDiff Marketing Plan for openClaw
+
+## Product Positioning
+
+**One-liner:** BehaviorDiff is a free, self-hosted GitHub Action that shows you what your PR *does* — not just what it *changed*.
+
+**Category:** Developer tools / Visual regression testing / Code review automation
+
+**Key differentiator:** The only open-source tool that combines video behavior diffing, DOM timeline comparison, visual regression testing, performance metrics, accessibility auditing, and network monitoring in a single GitHub Action — with zero SaaS dependencies.
+
+---
+
+## Target Market
+
+### Primary: Engineering teams using AI code generation (TAM: ~2M+ teams)
+
+**Who they are:**
+- Teams of 3-50 developers using GitHub for code review
+- Heavy users of AI coding tools (Copilot, Cursor, Claude Code, Devin, etc.)
+- Building web applications (React, Next.js, Vue, Angular, Svelte)
+- Spending increasing time reviewing AI-generated PRs they don't fully understand
+
+**Why they need BehaviorDiff:**
+- AI generates large, complex PRs that are hard to review from code diffs alone
+- Reviewers can't mentally render CSS/layout changes from a text diff
+- They need to know "did this PR break anything visible?" — not just "did the code change?"
+- They want to catch visual regressions, a11y issues, and console errors before merge
+
+**Where they spend time:**
+- GitHub, Twitter/X, Hacker News, Reddit (r/webdev, r/reactjs, r/programming)
+- Dev.to, Hashnode, YouTube (web dev channels)
+- Discord (Vercel, Next.js, React, Svelte communities)
+- LinkedIn (engineering managers, tech leads)
+
+### Secondary: Open-source maintainers overwhelmed by contributions
+
+**Who they are:**
+- Maintainers of popular UI libraries and web frameworks
+- Receiving many external contributions, can't manually test each one
+- Need automated "did this break the UI?" checks
+
+### Tertiary: QA teams looking to replace expensive SaaS tools
+
+**Who they are:**
+- Teams paying $300-2000/month for Percy, Chromatic, or Applitools
+- Want the same capabilities without the vendor lock-in or cost
+- Privacy-conscious teams that can't send screenshots to third-party servers
+
+---
+
+## Marketing Channels & Strategy
+
+### 1. GitHub / Open Source Ecosystem (Primary channel)
+
+**Strategy:** Make BehaviorDiff the obvious choice when people search for visual regression testing on GitHub.
+
+**Actions:**
+- Publish to GitHub Marketplace as a free Action
+- Add to `awesome-github-actions`, `awesome-regression-testing`, and `awesome-playwright` lists
+- Create starter templates for popular frameworks (Next.js, Vite, Create React App)
+- Add clear "Add to your repo in 2 minutes" onboarding in README
+- Engage with issues/PRs in competitor repos (BackstopJS, Lost Pixel) to offer alternatives
+
+**Content guidelines:**
+- README should lead with a screenshot of the PR comment showing a real diff
+- Include a GIF showing the video behavior diff feature (this is the differentiator)
+- Keep setup instructions to under 10 lines of YAML
+- Show a real before/after example — not just config documentation
+
+### 2. Twitter/X (Developer audience)
+
+**Strategy:** Build awareness through visual, shareable content that demonstrates the "aha moment."
+
+**Content types:**
+- Short video demos (30-60 seconds) showing: "This PR looks fine in the code diff. But watch what BehaviorDiff caught..." followed by the visual/video diff
+- Side-by-side comparison threads: "Percy charges $399/mo for this. BehaviorDiff does it for free."
+- "AI generated this PR" threads showing how BehaviorDiff catches what code review misses
+- Engagement with AI coding tool tweets (Copilot, Cursor, Claude announcements)
+
+**Content guidelines:**
+- Always include a visual (screenshot, GIF, or short video)
+- Use concrete numbers: "Caught 3 visual regressions, 2 a11y violations, 1 new console error — in 45 seconds"
+- Tag relevant accounts (@GitHub, @playwright, popular dev influencers)
+- Post 3-4 times per week, mix of demos, tips, and engagement
+- Tone: technical but accessible, no hype, let the product speak
+
+**Sample posts:**
+1. "Your AI just generated a 500-line PR. Can you spot the CSS regression in the diff? Neither could I. BehaviorDiff can. [screenshot of PR comment]"
+2. "We added video diffing to BehaviorDiff. Now you can see exactly how your PR changes user interactions — frame by frame. [GIF demo]"
+3. "Stop paying $400/mo for screenshot comparisons. BehaviorDiff runs on your own GitHub Actions runners. Free. Open source. Zero SaaS. [comparison table]"
+
+### 3. Hacker News / Reddit (Launch & thought leadership)
+
+**Strategy:** Launch with a "Show HN" post and follow up with educational content.
+
+**Launch post:**
+- Title: "Show HN: BehaviorDiff – See what your PR does, not just what it changed (free GitHub Action)"
+- Focus on the novel angle: behavioral diffing vs. visual diffing
+- Emphasize: open source, self-hosted, no vendor lock-in, AI-era code review
+- Include a direct link to a sample PR comment showing real output
+
+**Reddit strategy:**
+- r/webdev: "How we catch visual regressions in AI-generated PRs without paying for Percy"
+- r/reactjs: "Free GitHub Action for visual + video + a11y diffing on every PR"
+- r/programming: Technical deep-dive on DOM diffing algorithms
+- r/selfhosted: "Self-hosted alternative to Percy/Chromatic for visual regression testing"
+
+**Content guidelines:**
+- Be genuinely helpful, not promotional
+- Share the technical approach and architecture decisions
+- Respond to every comment promptly
+- Link to the repo, not a landing page
+
+### 4. Dev.to / Hashnode / Blog (SEO & education)
+
+**Strategy:** Own the search terms "visual regression testing GitHub Actions", "video diffing PR", "behavioral diffing".
+
+**Article series:**
+1. "Why Code Diffs Fail at Catching Visual Bugs (and What to Do Instead)" — Problem awareness
+2. "Building a Video Diffing Pipeline with Playwright" — Technical deep-dive
+3. "How to Add Visual Regression Testing to Any React App in 5 Minutes" — Tutorial
+4. "BehaviorDiff vs Percy vs Chromatic: The Open-Source Alternative" — Comparison
+5. "DOM Timeline Diffing: Catching Interaction Bugs That Screenshots Miss" — Unique feature spotlight
+
+**Content guidelines:**
+- Each article should be self-contained and useful even without using BehaviorDiff
+- Include code examples, screenshots, and real-world scenarios
+- Optimize for search: "visual regression testing github actions", "playwright visual diffing", "free alternative to percy"
+- Cross-post to Dev.to, Hashnode, and Medium for maximum reach
+- 1 article every 2 weeks
+
+### 5. YouTube / Video Content (Demos & tutorials)
+
+**Strategy:** Short, focused demo videos that show the product in action.
+
+**Video types:**
+- "BehaviorDiff in 60 Seconds" — Quick demo reel
+- "Setup Guide: Add Visual Regression Testing to Your Next.js App" — Tutorial (5 min)
+- "What Percy Won't Show You: Video Behavior Diffing" — Feature spotlight (3 min)
+- "Reviewing AI-Generated PRs with BehaviorDiff" — Use case demo (5 min)
+
+**Content guidelines:**
+- Keep videos under 5 minutes unless it's a full tutorial
+- Show real GitHub PR workflows, not synthetic demos
+- Use screen recordings with minimal editing
+- Include timestamps in description
+- Add to YouTube + embed in blog posts
+
+### 6. Discord / Community (Grassroots adoption)
+
+**Strategy:** Be helpful in communities where the target audience already hangs out.
+
+**Communities:**
+- Vercel Discord (Next.js users)
+- Svelte Discord
+- Playwright Discord
+- Reactiflux (React Discord)
+- GitHub Community forums
+
+**Approach:**
+- Answer questions about visual regression testing
+- Share BehaviorDiff when it genuinely solves someone's stated problem
+- Don't spam — build credibility first through helpful contributions
+
+---
+
+## Competitive Positioning
+
+| Feature | BehaviorDiff | Percy | Chromatic | BackstopJS |
+|---------|-------------|-------|-----------|------------|
+| Price | Free | $399+/mo | $149+/mo | Free |
+| Self-hosted | Yes | No | No | Yes |
+| Video behavior diffing | Yes | No | No | No |
+| DOM timeline diffing | Yes | No | No | No |
+| Performance metrics | Yes | No | No | No |
+| Accessibility auditing | Yes | No | No | No |
+| Console/network monitoring | Yes | No | No | No |
+| Screenshot comparison | Yes | Yes | Yes | Yes |
+| AI noise reduction | Yes (heuristic) | Yes (ML) | Yes (ML) | No |
+| Cross-browser | Chromium | All | Chromium | Chromium |
+
+**Key messages:**
+1. "Behavioral diffing, not just visual diffing" — We test what the app *does*, not just how it *looks*
+2. "Built for the AI era" — When AI writes the code, you need behavioral verification
+3. "Free forever, self-hosted" — No SaaS, no vendor lock-in, your data stays on your runners
+
+---
+
+## Content Calendar (First 8 Weeks)
+
+| Week | Channel | Content |
+|------|---------|---------|
+| 1 | GitHub | Publish to Marketplace, update README with demo GIF |
+| 1 | HN | Show HN launch post |
+| 1 | Twitter/X | Launch thread with demo video |
+| 2 | Reddit | Posts in r/webdev and r/reactjs |
+| 2 | Blog | "Why Code Diffs Fail at Catching Visual Bugs" |
+| 3 | Twitter/X | Video behavior diffing spotlight (GIF) |
+| 3 | YouTube | "BehaviorDiff in 60 Seconds" demo |
+| 4 | Blog | "How to Add Visual Regression Testing in 5 Minutes" |
+| 4 | Discord | Begin community engagement in Vercel/Playwright |
+| 5 | Twitter/X | Percy comparison thread |
+| 5 | Blog | "Building a Video Diffing Pipeline with Playwright" |
+| 6 | Reddit | Technical deep-dive in r/programming |
+| 6 | YouTube | Full setup tutorial video |
+| 7 | Blog | "BehaviorDiff vs Percy vs Chromatic" comparison |
+| 7 | Twitter/X | AI-generated PR review demo thread |
+| 8 | Blog | "DOM Timeline Diffing" feature spotlight |
+| 8 | HN | Follow-up post on adoption / lessons learned |
+
+---
+
+## Metrics to Track
+
+- GitHub stars (target: 500 in first 8 weeks)
+- GitHub Marketplace installs
+- Weekly active repos using the Action (via GitHub API)
+- Blog post views and social shares
+- Twitter/X impressions and engagement rate
+- Hacker News upvotes and comment engagement
+- Inbound GitHub issues (indicator of real usage)
+
+---
+
+## Key Messaging for openClaw Automation
+
+When generating content, always anchor on these themes:
+
+1. **The problem:** "AI writes code faster than humans can review it. You need to verify behavior, not just read diffs."
+2. **The solution:** "BehaviorDiff captures what your app does — screenshots, videos, DOM, performance, a11y, network — and shows you exactly what changed."
+3. **The differentiator:** "The only tool that diffs video behavior between branches. See how interactions change, frame by frame."
+4. **The economic angle:** "Free and self-hosted. No $400/month SaaS bills. No screenshots leaving your infrastructure."
+5. **The AI angle:** "Built for teams where AI generates more code than humans. When you can't read every line, test the behavior."
+
+Tone: Confident but not aggressive. Technical but accessible. Show, don't tell. Always include a visual.

action.yml

@@ -12,6 +12,22 @@ inputs:
     required: false
     default: ${{ github.token }}
 
+outputs:
+  report-path:
+    description: 'Path to the generated markdown report'
+  diff-json-path:
+    description: 'Path to the full diff result JSON'
+  has-regressions:
+    description: 'Whether performance regressions were detected'
+  has-visual-changes:
+    description: 'Whether visual changes were detected'
+  has-video-changes:
+    description: 'Whether video behavior differences were detected'
+  risk-level:
+    description: 'Overall risk level (low, medium, high)'
+  should-block:
+    description: 'Whether the PR should be blocked from merging'
+
 runs:
   using: 'node20'
   main: 'dist/index.js'

src/config.ts

@@ -58,14 +58,16 @@ export function parseConfig(configPath: string): BehaviorDiffConfig {
       bundleSize: parsed.thresholds?.bundleSize,
     },
     interactions: parsed.interactions,
+    disableAnimations: parsed.disableAnimations ?? true,
   };
 }
 
 function parsePages(raw: unknown): BehaviorDiffConfig['pages'] | undefined {
   if (!Array.isArray(raw)) return undefined;
-  return raw.map((p: Record<string, string>) => ({
+  return raw.map((p: Record<string, any>) => ({
     url: p.url,
     name: p.name ?? p.url,
+    mask: Array.isArray(p.mask) ? p.mask : undefined,
   }));
 }
 

src/diff/dom-timeline.ts

@@ -0,0 +1,57 @@
+import type { DomSnapshot, DomTimelineDiff, DomTimelineChange } from '../types';
+import { diffDom } from './dom';
+
+/**
+ * Compare DOM snapshot timelines between base and PR branches.
+ * Matches snapshots by label, then diffs each pair to show
+ * how behavior diverges at each interaction checkpoint.
+ */
+export function diffDomTimelines(
+  baseTimeline: DomSnapshot[],
+  prTimeline: DomSnapshot[],
+  pageName: string,
+  viewportName: string
+): DomTimelineDiff {
+  const snapshotDiffs: DomTimelineChange[] = [];
+
+  // Match snapshots by label
+  for (const baseSnap of baseTimeline) {
+    const prSnap = prTimeline.find((s) => s.label === baseSnap.label);
+    if (!prSnap) continue;
+
+    const changes = diffDom(baseSnap.dom, prSnap.dom);
+    if (changes.length > 0) {
+      snapshotDiffs.push({
+        fromLabel: baseSnap.label,
+        toLabel: prSnap.label,
+        changes,
+      });
+    }
+  }
+
+  // Check for snapshots only in PR (new interaction states)
+  for (const prSnap of prTimeline) {
+    const exists = baseTimeline.some((s) => s.label === prSnap.label);
+    if (!exists) {
+      snapshotDiffs.push({
+        fromLabel: '(not present)',
+        toLabel: prSnap.label,
+        changes: [
+          {
+            type: 'added',
+            path: '/',
+            details: `New interaction state "${prSnap.label}" introduced in PR`,
+          },
+        ],
+      });
+    }
+  }
+
+  return {
+    pageName,
+    viewport: viewportName,
+    baseSnapshots: baseTimeline.length,
+    prSnapshots: prTimeline.length,
+    snapshotDiffs,
+  };
+}