feat(attachments): show test attachments on the execution

[snevesbarros]

Summary

Shows the files automated tests attach to their results (AnglesHQ/angles#133): logs, HAR files, videos, Playwright traces, HTML snapshots and images.

• Chips: an expanded execution shows an "Attachments" row of chips, and so does any step that has its own (for example the page HTML at the failing step). The execution header also shows the attachment count. Attachment details are fetched once, the first time the execution is expanded.
• Viewers: clicking a chip opens a viewer suited to the file:
  • Logs and JSON: numbered lines with a "show only lines containing…" filter
  • HAR: a table of requests (status, method, URL, type, size, time). Failed requests (4xx/5xx, or "No response") are highlighted, and a toggle shows only those.
  • Video: a player
  • HTML snapshot: the page in an empty-sandbox iframe, so its scripts never run inside Angles
  • Image: the picture
  • Trace / archive: a download, with a pointer to trace.playwright.dev for traces
• Download: every viewer has a Download button that keeps the original file name.

Files are fetched with the session (axios plus a blob), like the existing manual-testing attachments, so this works when the API and UI are on different origins. The new list endpoint is called with axios directly, so this PR doesn't need a new angles-javascript-client release.

Design system

• Colours, spacing and type all come from tokens. There is one new token, --html-snapshot-background, a fixed white behind HTML snapshots, documented next to the other theme-independent overlay tokens.
• Status colouring uses the shared .status-* classes, the buttons use .btn-primary / .btn-secondary, and the loading and error states use .app-alert.
• Every new string is in all five catalogues (en, nl, th, cn, hi). npm run check-translations passes.

Depends on

AnglesHQ/angles#133 (the API). Merge that first.

Testing

• npm run build (the production build) and npm run check-translations pass.
• Ran the UI against the new backend with a Playwright-recorded video, trace, HAR, console log, HTML snapshot and screenshot, and drove it in Chromium:
  • the execution and step chips, and every viewer
  • the log filter and the HAR "failed only" toggle
  • the download file name, and dark mode
• That run found and fixed two issues before this commit: Playwright records a request with no response as status -1, which now shows as "No response" and counts as failed; and the byte formatting for tiny sizes.
• Lint: the repo's .eslintrc.js doesn't load on master (eslint-config-airbnb v5 is incompatible with the installed eslint-plugin-react), so I linted the changed files with an equivalent config: airbnb-base, react, jsx-a11y, react-hooks and the repo's own overrides. Only func-names warnings remain, matching the existing const X = function (props) style.

🤖 Generated with Claude Code

https://claude.ai/code/session_01KgQXSUjuLVXmLWxobnMfSf

---

Generated by Claude Code