[Robdel12]

Dyno is named after a dynamometer, and now the reporter looks like one. This replaces the old reporter UI with its own brand and a layout built around the dyno sheet: every run is a pull, plotted live as tests finish.

What changed

• The dyno sheet. The overview leads with a chart of finished tests over summed test time. Steep stretches are fast tests and flat ones are slow. Failures are big red points you can click. While a test runs, its name rides the end of the curve. When the pull finishes, a printed-sheet note reads like a dyno peak: 13 tests @ 1.90 s.
• Ghost of the last pull. The previous matching run shows as a dotted trace, so a rerun tells you right away whether things got faster. It's stored in localStorage as geometry only, never test names.
• Tachometer and readouts. A small gauge next to the run title sweeps to "all done": yellow while running, green when clean, red only when a finished run has failures. Readouts beside the sheet work like a peak table.
• Rollers instead of badges. Pending tests sit on a still roller and the running one spins, just like the o in the new wordmark. Statuses are plain colored text, with no pills, chips, or glowing dots.
• Test detail. Failures read message first, then where it happened ("In the test body at file:line"), then the source with a wavy underline on the failing line. Timings shows a phase split, a timeline, then the full table.
• Saved reports print the same sheet, tach, and readouts, with Archivo inlined so they still work offline.
• Brand. A roller-drum wordmark, a steel-blue "night-shift dyno cell" dark theme, a printed-sheet light theme, hazard yellow, and Archivo (OFL, vendored). The control room page, the in-app "Show test results" button, and the favicon match.
• docs/design.md is rewritten from scratch as the design system: the dyno vocabulary, tokens, type scale, motion, copy, a never list of generic UI tropes, and a checklist for adding new UI. Agents and humans can follow it to keep new work on brand.

Along the way I cleaned things up. There's one shared escaper and wordmark (src/browser/markup.js). The pull curve is built once per render in linear time, the sheet only redraws when it actually changes, and the font is read once per server. I also folded the CSS overrides back into their original rules and dropped the !importants.

Screenshots

Running, with the last pull as a ghost

Finished with failures

Light theme

Paused: the sheet folds so the tests stay in view

Test output

Test timings

Phone width

Saved report

Testing

• npm test: 262 passed, 2 skipped. The suite drives the real reporter in a browser, so it catches layout regressions like rows falling below the fold.
• npm --prefix site run build and npm --prefix site test pass.
• Screenshots are from a mock-state preview of the real reporter files, in dark and light, at 1280×900 and 390×844.