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 75 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 164 30 $0.0000 1 read_file 80 34 $0.0000 2 list_files 790 29 $0.0000 3
Output cap The provider's default 3
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type Mandate = (typeof data.mandates)[number];
8
9 function formatMoney(amount: number) {
10 return new Intl.NumberFormat("en-US", {
11 style: "currency",
12 currency: data.currency,
13 }).format(amount);
14 }
15
16 const thStyle = {
17 textAlign: "left" as const,
18 padding: "0.75rem 1rem",
19 fontSize: "0.875rem",
20 fontWeight: 600,
21 color: "#374151",
22 };
23
24 const tdStyle = {
25 padding: "0.75rem 1rem",
26 fontSize: "0.9375rem",
27 verticalAlign: "middle" as const,
28 };
29
30 export default function Page() {
31 const [mandates, setMandates] = useState<Mandate[]>(() =>
32 data.mandates.map((m) => ({ ...m }))
33 );
34 const [toast, setToast] = useState<string | null>(null);
35 const toastTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
36
37 useEffect(() => {
38 return () => {
39 if (toastTimer.current) clearTimeout(toastTimer.current);
40 };
41 }, []);
42
43 const failedCount = mandates.filter((m) => m.status === "failed").length;
44
45 function showToast(message: string) {
46 setToast(message);
47 if (toastTimer.current) clearTimeout(toastTimer.current);
48 toastTimer.current = setTimeout(() => setToast(null), 3000);
49 }
50
51 function cancelMandate(mandate: Mandate) {
52 const confirmed = window.confirm(
53 `Are you sure you want to cancel the mandate for ${mandate.creditor}?`
54 );
55 if (!confirmed) return;
56 setMandates((prev) =>
57 prev.map((m) =>
58 m.id === mandate.id ? { ...m, status: "cancelled" } : m
59 )
60 );
61 showToast(`Mandate for ${mandate.creditor} cancelled.`);
62 }
63
64 return (
65 <main
66 className={css({
67 maxWidth: "960px",
68 margin: "0 auto",
69 padding: "2rem 1rem",
70 fontFamily: "system-ui, sans-serif",
71 color: "#111827",
72 })}
73 >
74 <h1
75 className={css({
76 fontSize: "1.75rem",
77 fontWeight: 700,
78 marginBottom: "0.5rem",
79 })}
80 >
81 Direct debit mandates
82 </h1>
83 <p
84 className={css({
85 color: "#4b5563",
86 marginBottom: "1.5rem",
87 })}
88 >
89 {data.company}
90 </p>
91
92 {failedCount > 0 && (
93 <div
94 role="alert"
95 className={css({
96 backgroundColor: "#fef2f2",
97 border: "1px solid",
98 borderColor: "#fecaca",
99 color: "#991b1b",
100 padding: "0.75rem 1rem",
101 borderRadius: "0.5rem",
102 marginBottom: "1.5rem",
103 })}
104 >
105 {failedCount} collection{failedCount === 1 ? "" : "s"} failed. Each
106 creditor will try again in {data.retryDays} working days.
107 </div>
108 )}
109
110 <div
111 className={css({
112 overflowX: "auto",
113 border: "1px solid",
114 borderColor: "#e5e7eb",
115 borderRadius: "0.5rem",
116 })}
117 >
118 <table
119 className={css({
120 width: "100%",
121 borderCollapse: "collapse",
122 })}
123 >
124 <thead>
125 <tr className={css({ backgroundColor: "#f9fafb" })}>
126 <th className={css(thStyle)}>Creditor</th>
127 <th className={css(thStyle)}>Mandate reference</th>
128 <th className={css(thStyle)}>Last collection</th>
129 <th className={css(thStyle)}>Status</th>
130 <th className={css(thStyle)}></th>
131 </tr>
132 </thead>
133 <tbody>
134 {mandates.map((m) => (
135 <tr
136 key={m.id}
137 className={css({
138 borderTop: "1px solid",
139 borderColor: "#e5e7eb",
140 })}
141 >
142 <td className={css(tdStyle)}>{m.creditor}</td>
143 <td className={css(tdStyle)}>{m.id}</td>
144 <td className={css(tdStyle)}>
145 {m.lastCollection.date} — {formatMoney(m.lastCollection.amount)}
146 </td>
147 <td className={css(tdStyle)}>
148 <span
149 className={css({
150 display: "inline-block",
151 padding: "0.125rem 0.5rem",
152 borderRadius: "9999px",
153 fontSize: "0.875rem",
154 fontWeight: 600,
155 textTransform: "capitalize",
156 backgroundColor:
157 m.status === "active"
158 ? "#dcfce7"
159 : m.status === "failed"
160 ? "#fee2e2"
161 : "#e5e7eb",
162 color:
163 m.status === "active"
164 ? "#166534"
165 : m.status === "failed"
166 ? "#991b1b"
167 : "#374151",
168 })}
169 >
170 {m.status}
171 </span>
172 </td>
173 <td className={css(tdStyle)}>
174 {(m.status === "active" || m.status === "failed") && (
175 <button
176 type="button"
177 onClick={() => cancelMandate(m)}
178 className={css({
179 padding: "0.375rem 0.75rem",
180 borderRadius: "0.375rem",
181 border: "1px solid",
182 borderColor: "#fca5a5",
183 backgroundColor: "#ffffff",
184 color: "#b91c1c",
185 cursor: "pointer",
186 fontSize: "0.875rem",
187 })}
188 >
189 Cancel mandate
190 </button>
191 )}
192 </td>
193 </tr>
194 ))}
195 </tbody>
196 </table>
197 </div>
198
199 {toast && (
200 <div
201 role="status"
202 aria-live="polite"
203 className={css({
204 position: "fixed",
205 bottom: "1.5rem",
206 right: "1.5rem",
207 backgroundColor: "#111827",
208 color: "#ffffff",
209 padding: "0.75rem 1rem",
210 borderRadius: "0.5rem",
211 boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
212 fontSize: "0.875rem",
213 })}
214 >
215 {toast}
216 </div>
217 )}
218 </main>
219 );
220 }
221
page.tsx:151:32 · 0.125rem 0.5rem `0.125rem 0.5rem` is a raw length. Use a token. page.tsx:179:34 · 0.375rem 0.75rem `0.375rem 0.75rem` is a raw length. Use a token. typecheck/TS2769 11 quality lint/jsx-a11y(control-has-associated-label) 1 quality lint/jsx-a11y(prefer-tag-over-role) 1 quality 12 write_file 312 4,055 $0.0000
13 write_file 6,055 1,610 $0.0000