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 81 counted, under 7 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, read_file 1,072 128 $0.0002 1 write_file 1,795 3,436 $0.0019 2 stop 5,252 117 $0.0006
Output cap The provider's default 3
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type Scheme = keyof typeof data.fees;
8
9 type Payment = {
10 id: string;
11 beneficiary: string;
12 iban: string;
13 amount: number;
14 dueDate: string;
15 scheme: Scheme;
16 reference: string;
17 };
18
19 const payments: Payment[] = data.payments as Payment[];
20
21 const money = new Intl.NumberFormat("en-GB", {
22 style: "currency",
23 currency: data.currency,
24 });
25
26 function formatDate(isoDate: string): string {
27 return new Intl.DateTimeFormat("en-GB", {
28 day: "2-digit",
29 month: "short",
30 year: "numeric",
31 timeZone: "UTC",
32 }).format(new Date(`${isoDate}T00:00:00Z`));
33 }
34
35 export default function PendingApprovalsPage() {
36 const [approved, setApproved] = useState<Set<string>>(() => new Set());
37 const [pending, setPending] = useState<Payment | null>(null);
38 const dialogRef = useRef<HTMLDialogElement>(null);
39
40 const openDialog = (payment: Payment) => {
41 setPending(payment);
42 dialogRef.current?.showModal();
43 };
44
45 const closeDialog = () => {
46 dialogRef.current?.close();
47 };
48
49 const handleClosed = () => {
50 setPending(null);
51 };
52
53 const handleConfirm = () => {
54 if (!pending) return;
55 const id = pending.id;
56 setApproved((prev) => new Set(prev).add(id));
57 closeDialog();
58 };
59
60 const fee = pending ? data.fees[pending.scheme] : 0;
61 const total = pending ? pending.amount + fee : 0;
62
63 return (
64 <main
65 className={css({
66 maxWidth: "1100px",
67 margin: "0 auto",
68 padding: "32px 24px",
69 fontFamily: "sans-serif",
70 color: "#1a1a1a",
71 })}
72 >
73 <h1 className={css({ fontSize: "24px", fontWeight: "bold", marginBottom: "16px" })}>
74 Payments awaiting approval
75 </h1>
76
77 <div className={css({ overflowX: "auto" })}>
78 <table
79 className={css({
80 width: "100%",
81 borderCollapse: "collapse",
82 fontSize: "14px",
83 })}
84 >
85 <thead>
86 <tr>
87 {["Beneficiary", "IBAN", "Due date", "Amount", "Status", ""].map((h) => (
88 <th
89 key={h}
90 scope="col"
91 className={css({
92 textAlign: h === "Amount" ? "right" : "left",
93 padding: "10px 12px",
94 borderBottom: "2px solid #d0d0d0",
95 fontWeight: "600",
96 })}
97 >
98 {h}
99 </th>
100 ))}
101 </tr>
102 </thead>
103 <tbody>
104 {payments.map((p) => {
105 const isApproved = approved.has(p.id);
106 return (
107 <tr key={p.id}>
108 <td className={css({ padding: "10px 12px", borderBottom: "1px solid #eee" })}>
109 <div className={css({ fontWeight: "600" })}>{p.beneficiary}</div>
110 <div className={css({ color: "#666", fontSize: "12px" })}>{p.reference}</div>
111 </td>
112 <td
113 className={css({
114 padding: "10px 12px",
115 borderBottom: "1px solid #eee",
116 fontFamily: "monospace",
117 whiteSpace: "nowrap",
118 })}
119 >
120 {p.iban}
121 </td>
122 <td
123 className={css({
124 padding: "10px 12px",
125 borderBottom: "1px solid #eee",
126 whiteSpace: "nowrap",
127 })}
128 >
129 {formatDate(p.dueDate)}
130 </td>
131 <td
132 className={css({
133 padding: "10px 12px",
134 borderBottom: "1px solid #eee",
135 textAlign: "right",
136 whiteSpace: "nowrap",
137 fontVariantNumeric: "tabular-nums",
138 })}
139 >
140 {money.format(p.amount)}
141 </td>
142 <td className={css({ padding: "10px 12px", borderBottom: "1px solid #eee" })}>
143 {isApproved ? (
144 <span
145 className={css({
146 color: "#0a6b2d",
147 fontWeight: "600",
148 })}
149 >
150 Approved
151 </span>
152 ) : (
153 <span className={css({ color: "#8a5a00" })}>Pending</span>
154 )}
155 </td>
156 <td
157 className={css({
158 padding: "10px 12px",
159 borderBottom: "1px solid #eee",
160 textAlign: "right",
161 })}
162 >
163 <button
164 type="button"
165 disabled={isApproved}
166 onClick={() => openDialog(p)}
167 className={css({
168 padding: "6px 14px",
169 borderRadius: "4px",
170 border: "1px solid #1a1a1a",
171 background: "#1a1a1a",
172 color: "#fff",
173 cursor: "pointer",
174 _disabled: {
175 background: "#e5e5e5",
176 borderColor: "#e5e5e5",
177 color: "#777",
178 cursor: "default",
179 },
180 })}
181 >
182 Approve
183 </button>
184 </td>
185 </tr>
186 );
187 })}
188 </tbody>
189 </table>
190 </div>
191
192 <dialog
193 ref={dialogRef}
194 onClose={handleClosed}
195 aria-labelledby="approve-dialog-title"
196 className={css({
197 border: "none",
198 borderRadius: "8px",
199 padding: "24px",
200 width: "min(480px, calc(100vw - 32px))",
201 boxShadow: "0 10px 30px rgba(0,0,0,0.25)",
202 _backdrop: { background: "rgba(0,0,0,0.4)" },
203 })}
204 >
205 {pending && (
206 <div>
207 <h2
208 id="approve-dialog-title"
209 className={css({ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" })}
210 >
211 Confirm payment approval
212 </h2>
213
214 <dl
215 className={css({
216 display: "grid",
217 gridTemplateColumns: "auto 1fr",
218 gap: "8px 16px",
219 fontSize: "14px",
220 margin: "0 0 20px",
221 })}
222 >
223 <dt className={css({ color: "#666" })}>Beneficiary</dt>
224 <dd className={css({ margin: 0, fontWeight: "600" })}>{pending.beneficiary}</dd>
225
226 <dt className={css({ color: "#666" })}>IBAN</dt>
227 <dd className={css({ margin: 0, fontFamily: "monospace" })}>{pending.iban}</dd>
228
229 <dt className={css({ color: "#666" })}>Amount</dt>
230 <dd className={css({ margin: 0, fontVariantNumeric: "tabular-nums" })}>
231 {money.format(pending.amount)}
232 </dd>
233
234 <dt className={css({ color: "#666" })}>Fee ({pending.scheme})</dt>
235 <dd className={css({ margin: 0, fontVariantNumeric: "tabular-nums" })}>
236 {money.format(fee)}
237 </dd>
238
239 <dt className={css({ color: "#666", fontWeight: "600" })}>Total</dt>
240 <dd
241 className={css({
242 margin: 0,
243 fontWeight: "bold",
244 fontVariantNumeric: "tabular-nums",
245 })}
246 >
247 {money.format(total)}
248 </dd>
249 </dl>
250
251 <div className={css({ display: "flex", justifyContent: "flex-end", gap: "8px" })}>
252 <button
253 type="button"
254 onClick={closeDialog}
255 className={css({
256 padding: "8px 16px",
257 borderRadius: "4px",
258 border: "1px solid #999",
259 background: "#fff",
260 cursor: "pointer",
261 })}
262 >
263 Cancel
264 </button>
265 <button
266 type="button"
267 onClick={handleConfirm}
268 className={css({
269 padding: "8px 16px",
270 borderRadius: "4px",
271 border: "1px solid #1a1a1a",
272 background: "#1a1a1a",
273 color: "#fff",
274 cursor: "pointer",
275 })}
276 >
277 Confirm
278 </button>
279 </div>
280 </div>
281 )}
282 </dialog>
283 </main>
284 );
285 }
286
· 1px solid #eee
`1px solid #eee` is a raw color. Use a semantic color token.
page.tsx:142:76 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:146:34 · #0a6b2d `#0a6b2d` is a raw color. Use a semantic color token. page.tsx:153:53 · #8a5a00 `#8a5a00` is a raw color. Use a semantic color token. page.tsx:159:37 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:170:33 · 1px solid #1a1a1a `1px solid #1a1a1a` is a raw color. Use a semantic color token. page.tsx:171:37 · #1a1a1a `#1a1a1a` is a raw color. Use a semantic color token. page.tsx:175:39 · #e5e5e5 `#e5e5e5` is a raw color. Use a semantic color token. page.tsx:176:40 · #e5e5e5 `#e5e5e5` is a raw color. Use a semantic color token. page.tsx:201:22 · 0 10px 30px rgba(0,0,0,0.25) `0 10px 30px rgba(0,0,0,0.25)` is a raw color. Use a semantic color token. page.tsx:202:36 · rgba(0,0,0,0.4) `rgba(0,0,0,0.4)` is a raw color. Use a semantic color token. page.tsx:258:27 · 1px solid #999 `1px solid #999` is a raw color. Use a semantic color token. page.tsx:271:27 · 1px solid #1a1a1a `1px solid #1a1a1a` is a raw color. Use a semantic color token. page.tsx:272:31 · #1a1a1a `#1a1a1a` is a raw color. Use a semantic color token. raw-values/raw-length 28 design-system lint/@pandacss(no-physical-properties) 9 quality page.tsx:73:66 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:94:21 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:108:62 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:115:23 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:125:23 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:134:23 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:142:62 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:159:23 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:209:70 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". Every run that broke lint/@pandacss(no-physical-properties) typecheck/TS2769 8 quality