Press line, static: the full How a Run works diagram in HTML and SVG #64

Parent

#61

What to build

Add the "How a Run works" section as a complete, static explanation in HTML and inline SVG, with no JavaScript. This version is what visitors with reduced motion or no JS get, and it's what search engines index. The next ticket adds motion on top of this same markup.

• The press (prototype press D): a side elevation of a sheet-fed press with rollers: feeder (the issue) → C → M → Y → K → delivery pile (a pull request ready for review).
  • The labels are large (24px), and each has a number, an ink and a name, e.g. "2 · M · IMPLEMENT".
  • A thin "one agent session" bracket spans M and Y.
  • The K unit is a paper-white outline with a label.
  • It spans the full content width on wide viewports.
• The units follow the code's stages. The inks are only identity (see the table in Spec: thirdshift.app, a site that shows how the factory works #61):
  • C: pre-flight (Origin match, open issue, git identity), Issue branch, worktree.
  • M: the implement session (implement, tdd).
  • Y: the same session: code-review, agreed findings fixed, the rest listed as Unaddressed findings, then pr opens the pull request, ready for review.
  • K: push, checking the PR, merge the base, CI, up to 3 Repairs, then the final "open, ready and mergeable" check.
  • Each unit's skill names are shown as labels, ready to be linked by a later ticket.
• Four columns under the diagram, one per unit, holding that unit's real stderr lines from the Run on issue A thirdshift-plugin-* temp dir can outlive its Run #24, which produced pull request Treat SIGHUP like SIGINT and SIGTERM #25:
  • Rebuild the session lines from the Run's session log on the owner's server (~/.thirdshift/logs/JacobStephens2-thirdshift-issue-24-20260925T134143Z-implement.jsonl) by passing it through thirdshift's own progress condensing, so they match what thirdshift printed exactly.
  • The lines outside the session use the real thirdshift: … progress formats, filled in with Treat SIGHUP like SIGINT and SIGTERM #25's actual branch, commit, and CI results from GitHub.
  • Keep the real duration and cost.
  • Link to pull request Treat SIGHUP like SIGINT and SIGTERM #25.
• A misprint note: a Failed run's work is committed and pushed and its pull request goes back to draft. The line order is inferred from the code, so it's labelled illustrative.

Use Glossary terms exactly. Don't use the word "ticket" on the site.

Acceptance criteria

• With JavaScript disabled, the section shows the whole press, the four units' labels and all four columns of stderr lines.
• Every stderr line is either condensed from the A thirdshift-plugin-* temp dir can outlive its Run #24 session log or filled into a real progress format. Nothing is invented, and the pull request says which is which.
• The M+Y bracket and the numbered, named units are present. The K unit is visible on the dark background.
• The SVG has accessible names and descriptions, and the stderr lines are text rather than images.
• Pull request Treat SIGHUP like SIGINT and SIGTERM #25 is linked, and the misprint is labelled illustrative.
• Screenshots at laptop and phone sizes are attached to the pull request.

Blocked by

• Home page walking skeleton: the proof-sheet hero with the install command #62