fix: improve screenshot waiting, add inline images to PR comments

- Increase waitForSelector timeout from 5s to 15s for slower page loads
- Add explicit wait for loading spinners to disappear before screenshot
- Push screenshot images to a temporary branch for inline display
- Read report.md from compare.ts with raw.githubusercontent.com URLs
- Accept optional image base URL in compare.ts CLI
- Upgrade contents permission to write for pushing screenshot branch

https://claude.ai/code/session_01XSTqDJXuR4jaLN7SGm3uES

e2e/src/screenshots/compare.ts

@@ -225,10 +225,10 @@ export function generateMarkdownReport(results: ComparisonResult[], artifactUrl:
 
 // CLI usage
 if (process.argv[1]?.endsWith('compare.ts') || process.argv[1]?.endsWith('compare.js')) {
-  const [baseDir, prDir, outputDir] = process.argv.slice(2);
+  const [baseDir, prDir, outputDir, imageBaseUrl] = process.argv.slice(2);
 
   if (!baseDir || !prDir || !outputDir) {
-    console.log('Usage: compare.ts <base-dir> <pr-dir> <output-dir>');
+    console.log('Usage: compare.ts <base-dir> <pr-dir> <output-dir> [image-base-url]');
     process.exit(1);
   }
 
@@ -245,7 +245,7 @@ if (process.argv[1]?.endsWith('compare.ts') || process.argv[1]?.endsWith('compar
     console.log(`  ${r.name}: ${status} (${r.changePercent.toFixed(1)}%)`);
   }
 
-  const report = generateMarkdownReport(results, '.');
+  const report = generateMarkdownReport(results, imageBaseUrl || '.');
   const reportPath = join(resolve(outputDir), 'report.md');
   writeFileSync(reportPath, report);
   console.log(`\nReport written to: ${reportPath}`);

e2e/src/screenshots/run-scenarios.ts

@@ -103,16 +103,22 @@ for (const scenario of allScenarios) {
     // Wait for specific selector if specified
     if (scenario.waitForSelector) {
       try {
-        await page.waitForSelector(scenario.waitForSelector, { timeout: 5000 });
+        await page.waitForSelector(scenario.waitForSelector, { timeout: 15_000 });
       } catch {
-        // Continue with screenshot even if selector doesn't appear
+        console.warn(`Selector ${scenario.waitForSelector} not found for ${scenario.name}, continuing...`);
       }
     }
 
+    // Wait for loading spinners to disappear
+    await page
+      .waitForFunction(
+        () => document.querySelectorAll('[data-testid="loading-spinner"]').length === 0,
+        { timeout: 10_000 },
+      )
+      .catch(() => {});
+
     // Wait for animations/transitions to settle
-    if (scenario.settleTime) {
-      await page.waitForTimeout(scenario.settleTime);
-    }
+    await page.waitForTimeout(scenario.settleTime ?? 500);
 
     // Take the screenshot
     await page.screenshot({