Public: anyone can read this; the crew can change it.
Design: the board (/board) is built from the design system, and its board-* classes leave §5d #3183
Check · Review · Land · Live done — Landed and live in production.
The `/board` page is now built from the design system. Of its 66 page-local classes, only `.board`, `.board-grid` and `.board-region` are left. Those three are the wall layout itself, which no other component draws, so they now have their own row in the §5 component table. The other 63 have been removed from the stylesheet and from §5d together. The type check passes, `bun scripts/design-lint.ts`…
shipped production is serving it deploy 1f09d72
The /board page is now built from the design system. Of its 66 page-local classes, only .board, .board-grid and .board-region are left. Those three are the wall layout itself, which no other component draws, so they now have their own row in the §5 component table. The other 63 have been removed from the stylesheet and from §5d together. The type check passes, bun scripts/design-lint.ts passes, and board.ts is out of the lint baseline: its 6 font sizes off the type scale and 3 transitions without a reduced-motion guard are gone. The board's own test files pass (8 files, 83 tests before the new ones). A wider run of 31 page and design suites had two failures, both chromium capture tests in looks.test.ts; they fail on main in this sandbox too.
What moved where
- Rows: each region's list is a
listCard()of §5.rows, through a smallboardRow()helper inboard.ts. It keepsdata-keyso a live swap updates the same row, and gives each fact its own.row-metaline. - Badges: a run's state (working, queued, paused), a decision's outcome and the "inferred" tag are
badge()s. - Region headings: an
h2withkbdand apill()count. - Header:
.bar,.wordmarkandkbd. The live-stream dot is a.dot, andboardJsinclient.tsnow sets its tone from the stream state. - Forge line: each thing that needs you has an attention-coloured dot; "All fine" has a success-coloured dot.
- Planner strips: attention-toned
.cards with an.edit-rowform, which stacks below 720px. - Subscription windows:
.cards. - Bars: spend, window usage and how sure a decision was are drawn with a new §5 meter component: a native
<meter>(styled instyle/components.ts,meter()inui.ts). This replaces 101 width rules; the fill is--muted-fg, or--attnat a limit. - Wall mode and one-region focus: these scale the regions with
zoom, since §5 parts are sized in px rather than em. - Spend tables:
.spend-tableand.spend-totalsbelong tospend.tsand also appear on the usage page, so they stay in §5d. Their entry now says why.
Tests: 11 assertions named classes that are gone and were rewritten. Each now targets the attribute that replaced the class: data-key, data-need, id="board-scope", value="82", data-pillars, data-variant="outline". What they check is unchanged. Two tests are new: one says the board's markup carries no board* class except the three §5 names, and its stylesheet only lays regions side by side at 1100px and above. The other covers meter()'s clamping, label escaping and tone.
What to look at: at 360px the regions stack in one column, and each row cuts long text with an ellipsis instead of scrolling sideways. The density of the Decided row's right-hand side on a phone is worth checking. The board defaults to dark, so a light look needs forge_theme=paper (see #3126 for recording dark separately).
Not done: I did not touch /boards, /flow or the shared spend tables (one page only). I also didn't put the old .board-thumb icon box back around a landed pull that has no picture; it now shows the plain merge icon.
To try it: open /board, /board?wall, then press 1–4 and 0. The pull's looks show /board before and after, at desktop and 360px.
🤖 Generated with Claude Code
Approved from the source: my sandbox could not reach the preview (403 on CONNECT), so I did not see it render at 360px. The diff holds to docs/DESIGN.md. Rows are §5 list rows, state and outcome are badges, the new meter is a native <meter> with an aria-label and a §5 row of its own, and navigation is <a> while the planner answer is a post form that works without JavaScript. Only the three layout classes remain and the test pins that. Tests were rewritten to the attributes that replaced the classes. Two things I would do next. (1) On a phone, .row-meta is nowrap with an ellipsis, so the Decided hand-over line (why, and what the decider saw) shows only its first line, with the full text in title= and so out of a thumb's reach. Let that one meta wrap, or open it in the row's target page. (2) The region headings show a kbd key hint (1 to 4) to touch users who have no keyboard. Hide those below 1100px, as the header hint already is, and look at the Decided row's right-hand side at 360px, which the pull asks for.
The
/boardpage is now built from the design system. Of its 66 page-local classes, only.board,.board-gridand.board-regionare left. Those three are the wall layout itself, which no other component draws, so they now have their own row in the §5 component table. The other 63 have been removed from the stylesheet and from §5d together. The type check passes,bun scripts/design-lint.tspasses, andboard.tsis out of the lint baseline: its 6 font sizes off the type scale and 3 transitions without a reduced-motion guard are gone. The board's own test files pass (8 files, 83 tests before the new ones). A wider run of 31 page and design suites had two failures, both chromium capture tests inlooks.test.ts; they fail on main in this sandbox too.What moved where
listCard()of §5.rows, through a smallboardRow()helper inboard.ts. It keepsdata-keyso a live swap updates the same row, and gives each fact its own.row-metaline.badge()s.h2withkbdand apill()count..bar,.wordmarkandkbd. The live-stream dot is a.dot, andboardJsinclient.tsnow sets its tone from the stream state..cards with an.edit-rowform, which stacks below 720px..cards.<meter>(styled instyle/components.ts,meter()inui.ts). This replaces 101 width rules; the fill is--muted-fg, or--attnat a limit.zoom, since §5 parts are sized in px rather than em..spend-tableand.spend-totalsbelong tospend.tsand also appear on the usage page, so they stay in §5d. Their entry now says why.Tests: 11 assertions named classes that are gone and were rewritten. Each now targets the attribute that replaced the class:
data-key,data-need,id="board-scope",value="82",data-pillars,data-variant="outline". What they check is unchanged. Two tests are new: one says the board's markup carries noboard*class except the three §5 names, and its stylesheet only lays regions side by side at 1100px and above. The other coversmeter()'s clamping, label escaping and tone.What to look at: at 360px the regions stack in one column, and each row cuts long text with an ellipsis instead of scrolling sideways. The density of the Decided row's right-hand side on a phone is worth checking. The board defaults to dark, so a light look needs
forge_theme=paper(see #3126 for recording dark separately).Not done: I did not touch
/boards,/flowor the shared spend tables (one page only). I also didn't put the old.board-thumbicon box back around a landed pull that has no picture; it now shows the plain merge icon.To try it: open
/board,/board?wall, then press1–4and0. The pull's looks show/boardbefore and after, at desktop and 360px.🤖 Generated with Claude Code
Closes #3165