feat(report): restyle the HTML build report to match Angles UI

[snevesbarros]

Summary

The build report returned by GET /build/:buildId/report now looks like Angles UI instead of a Bootstrap 4 page. It is still one standalone HTML file that works offline once saved.

What changed (app/assets/report/)

• Self-contained: the styles (styles.css) and the new script (report.js) are written into the page itself. There is no Bootstrap CDN link and no other external request.
• Angles UI look: uses the "Ember & Sand" colour tokens and the spacing, corner radius and font scale from angles-ui/src/styles/tokens. Light or dark follows the viewer's OS setting.
• Summary card: build status, team, component, environment, phase, start, finish, duration, suite and test counts, the four result counts and a results bar.
• Expand / collapse: suites, tests and actions use native <details>/<summary>, so they still open and close with scripts disabled and are keyboard accessible. Failed and errored actions start open.
• Toolbar: filter by result; filter by test name, suite, feature or tag; buttons for "Show failures", "Expand all" and "Collapse all".
• Steps: expected and actual side by side, info text, and a screenshot thumbnail that opens in a full-size viewer (Esc closes it).
• Layout: works down to phone width, and every section opens when the page is printed.

Fixes

• Start and finish times used the MM (month) pattern where minutes were meant.
• The component name and screenshot thumbnails were filled in client-side from raw JSON embedded in a <script> tag. They are now rendered on the server, where Pug escapes them, which removes a script-injection risk.
• Dark-mode suite header contrast: cream text on the orange-400 header measured 1.8:1. It now uses the dark panel ink (8.7:1) through an optional --master-font-color-accent-heading primitive. Angles UI gets the same fix on its claude/angles-dashboard-sdet-features-g34tzr branch, so the two still match. Light mode is unchanged.

Tests

• test/build.tests.js: the report test now checks for the doctype. It also checks that the page has no external <link rel=stylesheet> or <script src>.

Testing

• npx eslint app test/build.tests.js passes.
• I rendered the template with sample data and checked it in headless Chromium: the filters, expand/collapse, "Show failures", the screenshot viewer, dark mode and a 390px viewport. There were no page errors and no network requests, and an HTML-injection attempt in the build name was escaped.
• I also rendered it from real Mongoose documents (Map results, ObjectId refs). The component name, screenshots and result counts all resolved correctly.
• The mocha suite passed in CI on the first commit.

🤖 Generated with Claude Code

https://claude.ai/code/session_01KgQXSUjuLVXmLWxobnMfSf