♻️ Reporter review fixes + stable visual snapshots

[Robdel12]

Summary

This PR wraps up the reporter review pass and hardens the visual test workflow we’ve been dogfooding.

It includes targeted reporter UX/perf fixes, stronger status handling, and snapshot stability improvements so repeated test:reporter runs stop bouncing around.

Also included: a new AGENTS.md contributor guide for this repo.

What changed

• Added AGENTS.md with concise contributor guidelines.
• Normalized status handling so baseline-created behaves like new in filters/actions.
• Fixed fullscreen review shortcut behavior (d) by preserving toggle intent while in review mode.
• Fixed queue auto-scroll effect behavior with proper dependencies.
• Prevented management/static views from triggering report-data query when no report ID exists.
• Improved SmartImage rendering path for perf (native lazy loading/decoding and less JS overhead).
• Removed unused use-image-loader hook.
• Added status-handling.spec.js and expanded viewer shortcut coverage.
• Stabilized reporter visual snapshots by:
  • disabling CSS animations/transitions in the reporter test harness,
  • waiting for fullscreen viewer fonts/images/render settle before capture,
  • capturing the fullscreen viewer element instead of full-page chrome.

Validation

• npm run lint
• npm run test:reporter (re-run multiple times)
• Latest .vizzly/report-data.json: 19 passed, 0 failed

[vizzly-testing]

Vizzly - Visual Test Results

CLI Reporter - Approved

19 comparisons approved.

Review changes

CLI TUI - Approved

5 comparisons, no changes detected.

View build

---

_{reporter-review-fixes · 2a27c199}

[claude]

Code Review

This PR delivers solid improvements to the reporter and stabilizes visual testing. The changes are well-structured and test coverage demonstrates attention to detail.

✅ Strengths

Status Handling Normalization

• Clean abstraction in status-utils.js for treating baseline-created as new
• Good helper functions prevent scattered conditionals
• Comprehensive test coverage in status-handling.spec.js

Visual Snapshot Stability

• CSS animation disabling in test-helper.js is effective
• waitForFullscreenViewerReady is thorough: fonts, images, decode API, visibility
• Element screenshots reduce browser chrome noise

Performance Improvements

• SmartImage uses native loading lazy and decoding async
• Removed use-image-loader hook, delegates to browser
• Conditional query enabling prevents unnecessary API calls

Documentation

• AGENTS.md is concise and well-organized (45 lines)

🔍 Code Quality

Fullscreen Viewer Effect (fullscreen-viewer.jsx:372)
Dependencies are correct now. Consider if showQueue should trigger auto-scroll when toggled vs only on navigation.

Toggle Mode State (screenshot-display.jsx:31-37)
Added controlled state for image loading. Verify if baselineImageLoaded/currentImageLoaded variables are necessary or redundant with existing imageLoadStates Map.

Query Optimization (app-router.jsx)
Smart conditional enabling. The isManagementRoute check is duplicated - consider adding a comment.

🐛 Potential Issues

SmartImage Init (smart-image.jsx:8)
Initial state duplicates effect logic. Could simplify by relying entirely on effect or render phase.

Image Decode Comment (viewer-test-utils.js:36-43)
Comment should clarify decode() rejects on load failures AND decoding failures.

Missing Guard (viewer-test-utils.js:15-16)
If root not found, screenshotFullscreenViewer proceeds anyway. Consider error/warning.

🔒 Security

No issues identified. UI-focused changes.

⚡ Performance

SmartImage improvements are excellent. Query optimization is measurable. CSS animation disabling is test-only and appropriate.

🧪 Test Coverage

Good status normalization and viewer shortcut tests. Consider adding queue auto-scroll test and unit test for showBaseline/onToggleBaseline props.

✨ Summary

Solid PR with well-architected improvements. Status handling, performance, and snapshot stability are all thoughtful.

Next steps:

1. Verify image load state variables necessity
2. Add error/warning for missing viewer element
3. Simplify SmartImage init

Approve with minor suggestions. Nice work!