Skip to Content
EngineeringDesignScreenshots

Screenshots

The web app’s shots runner (npm run shots -- --set pages in web/) captures seven pages at 1440 x 900 in both themes into docs/public/design/shots/<name>-light.png and <name>-dark.png, failing on any console error. The <Screenshot> component below swaps the pair with the theme toggle and uses a plain <img>, so a frame that has not been captured yet does not fail the export; check-links lists such frames as pending under /design/shots/ instead of broken.

Every frame shows the illustrative program trv-101. Records carry illustrative = true and the visible label “Illustrative”; nothing in these frames is real program data, and every product is designed.

Home

Program home of the illustrative program: rail with the four products, product cards and the stage railProgram home of the illustrative program: rail with the four products, product cards and the stage rail
Illustrative: /p/trv-101/home

Evidence › Questions

Evidence questions list with the panel sections and the agent actions on a selected questionEvidence questions list with the panel sections and the agent actions on a selected question
Illustrative: /p/trv-101/evidence/questions

Plans › Protocols

Protocols list with status chips, a selected protocol and its transition and approve actionsProtocols list with status chips, a selected protocol and its transition and approve actions
Illustrative: /p/trv-101/plans/protocols

Review › Findings

Review findings with kind, severity and decision chips and the origin label Agent-generated, for reviewReview findings with kind, severity and decision chips and the origin label Agent-generated, for review
Illustrative: /p/trv-101/review/findings

Progress › Overview

Progress overview with milestones by status, open items and pending approvalsProgress overview with milestones by status, open items and pending approvals
Illustrative: /p/trv-101/progress/overview

Setup › Connections

Connections list with the four designed providers summarised in the headerConnections list with the four designed providers summarised in the header
Illustrative: /p/trv-101/setup/connections

Organization › Users

Organisation users list under the Organization areaOrganisation users list under the Organization area
Illustrative: /org/users

Capture rules

  • 1440 x 900, light and dark, zero browser console errors; the runner stops without a saved sign-in state and prints the hint.
  • File stems equal the name values in web/scripts/shots.pages.json: home, evidence-questions, plans-protocols, review-findings, progress-overview, setup-connections, org-users.
  • Frames are review evidence, captured on the day the docs are published; re-capture after any shell change.

Source: web/scripts/shots.mjs, web/scripts/shots.pages.json, web/README.md, docs/components/screenshot.tsx, docs/scripts/check-links.mjs

ShellDecision log