Design: /milestones is built from the design system, and its ms-* classes leave §5d #3182

/milestones and a milestone's page are now built from §5 components, and no .ms-* class remains in the code or in docs/DESIGN.md §5d. I haven't produced the before/after pictures the issue asks for: this sandbox has no browser, so the four after-pictures (desktop and 360px, light and dark) have to come from the forge's look run on this pull.

What changed

• Limbs and rows: The limb list and every list on the milestone page are listCard/card/row rows. Each limb row shows a pill with its progress figure ("N of M done"), and the milestone header card still shows "N of M done". The "candidate to trim" note is an attn badge plus text on the limb row, and an attn-toned header card on the milestone.
• State badges: Issue states are badges.
• Folded tails: "N more …" and "N closed" lists fold inside a card.
• No page CSS: milestonesCss is deleted, so the page carries no CSS of its own.
• Progress bar: The bar is a bare <progress> element with one global rule in style/components.ts, tokens only. docs/DESIGN.md §5 has a new "progress bar" row for it.
• Limb pages: The limb pages (limb.ts, limb_replan.ts) shared the ms-* classes, so I moved them onto the same components too. The shared row and fold helpers live in the new pages/limb_view.ts. The unused .limb-rows rule left §5d with them.
• Tests: In test/milestones.test.ts the limb link no longer asserts class="ms-name", and the limbs-page progress check now matches "1 of 5 done" without <b>. Both were old-markup assertions.

Checks

• tsc is clean.
• bun scripts/design-lint.ts passes.
• The milestone, watch and limb suites pass (44 tests).
• The full bun test run has 6 failures, all environmental. Four are tests that need chromium, a network host or the SSH port (the browser axe check, two look captures, main.ts with SSH taken). The other two are the scaffolded-app typecheck and the crew's one-tap commit onto a pull's head branch, which I didn't look into. All six are in code I didn't touch, and the sandbox denied network calls during the run, but I didn't confirm each one against main.

Left out

• The Raise/Lower links keep their old inline layout inside the row's trail.
• The old accent/attn colouring of state words is now carried by badge tones. Only building (success) and blocked (attn) are toned; other states are plain badges.

Closes #3164

/milestones and a milestone's page are now built from §5 components, and no .ms-* class remains in the code or in docs/DESIGN.md §5d. I haven't produced the before/after pictures the issue asks for: this sandbox has no browser, so the four after-pictures (desktop and 360px, light and dark) have to come from the forge's look run on this pull.

What changed

• Limbs and rows: The limb list and every list on the milestone page are listCard/card/row rows. Each limb row shows a pill with its progress figure ("N of M done"), and the milestone header card still shows "N of M done". The "candidate to trim" note is an attn badge plus text on the limb row, and an attn-toned header card on the milestone.
• State badges: Issue states are badges.
• Folded tails: "N more …" and "N closed" lists fold inside a card.
• No page CSS: milestonesCss is deleted, so the page carries no CSS of its own.
• Progress bar: The bar is a bare <progress> element with one global rule in style/components.ts, tokens only. docs/DESIGN.md §5 has a new "progress bar" row for it.
• Limb pages: The limb pages (limb.ts, limb_replan.ts) shared the ms-* classes, so I moved them onto the same components too. The shared row and fold helpers live in the new pages/limb_view.ts. The unused .limb-rows rule left §5d with them.
• Tests: In test/milestones.test.ts the limb link no longer asserts class="ms-name", and the limbs-page progress check now matches "1 of 5 done" without <b>. Both were old-markup assertions.

Checks

• tsc is clean.
• bun scripts/design-lint.ts passes.
• The milestone, watch and limb suites pass (44 tests).
• The full bun test run has 6 failures, all environmental. Four are tests that need chromium, a network host or the SSH port (the browser axe check, two look captures, main.ts with SSH taken). The other two are the scaffolded-app typecheck and the crew's one-tap commit onto a pull's head branch, which I didn't look into. All six are in code I didn't touch, and the sandbox denied network calls during the run, but I didn't confirm each one against main.

Left out

• The Raise/Lower links keep their old inline layout inside the row's trail.
• The old accent/attn colouring of state words is now carried by badge tones. Only building (success) and blocked (attn) are toned; other states are plain badges.

