Runs / direct-debits 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 104 counted, under 12 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 164 32 $0.0000 1 read_file, list_files 530 49 $0.0000 2 read_file, read_file 691 98 $0.0000 3
Output cap
The provider's default 4 import data from "./fixture.json";
5 import { css } from "styled-system/css";
6
7 type LastCollection = { date: string; amount: number };
8 type Mandate = {
9 id: string;
10 creditor: string;
11 lastCollection: LastCollection;
12 status: "active" | "failed" | "cancelled";
13 };
14
15 const currency = data.currency;
16 const retryDays = data.retryDays;
17
18 function formatAmount(amount: number) {
19 return new Intl.NumberFormat("en-GB", {
20 style: "currency",
21 currency,
22 minimumFractionDigits: 2,
23 }).format(amount);
24 }
25
26 function formatDate(date: string) {
27 return new Date(date).toLocaleDateString("en-GB", {
28 day: "2-digit",
29 month: "short",
30 year: "numeric",
31 });
32 }
33
34 const statusColor: Record<Mandate["status"], string> = {
35 active: "#16a34a",
36 failed: "#dc2626",
37 cancelled: "#6b7280",
38 };
39
40 export default function Page() {
41 const [mandates, setMandates] = useState<Mandate[]>(
42 (data.mandates as Mandate[]).map((m) => ({ ...m }))
43 );
44 const [confirming, setConfirming] = useState<Mandate | null>(null);
45 const [toast, setToast] = useState<string | null>(null);
46
47 const failedCount = mandates.filter((m) => m.status === "failed").length;
48
49 function handleCancelClick(mandate: Mandate) {
50 setConfirming(mandate);
51 }
52
53 function handleConfirmCancel() {
54 if (!confirming) return;
55 const creditor = confirming.creditor;
56 setMandates((prev) =>
57 prev.map((m) =>
58 m.id === confirming.id ? { ...m, status: "cancelled" } : m
59 )
60 );
61 setConfirming(null);
62 setToast(`Mandate for ${creditor} cancelled.`);
63 window.setTimeout(() => setToast(null), 3000);
64 }
65
66 function handleCancelDialog() {
67 setConfirming(null);
68 }
69
70 return (
71 <div
72 className={css({
73 minHeight: "100vh",
74 backgroundColor: "#f8fafc",
75 padding: "2rem 1rem",
76 fontFamily: "system-ui, sans-serif",
77 })}
78 >
79 <div
80 className={css({
81 maxWidth: "960px",
82 margin: "0 auto",
83 })}
84 >
85 <h1
86 className={css({
87 fontSize: "1.75rem",
88 fontWeight: "700",
89 marginBottom: "0.25rem",
90 color: "#0f172a",
91 })}
92 >
93 Direct debit mandates
94 </h1>
95 <p
96 className={css({
97 color: "#475569",
98 marginBottom: "1.5rem",
99 })}
100 >
101 {data.company}
102 </p>
103
104 {failedCount > 0 && (
105 <div
106 role="alert"
107 className={css({
108 backgroundColor: "#fef2f2",
109 border: "1px solid #fecaca",
110 color: "#991b1b",
111 borderRadius: "8px",
112 padding: "0.75rem 1rem",
113 marginBottom: "1.5rem",
114 fontSize: "0.95rem",
115 })}
116 >
117 {failedCount} collection{failedCount === 1 ? "" : "s"} failed. Each
118 creditor will try again in {retryDays} working days.
119 </div>
120 )}
121
122 <div
123 className={css({
124 display: "grid",
125 gap: "1rem",
126 })}
127 >
128 {mandates.map((m) => (
129 <div
130 key={m.id}
131 className={css({
132 backgroundColor: "#ffffff",
133 border: "1px solid #e2e8f0",
134 borderRadius: "10px",
135 padding: "1rem 1.25rem",
136 boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
137 })}
138 >
139 <div
140 className={css({
141 display: "flex",
142 justifyContent: "space-between",
143 alignItems: "flex-start",
144 gap: "1rem",
145 flexWrap: "wrap",
146 })}
147 >
148 <div>
149 <div
150 className={css({
151 fontWeight: "600",
152 fontSize: "1.05rem",
153 color: "#0f172a",
154 })}
155 >
156 {m.creditor}
157 </div>
158 <div
159 className={css({
160 color: "#64748b",
161 fontSize: "0.85rem",
162 marginTop: "0.15rem",
163 })}
164 >
165 Mandate reference: {m.id}
166 </div>
167 </div>
168 <span
169 className={css({
170 display: "inline-block",
171 padding: "0.2rem 0.6rem",
172 borderRadius: "999px",
173 fontSize: "0.8rem",
174 fontWeight: "600",
175 color: "#ffffff",
176 backgroundColor: statusColor[m.status],
177 textTransform: "capitalize",
178 })}
179 >
180 {m.status}
181 </span>
182 </div>
183
184 <div
185 className={css({
186 marginTop: "0.75rem",
187 color: "#334155",
188 fontSize: "0.9rem",
189 })}
190 >
191 Last collection: {formatDate(m.lastCollection.date)} ·{" "}
192 {formatAmount(m.lastCollection.amount)}
193 </div>
194
195 {(m.status === "active" || m.status === "failed") && (
196 <div className={css({ marginTop: "0.75rem" })}>
197 <button
198 type="button"
199 onClick={() => handleCancelClick(m)}
200 className={css({
201 backgroundColor: "#ffffff",
202 color: "#dc2626",
203 border: "1px solid #fecaca",
204 borderRadius: "6px",
205 padding: "0.4rem 0.8rem",
206 fontSize: "0.85rem",
207 fontWeight: "600",
208 cursor: "pointer",
209 _hover: { backgroundColor: "#fef2f2" },
210 })}
211 >
212 Cancel mandate
213 </button>
214 </div>
215 )}
216 </div>
217 ))}
218 </div>
219 </div>
220
221 {confirming && (
222 <div
223 className={css({
224 position: "fixed",
225 inset: "0",
226 backgroundColor: "rgba(0,0,0,0.4)",
227 display: "flex",
228 alignItems: "center",
229 justifyContent: "center",
230 zIndex: 50,
231 })}
232 onClick={handleCancelDialog}
233 >
234 <div
235 className={css({
236 backgroundColor: "#ffffff",
237 borderRadius: "10px",
238 padding: "1.5rem",
239 maxWidth: "420px",
240 width: "90%",
241 boxShadow: "0 10px 25px rgba(0,0,0,0.15)",
242 })}
243 onClick={(e) => e.stopPropagation()}
244 >
245 <h2
246 className={css({
247 fontSize: "1.1rem",
248 fontWeight: "600",
249 marginBottom: "0.5rem",
250 color: "#0f172a",
251 })}
252 >
253 Cancel mandate?
254 </h2>
255 <p
256 className={css({
257 color: "#475569",
258 marginBottom: "1.25rem",
259 fontSize: "0.95rem",
260 })}
261 >
262 Are you sure you want to cancel the mandate for{" "}
263 <strong>{confirming.creditor}</strong>?
264 </p>
265 <div
266 className={css({
267 display: "flex",
268 justifyContent: "flex-end",
269 gap: "0.5rem",
270 })}
271 >
272 <button
273 type="button"
274 onClick={handleCancelDialog}
275 className={css({
276 backgroundColor: "#ffffff",
277 color: "#334155",
278 border: "1px solid #cbd5e1",
279 borderRadius: "6px",
280 padding: "0.4rem 0.8rem",
281 fontSize: "0.85rem",
282 fontWeight: "600",
283 cursor: "pointer",
284 })}
285 >
286 Keep mandate
287 </button>
288 <button
289 type="button"
290 onClick={handleConfirmCancel}
291 className={css({
292 backgroundColor: "#dc2626",
293 color: "#ffffff",
294 border: "none",
295 borderRadius: "6px",
296 padding: "0.4rem 0.8rem",
297 fontSize: "0.85rem",
298 fontWeight: "600",
299 cursor: "pointer",
300 })}
301 >
302 Confirm cancel
303 </button>
304 </div>
305 </div>
306 </div>
307 )}
308
309 {toast && (
310 <div
311 role="status"
312 className={css({
313 position: "fixed",
314 bottom: "1.5rem",
315 left: "50%",
316 transform: "translateX(-50%)",
317 backgroundColor: "#0f172a",
318 color: "#ffffff",
319 padding: "0.6rem 1rem",
320 borderRadius: "8px",
321 fontSize: "0.9rem",
322 boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
323 zIndex: 60,
324 })}
325 >
326 {toast}
327 </div>
328 )}
329 </div>
330 );
331 }
332
page.tsx:171:30 · 0.2rem 0.6rem `0.2rem 0.6rem` is a raw length. Use a token. page.tsx:205:32 · 0.4rem 0.8rem `0.4rem 0.8rem` is a raw length. Use a token. page.tsx:280:28 · 0.4rem 0.8rem `0.4rem 0.8rem` is a raw length. Use a token. page.tsx:296:28 · 0.4rem 0.8rem `0.4rem 0.8rem` is a raw length. Use a token. raw-values/raw-color 30 design-system page.tsx:74:26 · #f8fafc `#f8fafc` is a raw color. Use a semantic color token. page.tsx:90:20 · #0f172a `#0f172a` is a raw color. Use a semantic color token. page.tsx:97:20 · #475569 `#475569` is a raw color. Use a semantic color token. page.tsx:108:32 · #fef2f2 `#fef2f2` is a raw color. Use a semantic color token. page.tsx:109:23 · 1px solid #fecaca `1px solid #fecaca` is a raw color. Use a semantic color token. page.tsx:110:22 · #991b1b `#991b1b` is a raw color. Use a semantic color token. page.tsx:132:34 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:133:25 · 1px solid #e2e8f0 `1px solid #e2e8f0` is a raw color. Use a semantic color token. page.tsx:136:28 · 0 1px 2px rgba(0,0,0,0.04) `0 1px 2px rgba(0,0,0,0.04)` is a raw color. Use a semantic color token. page.tsx:153:30 · #0f172a `#0f172a` is a raw color. Use a semantic color token. page.tsx:160:30 · #64748b `#64748b` is a raw color. Use a semantic color token. page.tsx:175:28 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:187:26 · #334155 `#334155` is a raw color. Use a semantic color token. page.tsx:201:40 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:202:30 · #dc2626 `#dc2626` is a raw color. Use a semantic color token. page.tsx:203:31 · 1px solid #fecaca `1px solid #fecaca` is a raw color. Use a semantic color token. page.tsx:209:50 · #fef2f2 `#fef2f2` is a raw color. Use a semantic color token. page.tsx:226:30 · rgba(0,0,0,0.4) `rgba(0,0,0,0.4)` is a raw color. Use a semantic color token. page.tsx:236:32 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:241:26 · 0 10px 25px rgba(0,0,0,0.15) `0 10px 25px rgba(0,0,0,0.15)` is a raw color. Use a semantic color token. page.tsx:250:24 · #0f172a `#0f172a` is a raw color. Use a semantic color token. page.tsx:257:24 · #475569 `#475569` is a raw color. Use a semantic color token. page.tsx:276:36 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:277:26 · #334155 `#334155` is a raw color. Use a semantic color token. page.tsx:278:27 · 1px solid #cbd5e1 `1px solid #cbd5e1` is a raw color. Use a semantic color token. page.tsx:292:36 · #dc2626 `#dc2626` is a raw color. Use a semantic color token. page.tsx:293:26 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:317:30 · #0f172a `#0f172a` is a raw color. Use a semantic color token. page.tsx:318:20 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:322:24 · 0 4px 12px rgba(0,0,0,0.2) `0 4px 12px rgba(0,0,0,0.2)` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color lint/@pandacss(no-physical-properties) 10 quality page.tsx:89:13 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:98:13 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:113:15 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:162:23 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:186:19 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:196:39 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:249:17 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:258:17 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:314:13 Use the logical property "insetBlockEnd" instead of the physical "bottom". page.tsx:315:13 Use the logical property "insetInlineStart" instead of the physical "left". Every run that broke lint/@pandacss(no-physical-properties) token-names/unknown-token 8 design-system page.tsx:76:21 · system-ui, sans-serif `fontFamily: "system-ui, sans-serif"`: `system-ui, sans-serif` is not a fonts token. Use one of: sans, mono. page.tsx:88:25 · 700 `fontWeight: "700"`: `700` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:151:35 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:174:33 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:207:35 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:248:29 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:282:31 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:298:31 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. Every run that broke token-names/unknown-token lint/jsx-a11y(no-static-element-interactions) 2 quality lint/jsx-a11y(prefer-tag-over-role) 1 quality typecheck/TS2769 0 quality 6 read_file, read_file 122 171 $0.0000
8 read_file, read_file 487 306 $0.0000
9 write_file 449 3,194 $0.0000