Runs / payment-approval Batch Runs from different design-system versions should not be compared.
The page A screenshot in each theme, as the benchmark took it.
page.tsx As the agent left it; marked lines broke a rule.
Violations 67 counted, under 10 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
Steps One row per model call, with the tools it asked for. An agent that reads the guidelines before writing shows it here; what a checker or submit_view answered is under its call.
Step Tools Tokens in Tokens out Cost 0 list_files 134 30 $0.0000 1 read_file 50 33 $0.0000 2 list_files 566 30 $0.0000 3
Output cap The provider's default 3 import { useState } from "react";
4 import data from "./fixture.json";
5 import { css } from "styled-system/css";
6
7 type Payment = {
8 id: string;
9 beneficiary: string;
10 iban: string;
11 amount: number;
12 dueDate: string;
13 scheme: string;
14 reference: string;
15 };
16
17 type Fixture = {
18 currency: string;
19 fees: Record<string, number>;
20 payments: Payment[];
21 };
22
23 const fixture = data as Fixture;
24
25 const money = new Intl.NumberFormat(undefined, {
26 style: "currency",
27 currency: fixture.currency,
28 });
29
30 function formatMoney(value: number) {
31 return money.format(value);
32 }
33
34 export default function Page() {
35 const [approved, setApproved] = useState<Set<string>>(new Set());
36 const [selected, setSelected] = useState<Payment | null>(null);
37
38 const openApprove = (payment: Payment) => setSelected(payment);
39 const closeDialog = () => setSelected(null);
40
41 const confirmApprove = () => {
42 if (selected) {
43 setApproved((prev) => {
44 const next = new Set(prev);
45 next.add(selected.id);
46 return next;
47 });
48 }
49 closeDialog();
50 };
51
52 return (
53 <main
54 className={css({
55 maxWidth: "1100px",
56 margin: "0 auto",
57 padding: "2rem",
58 fontFamily: "sans-serif",
59 })}
60 >
61 <h1
62 className={css({
63 fontSize: "1.75rem",
64 fontWeight: "700",
65 marginBottom: "1.5rem",
66 })}
67 >
68 Payments waiting for approval
69 </h1>
70
71 <div
72 className={css({
73 overflowX: "auto",
74 borderRadius: "0.75rem",
75 border: "1px solid",
76 borderColor: "gray.200",
77 })}
78 >
79 <table
80 className={css({
81 width: "100%",
82 borderCollapse: "collapse",
83 fontSize: "0.95rem",
84 })}
85 >
86 <thead>
87 <tr className={css({ backgroundColor: "gray.50" })}>
88 <th className={cellHeader}>Beneficiary</th>
89 <th className={cellHeader}>IBAN</th>
90 <th className={cellHeader}>Due date</th>
91 <th className={css({ ...cellHeaderBase, textAlign: "right" })}>
92 Amount
93 </th>
94 <th className={cellHeader}>Status</th>
95 <th className={cellHeader}>Action</th>
96 </tr>
97 </thead>
98 <tbody>
99 {fixture.payments.map((payment) => {
100 const isApproved = approved.has(payment.id);
101 return (
102 <tr
103 key={payment.id}
104 className={css({
105 borderTop: "1px solid",
106 borderColor: "gray.200",
107 })}
108 >
109 <td className={cellBody}>{payment.beneficiary}</td>
110 <td className={cellBody}>{payment.iban}</td>
111 <td className={cellBody}>{payment.dueDate}</td>
112 <td
113 className={css({
114 ...cellBodyBase,
115 textAlign: "right",
116 fontVariantNumeric: "tabular-nums",
117 })}
118 >
119 {formatMoney(payment.amount)}
120 </td>
121 <td className={cellBody}>
122 {isApproved ? "Approved" : "Pending"}
123 </td>
124 <td className={cellBody}>
125 <button
126 type="button"
127 onClick={() => openApprove(payment)}
128 disabled={isApproved}
129 className={css({
130 padding: "0.4rem 0.85rem",
131 borderRadius: "0.5rem",
132 border: "none",
133 backgroundColor: isApproved ? "gray.300" : "blue.600",
134 color: "white",
135 cursor: isApproved ? "not-allowed" : "pointer",
136 fontWeight: "600",
137 })}
138 >
139 Approve
140 </button>
141 </td>
142 </tr>
143 );
144 })}
145 </tbody>
146 </table>
147 </div>
148
149 {selected && (
150 <div
151 role="dialog"
152 aria-modal="true"
153 aria-labelledby="approve-dialog-title"
154 className={css({
155 position: "fixed",
156 inset: "0",
157 display: "flex",
158 alignItems: "center",
159 justifyContent: "center",
160 backgroundColor: "rgba(0, 0, 0, 0.5)",
161 zIndex: 50,
162 })}
163 >
164 <div
165 className={css({
166 backgroundColor: "white",
167 borderRadius: "0.75rem",
168 padding: "1.5rem",
169 width: "100%",
170 maxWidth: "420px",
171 boxShadow: "0 10px 30px rgba(0,0,0,0.2)",
172 })}
173 >
174 <h2
175 id="approve-dialog-title"
176 className={css({
177 fontSize: "1.25rem",
178 fontWeight: "700",
179 marginBottom: "1rem",
180 })}
181 >
182 Confirm payment approval
183 </h2>
184
185 <dl
186 className={css({
187 display: "grid",
188 gridTemplateColumns: "1fr 1fr",
189 gap: "0.5rem 1rem",
190 marginBottom: "1.5rem",
191 })}
192 >
193 <dt className={labelStyle}>Beneficiary</dt>
194 <dd className={valueStyle}>{selected.beneficiary}</dd>
195 <dt className={labelStyle}>IBAN</dt>
196 <dd className={valueStyle}>{selected.iban}</dd>
197 <dt className={labelStyle}>Amount</dt>
198 <dd className={valueStyle}>{formatMoney(selected.amount)}</dd>
199 <dt className={labelStyle}>Fee ({selected.scheme})</dt>
200 <dd className={valueStyle}>
201 {formatMoney(fixture.fees[selected.scheme] ?? 0)}
202 </dd>
203 <dt className={labelStyle}>Total</dt>
204 <dd
205 className={css({
206 ...valueStyleBase,
207 fontWeight: "700",
208 })}
209 >
210 {formatMoney(
211 selected.amount + (fixture.fees[selected.scheme] ?? 0)
212 )}
213 </dd>
214 </dl>
215
216 <div
217 className={css({
218 display: "flex",
219 justifyContent: "flex-end",
220 gap: "0.75rem",
221 })}
222 >
223 <button
224 type="button"
225 onClick={closeDialog}
226 className={css({
227 padding: "0.45rem 1rem",
228 borderRadius: "0.5rem",
229 border: "1px solid",
230 borderColor: "gray.300",
231 backgroundColor: "white",
232 cursor: "pointer",
233 fontWeight: "600",
234 })}
235 >
236 Cancel
237 </button>
238 <button
239 type="button"
240 onClick={confirmApprove}
241 className={css({
242 padding: "0.45rem 1rem",
243 borderRadius: "0.5rem",
244 border: "none",
245 backgroundColor: "blue.600",
246 color: "white",
247 cursor: "pointer",
248 fontWeight: "600",
249 })}
250 >
251 Confirm
252 </button>
253 </div>
254 </div>
255 </div>
256 )}
257 </main>
258 );
259 }
260
261 const cellHeaderBase = {
262 padding: "0.75rem 1rem",
263 textAlign: "left" as const,
264 fontWeight: "600",
265 fontSize: "0.85rem",
266 textTransform: "uppercase" as const,
267 letterSpacing: "0.03em",
268 color: "#4b5563",
269 };
270
271 const cellHeader = css(cellHeaderBase);
272
273 const cellBodyBase = {
274 padding: "0.75rem 1rem",
275 };
276
277 const cellBody = css(cellBodyBase);
278
279 const labelStyle = css({
280 fontWeight: "600",
281 color: "#4b5563",
282 });
283
284 const valueStyleBase = {
285 margin: 0,
286 };
287
288 const valueStyle = css({
289 ...valueStyleBase,
290 });
291
page.tsx:130:34 · 0.4rem 0.85rem `0.4rem 0.85rem` is a raw length. Use a token. raw-values/raw-color 8 design-system page.tsx:134:32 · white `white` is a raw color. Use a semantic color token. page.tsx:160:30 · rgba(0, 0, 0, 0.5) `rgba(0, 0, 0, 0.5)` is a raw color. Use a semantic color token. page.tsx:166:32 · white `white` is a raw color. Use a semantic color token. page.tsx:171:26 · 0 10px 30px rgba(0,0,0,0.2) `0 10px 30px rgba(0,0,0,0.2)` is a raw color. Use a semantic color token. page.tsx:231:36 · white `white` is a raw color. Use a semantic color token. page.tsx:246:26 · white `white` is a raw color. Use a semantic color token. page.tsx:268:10 · #4b5563 `#4b5563` is a raw color. Use a semantic color token. page.tsx:281:10 · #4b5563 `#4b5563` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color token-names/unknown-token 8 design-system page.tsx:58:21 · sans-serif `fontFamily: "sans-serif"`: `sans-serif` is not a fonts token. Use one of: sans, mono. page.tsx:64:23 · 700 `fontWeight: "700"`: `700` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:136:37 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:178:29 · 700 `fontWeight: "700"`: `700` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:207:31 · 700 `fontWeight: "700"`: `700` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:233:31 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:248:31 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:280:15 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. Every run that broke token-names/unknown-token token-roles/palette 7 design-system page.tsx:76:24 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:87:51 · gray.50 `gray.50` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:106:34 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:133:55 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:133:68 · blue.600 `blue.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:230:32 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:245:36 · blue.600 `blue.600` is a palette shade: it ignores the theme. Use a semantic color token. Every run that broke token-roles/palette typecheck/TS2769 5 quality a11y/color-contrast 2 quality page.tsx:1:1 · <button type="button" class="p_0.4rem_0.85rem bdr_0.5rem bd_none bg-c_blue.600 c_white cursor_pointer fw_600">Approve</b Elements must meet minimum color contrast ratio thresholds (4 elements, light theme) page.tsx:1:1 · <th class="p_0.75rem_1rem ta_left fw_600 fs_0.85rem tt_uppercase ls_0.03em c_#4b5563">Beneficiary</th> Elements must meet minimum color contrast ratio thresholds (6 elements, dark theme) Every run that broke a11y/color-contrast lint/jsx-a11y(prefer-tag-over-role) 1 quality 11 write_file 1,430 3,478 $0.0000