Design: /fleet/graph is built from the design system, and its fleet-* classes leave §5d #3220

/fleet/graph is now built from the design system, and its .fleet-* classes are gone from src/web/style/content.ts and from the §5d register in docs/DESIGN.md. The type check, test/design-lint.test.ts, test/design-audit.test.ts, test/fleet-graph.test.ts, test/themes.test.ts and the board tests pass. The in-browser axe test fails in this sandbox, but it fails the same way on main without this change. I could not take the before/after screenshots in light and dark, because there is no browser here; the preview's looks are where to compare them.

What moved where

• Repository picker: the hand-styled .fleet-pick form is now a field-row with field() (monospace, with a new spellcheck: false option so the old attribute is kept) and the Draw button.
• The chart: it became a §5 component, the stacked bar chart. Its classes are .plots (the two-window grid and its captions), .plot (the SVG), .plot-name (the panel labels) and .plot-legend.

- Gridlines, tick labels and axis labels are styled by element (.plot line, .plot text), so they no longer need a class each. - Text alignment is now set on the SVG groups themselves. - The SVG now has width/height attributes, which hold its 600×230 shape without the old aspect-ratio rule.

• Colour swatches: the status dot (.dot) gets a data-series=0…7 variant, made by a new seriesDot() in ui.ts. This replaces .fleet-swatch in the legend and in the table.
• Table: it is the plain .table with data-dense. The table component now right-aligns .num cells; this is listed in its §5 row.
• Small swaps: .fleet-assume became .mt. The unused fleet-graph class on the section was dropped; its id, which the redraw uses, stays.

What changes for other pages: the spend tables in pages/spend.ts (shown on /board) already mark their figures class="num", so their numbers now line up on the right as well.

What looks slightly different:

• Swatches are 8 px round dots instead of 10 px rounded squares.
• The "Repositories" label sits above the input instead of beside it.
• Row headers in the table are weight 550 instead of 500.
• The footnote's top margin is 12 px instead of 8 px.
• The picker no longer hides when the page is printed.

No information is lost and nothing should shift as the page loads.

What I chose not to do: the bar colours .fg-s0….fg-s7 stay in §5d. They aren't .fleet-*, and test/themes.test.ts checks one of them word for word.

Tests: no existing test matched the old class names, so none needed updating. test/fleet-graph.test.ts gains checks that the page uses the field row, the chart classes, the series dot and the plain table, and that no class on the page starts with fleet-.

Try it: open /fleet/graph on the preview while signed in, in light and dark, at desktop width and at 360 px.

🤖 Generated with Claude Code

Closes #3197

/fleet/graph is now built from the design system, and its .fleet-* classes are gone from src/web/style/content.ts and from the §5d register in docs/DESIGN.md. The type check, test/design-lint.test.ts, test/design-audit.test.ts, test/fleet-graph.test.ts, test/themes.test.ts and the board tests pass. The in-browser axe test fails in this sandbox, but it fails the same way on main without this change. I could not take the before/after screenshots in light and dark, because there is no browser here; the preview's looks are where to compare them.

What moved where

• Repository picker: the hand-styled .fleet-pick form is now a field-row with field() (monospace, with a new spellcheck: false option so the old attribute is kept) and the Draw button.
• The chart: it became a §5 component, the stacked bar chart. Its classes are .plots (the two-window grid and its captions), .plot (the SVG), .plot-name (the panel labels) and .plot-legend.

- Gridlines, tick labels and axis labels are styled by element (.plot line, .plot text), so they no longer need a class each. - Text alignment is now set on the SVG groups themselves. - The SVG now has width/height attributes, which hold its 600×230 shape without the old aspect-ratio rule.

• Colour swatches: the status dot (.dot) gets a data-series=0…7 variant, made by a new seriesDot() in ui.ts. This replaces .fleet-swatch in the legend and in the table.
• Table: it is the plain .table with data-dense. The table component now right-aligns .num cells; this is listed in its §5 row.
• Small swaps: .fleet-assume became .mt. The unused fleet-graph class on the section was dropped; its id, which the redraw uses, stays.

What changes for other pages: the spend tables in pages/spend.ts (shown on /board) already mark their figures class="num", so their numbers now line up on the right as well.

What looks slightly different:

• Swatches are 8 px round dots instead of 10 px rounded squares.
• The "Repositories" label sits above the input instead of beside it.
• Row headers in the table are weight 550 instead of 500.
• The footnote's top margin is 12 px instead of 8 px.
• The picker no longer hides when the page is printed.

No information is lost and nothing should shift as the page loads.

What I chose not to do: the bar colours .fg-s0….fg-s7 stay in §5d. They aren't .fleet-*, and test/themes.test.ts checks one of them word for word.

Tests: no existing test matched the old class names, so none needed updating. test/fleet-graph.test.ts gains checks that the page uses the field row, the chart classes, the series dot and the plain table, and that no class on the page starts with fleet-.

Try it: open /fleet/graph on the preview while signed in, in light and dark, at desktop width and at 360 px.

🤖 Generated with Claude Code

/fleet/graph is now built from the design system's panels, tables, segmented windows and series-coloured dots, so the fleet-* classes are gone from style/content.ts and from the §5d list in docs/DESIGN.md. The bar chart's fg-s0…7 series colours stay where they were. The status dot's row in §5 now covers data-series=0…7 (seriesDot()), which gives a chart series its swatch.

This update merges main. Only one line conflicted: the §5d "page furniture" line in docs/DESIGN.md, because #3217 (/audit) took the audit- classes out of that same line. The merged line has neither set, and its summary reads "explore, backups, boards, the fleet chart's series colours". style/content.ts merged without conflict, and no audit- rules are left in it. The type check is clean, and the design-lint, design-audit, design-map, audit, fleet and forge-webspec tests pass. I did not run the full suite here; the forge runs it on this push.

To try it, open /fleet/graph on the preview as an admin and switch the window and the metric.

🤖 Generated with Claude Code