I merged main into this branch and pushed it. The only conflict was docs/DESIGN.md §5d, and I resolved it by hand.

• What I kept: this branch removed the pages/milestones.ts ms- line. main had dropped .fcard, .fcard-acts, .fcard-head and .fcard-more from the feed_style.ts line, so those stay out too. The other fcard- classes remain.
• A slip I fixed: my first resolution kept those four classes, and the design lint test failed on them. I struck them and committed that as a separate fix.
• Tests: the design-lint, design-audit, design-map and milestones tests pass, 27 of 27. I did not get a result from a full bun test run, so the forge's check on this push is the first full run.

Review changes for #3182 are pushed to the branch. The whole bun test run hung here and I killed it. I ran only the milestones, limbs, limb-order and limb-replan suites (38 pass) and tsc --noEmit (clean). The forge's check will run the rest.

• Phone rows: /milestones and a milestone's limbs now render in a wrapping list (list setting-list, the same variant the limits and capacity pages use). The title, weight words, trim reason and Raise/Lower now wrap instead of being cut off with an ellipsis. The trail holds only the "N of M done" pill, so the title keeps its width at 360px. I didn't check this on a real 360px screen. The preview wasn't up from here, and this follows from the CSS.
• Progress bar: the rule is now progress:not(.tests-bar), so the run page's <progress class="tests-bar"> keeps its own look. docs/DESIGN.md notes this.
• Tests: the limbs-page test now asserts the progress aria-label, the "1 of 5 done" pill, the wrapping list class and the trim badge. The milestone-page test asserts the progress aria-label and a state badge. I used the "done" badge there because the building leaf sits under "Building now" and has no badge.
• List helper: list is exported from limb_view.ts with a wrap option, and milestones.ts uses it. limb.ts now uses listCard.

I didn't change the DESIGN.md progress-bar row. It already has the same five cells as the header (component, web class, variants, states, terminal); I counted them, so I couldn't find the extra empty cell. Point me at it if I've misread.

I did not touch the <ol class="list"> in limb.ts, since it is ordered and list is not.

The milestones and limb pages are now built from the design system's shared components, and the branch merges cleanly into main again. I ran the type check, test/limbs.test.ts, test/milestones.test.ts and the design tests, and all pass. I did not run the rest of the suite or the forge's own check.

What changed

• Milestones pages: /milestones and a single limb opened now use the shared list, row and card components instead of page-specific ms-* CSS.
• Merge with main: main had meanwhile moved src/web/pages/limb.ts to the shared dialog, field and select components. I kept my version of the file and took main's confirm dialog and row rendering.
• Limb rows: the limb's refused or failed rows now show a "needs attention" badge, as main does, and the reason sits in the row's meta text.
• Dropped CSS: limbCss and its two classes (limb-why, limb-confirm) are gone, since nothing defines them any more.
• docs/DESIGN.md: the merge had brought back the pages/milestones.ts entry listing the ms-* classes, which no longer exist. I struck it, so the design-lint test passes.

Not done

• I did not touch anything beyond the merge conflicts and the DESIGN.md entry.

To try it

• Run bun test test/limbs.test.ts test/milestones.test.ts test/design-lint.test.ts.
• Open a repo's /milestones on the preview, then a limb's defer or close preview, to see the new rows and dialog.

🤖 Generated with Claude Code

I fixed the first two review points and pushed. I did not make the third change, and I haven't looked at the page on a 360px screen. The type check and the milestones, limbs and design tests pass; I didn't run the rest of the suite.

• DESIGN.md: §5 now has a "progress bar" row. It says the progress:not(.tests-bar) rule in style/components.ts covers every <progress> on the site. It names .tests-bar, the run page's own bar, as the exception, and lists the 4px height and the aria-label.
• Raise/Lower: these are now small ghost buttons in the row's trail, beside the "n of m done" pill, no longer inline links in the meta text. Small buttons are 28px tall, and 36px on touch screens. I haven't seen them at 360px. If the trail crowds the title there, the next step is letting the trail wrap onto its own line.
• Progress bar markup (not changed): I disagree that it's invalid. <progress> is phrasing content, so it is allowed inside the row's meta <span>. display:block only affects CSS. A real block container would need a new slot in row() that touches every row on the site, which is too much for this pull. The movers are now out of the meta, so it holds just the bar, the weight words and the trim badge.