@lockweb/qa-report

qa-report renders the visual report shells used by QA Suite visual regression and suite run output.

The initial scaffold keeps the current report look and feel aligned with qa-workflow while the rendering boundary is separated into its own package.

Current status:

• qa-report exposes the existing visual report builder and the suite run dashboard through a package boundary
• report styling and interaction patterns are intended to stay consistent with the current visual regression output
• suite reports show the current run's individual test results, status filters, tag/path search, spec breadcrumbs, failure details, screenshots, video, and status bars
• qa-workflow owns capture, compare, run orchestration, and the Playwright reporter that writes the structured per-test results
• qaw can use this package by default or a consumer can point reporting.visual.renderer or reporting.suite.renderer at another renderer package

The visual renderer takes its viewports from metadata.viewports (in capture order), adding any viewport that appears only in the rows; the viewport summary cards and the viewport filter are built from that list, so custom viewport names and counts are supported.

The visual renderer shows metadata.persona in the report header (none when the snapshots were captured without a persona).

Visual report layout:

• A sticky one-row toolbar: Status (All, Changed, Matched, Missing) filters URLs, Tolerance regrades the report, View switches every panel between the before/after slider, the diff image, and before and after side by side, plus path search and sort (changed first, biggest change, path).
• Each URL card has screen size and region toggles, colored red (changed), green (matched), or yellow (missing) and labeled with % match (100 minus the mismatch, to 0.1; a changed region never shows 100.0%, and missing shows n/a). A screen size shows its worst region. One screen size and one region are shown at a time; each card opens on its first changed screen size and region.
• Tolerance starts at metadata.mismatchTolerance (percent, default 0) and can be typed or stepped with the − and + buttons (0.01 below 0.1, 0.1 below 1, then 1). A region counts as changed when its mismatch is above the tolerance. Changing it regrades every toggle, the Status filter, each card's opening selection, the sort, and the summary in the browser, without re-running compare; the page embeds each region's mismatch for this.
• Tall screenshots sit in a box about three quarters of the window high and scroll inside it; each panel's Expand button shows the full height. In the Images view before and after scroll independently, and Link scroll keeps them at the same position. The slider is sized to the taller of the two images so neither is cut off. Clicking an image opens it full size.
• Review checklist: each URL card has a Status control (Not reviewed, Needs fix, Review, Approved) for its selected screen size and one Notes field for the URL; matched screen sizes show Match. A reviewed screen size turns blue with a dot for its status, along with its changed regions. The toolbar's Report / Checklist switch shows a table with one row per URL: a match and status per screen size, and the notes. The Review filter shows URLs with a changed screen size in the chosen review state (for example Not reviewed).
• Reviews autosave in the viewer's browser (localStorage, per report); they are not shared or written back anywhere. Download CSV exports the checklist (URL, each screen size's match and status, notes, result, tolerance, report id) and Import CSV loads one back, matched by URL, so QA can save, share, and resume a review.
• Missing sections never count toward mismatch figures, so an unavailable capture never reads as a 100% mismatch.

The suite renderer reads run.testResults from the structured report bundle. The generated dashboard intentionally contains only the current run; per-run data remains under reports/runs/ for manual copying or archiving.