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 49 counted, under 13 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 25 $0.0000 1 read_file 493 32 $0.0000 2 list_files 560 25 $0.0000 3
Output cap The provider's default 4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type Payment = (typeof data.payments)[number] & { approved: boolean };
8
9 const formatMoney = (value: number) =>
10 new Intl.NumberFormat("en-IE", {
11 style: "currency",
12 currency: data.currency,
13 }).format(value);
14
15 const feeFor = (scheme: string) =>
16 data.fees[scheme as keyof typeof data.fees] ?? 0;
17
18 export default function Page() {
19 const [payments, setPayments] = useState<Payment[]>(() =>
20 data.payments.map((payment) => ({ ...payment, approved: false }))
21 );
22 const [pending, setPending] = useState<Payment | null>(null);
23
24 const confirmApproval = () => {
25 if (!pending) return;
26 setPayments((previous) =>
27 previous.map((payment) =>
28 payment.id === pending.id ? { ...payment, approved: true } : payment
29 )
30 );
31 setPending(null);
32 };
33
34 return (
35 <main
36 className={css({
37 maxWidth: "1100px",
38 margin: "0 auto",
39 padding: "2rem",
40 fontFamily: "sans-serif",
41 })}
42 >
43 <h1 className={css({ fontSize: "1.5rem", marginBottom: "1rem" })}>
44 Payments waiting for approval
45 </h1>
46
47 <table
48 className={css({
49 width: "100%",
50 borderCollapse: "collapse",
51 "& th, & td": {
52 padding: "0.75rem",
53 textAlign: "left",
54 borderBottom: "1px solid #e5e7eb",
55 },
56 "& th": { fontWeight: "600" },
57 })}
58 >
59 <thead>
60 <tr>
61 <th>Beneficiary</th>
62 <th>IBAN</th>
63 <th>Due date</th>
64 <th>Amount</th>
65 <th>Action</th>
66 </tr>
67 </thead>
68 <tbody>
69 {payments.map((payment) => (
70 <tr key={payment.id}>
71 <td>{payment.beneficiary}</td>
72 <td>{payment.iban}</td>
73 <td>{payment.dueDate}</td>
74 <td>{formatMoney(payment.amount)}</td>
75 <td>
76 {payment.approved ? (
77 <span className={css({ color: "green.600", fontWeight: "600" })}>
78 Approved
79 </span>
80 ) : (
81 <button
82 type="button"
83 onClick={() => setPending(payment)}
84 className={css({
85 padding: "0.4rem 0.8rem",
86 borderRadius: "0.375rem",
87 border: "1px solid #d1d5db",
88 background: "#2563eb",
89 color: "white",
90 cursor: "pointer",
91 })}
92 >
93 Approve
94 </button>
95 )}
96 </td>
97 </tr>
98 ))}
99 </tbody>
100 </table>
101
102 {pending && (
103 <div
104 role="dialog"
105 aria-modal="true"
106 aria-label="Confirm payment approval"
107 className={css({
108 position: "fixed",
109 inset: "0",
110 background: "rgba(0, 0, 0, 0.5)",
111 display: "flex",
112 alignItems: "center",
113 justifyContent: "center",
114 zIndex: 1000,
115 })}
116 onClick={() => setPending(null)}
117 >
118 <div
119 className={css({
120 background: "white",
121 padding: "1.5rem",
122 borderRadius: "0.5rem",
123 width: "min(480px, 90vw)",
124 })}
125 onClick={(event) => event.stopPropagation()}
126 >
127 <h2 className={css({ fontSize: "1.25rem", marginBottom: "1rem" })}>
128 Confirm payment
129 </h2>
130 <dl
131 className={css({
132 display: "grid",
133 gridTemplateColumns: "auto 1fr",
134 gap: "0.5rem 1rem",
135 marginBottom: "1.5rem",
136 })}
137 >
138 <dt>Beneficiary</dt>
139 <dd>{pending.beneficiary}</dd>
140 <dt>IBAN</dt>
141 <dd>{pending.iban}</dd>
142 <dt>Amount</dt>
143 <dd>{formatMoney(pending.amount)}</dd>
144 <dt>Fee ({pending.scheme})</dt>
145 <dd>{formatMoney(feeFor(pending.scheme))}</dd>
146 <dt>Total</dt>
147 <dd>{formatMoney(pending.amount + feeFor(pending.scheme))}</dd>
148 </dl>
149 <div
150 className={css({
151 display: "flex",
152 justifyContent: "flex-end",
153 gap: "0.75rem",
154 })}
155 >
156 <button
157 type="button"
158 onClick={() => setPending(null)}
159 className={css({
160 padding: "0.4rem 0.8rem",
161 borderRadius: "0.375rem",
162 border: "1px solid #d1d5db",
163 background: "white",
164 cursor: "pointer",
165 })}
166 >
167 Cancel
168 </button>
169 <button
170 type="button"
171 onClick={confirmApproval}
172 className={css({
173 padding: "0.4rem 0.8rem",
174 borderRadius: "0.375rem",
175 border: "1px solid #d1d5db",
176 background: "#2563eb",
177 color: "white",
178 cursor: "pointer",
179 })}
180 >
181 Confirm
182 </button>
183 </div>
184 </div>
185 </div>
186 )}
187 </main>
188 );
189 }
190
page.tsx:123:22 · min(480px, 90vw) `min(480px, 90vw)` is a raw length. Use a token. page.tsx:160:28 · 0.4rem 0.8rem `0.4rem 0.8rem` is a raw length. Use a token. page.tsx:173:28 · 0.4rem 0.8rem `0.4rem 0.8rem` is a raw length. Use a token. raw-values/raw-color 11 design-system page.tsx:54:27 · 1px solid #e5e7eb `1px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:87:31 · 1px solid #d1d5db `1px solid #d1d5db` is a raw color. Use a semantic color token. page.tsx:88:35 · #2563eb `#2563eb` is a raw color. Use a semantic color token. page.tsx:89:30 · white `white` is a raw color. Use a semantic color token. page.tsx:110:25 · rgba(0, 0, 0, 0.5) `rgba(0, 0, 0, 0.5)` is a raw color. Use a semantic color token. page.tsx:120:27 · white `white` is a raw color. Use a semantic color token. page.tsx:162:27 · 1px solid #d1d5db `1px solid #d1d5db` is a raw color. Use a semantic color token. page.tsx:163:31 · white `white` is a raw color. Use a semantic color token. page.tsx:175:27 · 1px solid #d1d5db `1px solid #d1d5db` is a raw color. Use a semantic color token. page.tsx:176:31 · #2563eb `#2563eb` is a raw color. Use a semantic color token. page.tsx:177:26 · white `white` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color lint/jsx-a11y(no-noninteractive-element-interactions) 1 quality lint/jsx-a11y(no-static-element-interactions) 1 quality lint/jsx-a11y(prefer-tag-over-role) 1 quality typecheck/TS2769 0 quality 8 write_file 1,663 3,681 $0.0000