Here it is. The statement is ready: nine steps
The statement is ready. Goal: "Split the bill" gets a neat, warm look with style tokens, light and dark themes, chips with avatars, transfer cards, a "How it is calculated" table and two columns on a wide screen. The calculation logic and behaviour do not change.
The task was given as text in the session, so commits carry no issue reference. The logic of the bill, the calculation and the links is not touched, and the generated file with the agent's rules is not edited.
The main decisions made instead of the human where the task left a choice. The captions of the remove buttons stay as they are: arbitrary names cannot be declined without a library, and a short caption would make expenses of one payer indistinguishable. Buttons in tests are found by a helper of their own by role and accessible name, without new libraries. The avatar color is derived from the name by a deterministic function onto eight tones, and the colors themselves live only in CSS. There is one avatar palette for both themes, and the text on it is always dark. Tokens are added for the field border, the text on the accent, the error, the warning and the shadow. The "How it is calculated" block is built with details and summary and is closed by default. The "Balance" column of the table shows a word and a signed amount, and "receives" and "gives" are also told apart by color. "For whom" is chosen with chips on top of real checkboxes. The right column from 900 px is sticky, with a height limit and scrolling inside.
The statement calculates the contrast pairs for the light and dark themes and for all eight avatar colors: text pairs are no lower than 4.5, non-text ones no lower than 3.
A plan of nine commits: finding buttons by role in tests; tokens, themes and buttons; icons and avatars; the header with the overview; participants and expenses; the summary and the table; two columns; the "Interface style" section in AGENTS.md; new screenshots and README. After each commit the checks are green.
Checking the look: a build, a preview and a Playwright script in a temporary directory. It needs shots at three sizes in two themes, the empty and the filled state (the README example through a link with a bill) and a stress bill with a long name. On each shot the absence of horizontal overflow is checked, then the shots are looked at by eye.
Done criteria: checks green after each commit, the logic untouched, colors only in the token blocks, the needed media queries in place, buttons and chips no smaller than 44 px, the overview and the summary match the README example, empty states are visible, the layout works at all widths, the section in AGENTS.md exists, the screenshots have the right size.
Tests: rewrite the helpers in the interface tests, add tests of the header, the remove buttons, the same avatar tone for a person everywhere, empty states, the line about the number of transfers and the summary classes, and a separate test of the avatar functions.
Risks: a sticky column taller than the screen, four table columns at 360 px, test selectors after the split into columns, counting the explanations in the summary, support for :has() and keeping the number of avatar tones in sync between the code and the CSS.