[JacobStephens2]

Summary

The "How a Run works" section, as static HTML and inline SVG, placed after the hero. It ships no JavaScript. This is the version visitors get with reduced motion or with JS off, and the version search engines index. The next issue adds motion on top of this markup.

<section id="how-a-run-works">
├── sec-head          # eyebrow, headline, lede linking #24 and pull request #25
├── press-frame       # <svg role="img"> with <title>/<desc>: feeder (#24) → C → M → Y → K → delivery pile (PR #25 · READY)
│                     #   "ONE AGENT SESSION" bracket over M and Y; K is a paper-white outline; unit labels 24px
├── press-cols        # 4 columns: "1 · C · Prepare" … "4 · K · Finish"
│                     #   <ul class="factory-skills"> labels, <ol class="stderr-lines"> of real stderr
├── press-source      # says which lines are condensed, which are filled-in formats, and that the duration is rebuilt
└── misprint          # the Glossary's Failed run definition, then lines marked ILLUSTRATIVE

Where each stderr line comes from. None of the lines are invented.

Lines	Source
Every implement: … line (29 lines, M and Y)	~/.thirdshift/logs/JacobStephens2-thirdshift-issue-24-20260925T134143Z-implement.jsonl, passed through progress::Progress::condense by a throwaway test that wasn't committed. The split between M and Y is at skill thirdshift:code-review.
implement: session ended after 3m 40s: 5 turns, $1.06 at API prices	Turns and cost come from Progress::summary() on that log. The duration is rebuilt: the log file was created at 13:41:45.01 and last written at 13:45:25.19, which is 3m 40.18s. thirdshift's timer stops when the process exits, so it may have printed 3m 41s. The page says so too.
logging the session to …, creating worktree … on issue-24 from origin/main	The formats in session.rs and worktree.rs, filled in with the Run's real log path and worktree path (the log's cwd).
The K lines: push, checking the PR, merge, push, waiting up to 60s for CI on f32bc95, 1 of 1 checks still running, CI passed on f32bc95, final check, cleanup, PR … is ready for review	The formats in worktree.rs, run.rs, ci.rs and main.rs, in the order the code prints them. They are filled in with #25's branch issue-24, its head f32bc95 and its only check, test. That check started at 13:45:24, before the session ended at 13:45:25, and passed at 13:45:55, so it was still running when CI was first polled. Merging origin/main made no new commit.
Misprint	Illustrative only, with <placeholders>. The line order follows repair_loop → failed_run::fail → Worktree::drop → main. It was not seen in a real Run.

Evidence

Before: main has no How a Run works section.
After: screenshots from headless Chromium with JavaScript disabled. At both sizes the whole press, all four units' labels and all four columns of stderr lines are visible. Neither size scrolls sideways (scrollWidth equals the viewport width: 1440 and 390).

1440×900 (section only):

390×844 (section only):

cargo test passes. No Rust code changed.

Merge Danger

Door: two-way

Only markup and CSS in site/ change.

Blast Radius: home page

The page gets longer below the hero. The generic .sec and .sec-head styles are meant for the sections that come later.

Unaddressed findings

Standards

• The unit-to-ink mapping lives in both the SVG attributes and the .unit-col.ink-* rules, and K's paper outline is written three times (Shotgun Surgery): the SVG draws K as an outlined plate and the columns draw it as an outlined chip, so these are different shapes that share a colour, not one rule. The motion issue will rework the SVG units, which is the better time to move them onto ink-* classes.
• class="unit" and data-unit on the SVG groups are unused (Speculative Generality): Press line, static: the full How a Run works diagram in HTML and SVG #64 says the next issue adds motion "on top of this same markup", and these are the hooks it will target.
• Raw #000 instead of a token (Primitive Obsession): the rest of the page already uses #000 this way (.install, .colorbar .cb-k).
• The thirdshift: prefix is repeated as a <span> on every line; a CSS ::before could replace it (Duplicated Code): a pseudo-element prefix couldn't be copied or indexed as text, and the issue asks for the stderr lines as text.
• The four SVG unit groups repeat the same body and could share a <symbol> (Duplicated Code): each unit has its own ink and plate, and the motion issue will target parts of each unit. #rollers and #spokes are already shared.
• A unit's name appears in about five places (Shotgun Surgery): the site has no build step by design (Spec: thirdshift.app, a site that shows how the factory works #61), and the spec fixes the names.
• The SVG mixes presentational attributes with CSS classes: the attributes come from prototype press D. Only the text the spec sizes (unit labels and ink letters) moved to classes.
• "Pre-flight" isn't a CONTEXT.md term: Spec: thirdshift.app, a site that shows how the factory works #61 and Press line, static: the full How a Run works diagram in HTML and SVG #64 use it for unit C, and the code module is preflight.
• .svg-misreg repeats .misreg's shadow colours (Duplicated Code): one is a text-shadow and the other an SVG filter, so they can't share a rule.
• .lede duplicates .framing, and .unit-col and .misprint both set h3 and p sizes (Duplicated Code): these are different contexts at different widths. Merging them would couple sections that are otherwise unrelated.
• The generic .sec / .sec-head has only one user (Speculative Generality): Spec: thirdshift.app, a site that shows how the factory works #61 lists eight more sections that will use it.

Spec

• "The labels are large (24px)", but on a 390px phone the press scales down and the labels render at about 7px: an acceptance criterion asks for the whole press to be visible, and a sideways scroll at 24px wouldn't give that. Each column below repeats its unit's number, ink and name in 26px type.
• SVG extras that weren't asked for ("UNIT 1–4" captions, "the issue" / "ready for review" sub-captions, the grid background): these are harmless press-D details from the prototype.
• Small text additions (headline, lede, "This Run needed no Repair", "Run the same command again to continue it"): the section needs framing text, and none of it conflicts with the spec.

Closes #64

🤖 Generated with Claude Code