- Fix blank base screenshots by aggressively killing the preview server
between PR and base steps (fuser -k on port 4173) and clearing the
SvelteKit build cache before rebuilding the base version
- Replace git branch push with GitHub Actions artifact upload:
- Upload full screenshots as a zipped artifact for download
- Upload an HTML report with embedded base64 images as a non-zipped
artifact (archive: false) for direct browser viewing
- Update compare.ts to generate both a text-only markdown summary
(for the PR comment) and a self-contained HTML visual comparison
- Downgrade permissions from contents:write to contents:read since
we no longer push to the repository
https://claude.ai/code/session_01XSTqDJXuR4jaLN7SGm3uES
The workspace has verifyDepsBeforeRun: install which triggers pnpm install
before every pnpm exec/run. After checking out the base web/SDK code, the
package.json files no longer match the lockfile, causing pnpm to re-install
and corrupt the workspace state. This broke both the base build and the
compare step.
- Set PNPM_VERIFY_DEPS_BEFORE_RUN=false on all steps after the base checkout
- Add a "Restore PR source" step to reset web/SDK to the PR version before
running compare, so subsequent pnpm commands work normally
https://claude.ai/code/session_01XSTqDJXuR4jaLN7SGm3uES
- Remove pnpm install from base build steps since it modifies the workspace
lockfile and can break tsx/other deps used by later steps
- Just run pnpm build using the existing node_modules from the PR install
- Ensure screenshot directories exist before compare step runs
https://claude.ai/code/session_01XSTqDJXuR4jaLN7SGm3uES
- Drop --frozen-lockfile for base builds since the PR's lockfile may not
match the base branch's package.json
- Add continue-on-error and step dependencies so the workflow continues
gracefully when base builds fail
- Add catch-all /api/** mock to return empty JSON for unmocked endpoints
- Block socket.io WebSocket connections that prevent networkidle
- Add networkidle timeout fallback in screenshot runner
https://claude.ai/code/session_01XSTqDJXuR4jaLN7SGm3uES
- 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
- Use pulls.listFiles API instead of git diff to detect changed web files
(resolves issue where git diff returned empty due to checkout strategy)
- Replace mshick/add-pr-comment with actions/github-script for all PR
comments (fixes "Unexpected input 'github-token'" warning)
- Skip pnpm/playwright setup when no web changes detected (faster skip)
- Add diagnostic logging for changed file detection
https://claude.ai/code/session_01XSTqDJXuR4jaLN7SGm3uES
- Add tsx as an e2e devDependency (was missing, causing silent failures)
- Replace `npx tsx` with `pnpm exec tsx` throughout
- Move `pnpm install` before `playwright install` (correct ordering)
- Remove `2>/dev/null` that was hiding analyzer errors
- Add debug logging to route analysis step
- Set default working-directory for the job
https://claude.ai/code/session_01XSTqDJXuR4jaLN7SGm3uES
Moves all ${{ }} expressions out of `run:` blocks and into `env:` to
prevent potential code injection via template expansion (zizmor finding).
Also switches the initial PR comment to use github-script with env vars
instead of add-pr-comment with inline template interpolation.
https://claude.ai/code/session_01XSTqDJXuR4jaLN7SGm3uES
Adds a label-triggered GitHub Actions workflow that automatically generates
before/after screenshots when web UI changes are made in a PR. Uses smart
dependency analysis to only screenshot pages affected by the changed files.
Key components:
- Reverse dependency analyzer: traces changed files through the import graph
to find which +page.svelte routes are affected
- Screenshot scenarios: Playwright tests using existing mock-network infrastructure
(no Docker/backend needed) for fast, deterministic screenshots
- Pixel comparison: generates diff images highlighting changed pixels
- GitHub Actions workflow: triggered by 'visual-review' label, posts results
as a PR comment with change percentages per page
https://claude.ai/code/session_01XSTqDJXuR4jaLN7SGm3uES