Runs / transfer-form 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 1 counted, under 1 rule. “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 get_guidelines 117 83 $0.0012 1 list_files, list_components, list_tokens, read_file, read_file 1,385 137 $0.0043 2 get_component, get_component, get_component, get_component, get_component 2,259 217 $0.0071
Output cap The provider's default 4 import {
5 Button,
6 Card,
7 CardBody,
8 CardDescription,
9 CardFooter,
10 CardHeader,
11 CardTitle,
12 FormField,
13 Input,
14 Select,
15 } from "@vektos/ds";
16 import { css } from "styled-system/css";
17 import data from "./fixture.json";
18
19 const currencyFormatter = new Intl.NumberFormat("en-IE", {
20 style: "currency",
21 currency: data.currency,
22 minimumFractionDigits: 2,
23 maximumFractionDigits: 2,
24 });
25
26 function formatMoney(amount: number) {
27 return currencyFormatter.format(amount);
28 }
29
30 function parseAmount(value: string) {
31 const normalized = value.trim().replace(",", ".");
32
33 if (!/^(?:\d+|\d*\.\d{1,2})$/.test(normalized)) {
34 return null;
35 }
36
37 const amount = Number(normalized);
38 return Number.isFinite(amount) ? amount : null;
39 }
40
41 function isValidIban(value: string) {
42 const normalized = value.replace(/\s/g, "").toUpperCase();
43 return /^[A-Z]{2}\d{2}[A-Z0-9]{11,30}$/.test(normalized);
44 }
45
46 type TouchedField = "beneficiary" | "iban" | "amount";
47
48 export default function SepaTransferPage() {
49 const [accountId, setAccountId] = useState(data.defaultAccountId);
50 const [beneficiary, setBeneficiary] = useState("");
51 const [iban, setIban] = useState("");
52 const [amount, setAmount] = useState("");
53 const [reference, setReference] = useState("");
54 const [touched, setTouched] = useState<
55 Partial<Record<TouchedField, boolean>>
56 >({});
57 const [submitAttempted, setSubmitAttempted] = useState(false);
58 const [confirmation, setConfirmation] = useState<{
59 amount: number;
60 beneficiary: string;
61 } | null>(null);
62
63 const selectedAccount =
64 data.accounts.find((account) => account.id === accountId) ??
65 data.accounts[0]!;
66 const parsedAmount = parseAmount(amount);
67 const isOverBalance =
68 parsedAmount !== null && parsedAmount > selectedAccount.available;
69
70 const beneficiaryError = beneficiary.trim()
71 ? undefined
72 : "Enter the beneficiary's name.";
73
74 const ibanError = !iban.trim()
75 ? "Enter the beneficiary's IBAN."
76 : !isValidIban(iban)
77 ? "Enter a valid IBAN using 15 to 34 letters and numbers."
78 : undefined;
79
80 const amountError = !amount.trim()
81 ? "Enter an amount."
82 : parsedAmount === null || parsedAmount <= 0
83 ? "Enter a valid amount greater than zero."
84 : isOverBalance
85 ? `Amount exceeds the available balance of ${formatMoney(selectedAccount.available)}.`
86 : undefined;
87
88 const markTouched = (field: TouchedField) => {
89 setTouched((current) => ({ ...current, [field]: true }));
90 };
91
92 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
93 event.preventDefault();
94 setConfirmation(null);
95 setSubmitAttempted(true);
96
97 if (
98 beneficiaryError ||
99 ibanError ||
100 amountError ||
101 parsedAmount === null ||
102 parsedAmount <= 0
103 ) {
104 return;
105 }
106
107 setConfirmation({
108 amount: parsedAmount,
109 beneficiary: beneficiary.trim(),
110 });
111 setBeneficiary("");
112 setIban("");
113 setAmount("");
114 setReference("");
115 setTouched({});
116 setSubmitAttempted(false);
117 };
118
119 return (
120 <div
121 className={`vektos ${css({
122 minH: "full",
123 bg: "bg.canvas",
124 color: "fg.default",
125 px: "4",
126 py: "8",
127 display: "flex",
128 justifyContent: "center",
129 alignItems: "flex-start",
130 })}`}
131 >
132 <main className={css({ width: "full", maxWidth: "md" })}>
133 <Card>
134 <CardHeader>
135 <CardTitle asChild>
136 <h1>Send a SEPA transfer</h1>
137 </CardTitle>
138 <CardDescription>
139 Transfer euros to a beneficiary within SEPA.
140 </CardDescription>
141 </CardHeader>
142
143 <CardBody className={css({ display: "grid", gap: "6" })}>
144 {confirmation ? (
145 <div
146 role="status"
147 aria-atomic="true"
148 className={css({
149 display: "grid",
150 gap: "1",
151 p: "4",
152 rounded: "md",
153 bg: "success.subtle",
154 color: "success.text",
155 borderWidth: "thin",
156 borderStyle: "solid",
157 borderColor: "success.default",
158 })}
159 >
160 <p className={css({ fontSize: "sm", fontWeight: "semibold" })}>
161 Transfer sent
162 </p>
163 <p className={css({ fontSize: "sm", lineHeight: "normal" })}>
164 {formatMoney(confirmation.amount)} has been sent to{" "}
165 {confirmation.beneficiary}.
166 </p>
167 </div>
168 ) : null}
169
170 <form
171 id="sepa-transfer-form"
172 noValidate
173 onSubmit={handleSubmit}
174 className={css({ display: "grid", gap: "6" })}
175 >
176 <div className={css({ display: "grid", gap: "3" })}>
177 <FormField label="Pay from">
178 <Select
179 name="accountId"
180 value={accountId}
181 onValueChange={(value) => {
182 setAccountId(value);
183 setConfirmation(null);
184 }}
185 options={data.accounts.map((account) => ({
186 label: account.name,
187 value: account.id,
188 }))}
189 />
190 </FormField>
191
192 <div
193 aria-live="polite"
194 aria-atomic="true"
195 className={css({
196 display: "grid",
197 gap: "2",
198 p: "4",
199 rounded: "md",
200 bg: "bg.subtle",
201 })}
202 >
203 <div
204 className={css({
205 display: "flex",
206 alignItems: "center",
207 justifyContent: "space-between",
208 flexWrap: "wrap",
209 gap: "2",
210 })}
211 >
212 <span className={css({ fontSize: "sm", color: "fg.muted" })}>
213 Available balance
214 </span>
215 <strong
216 className={css({ fontSize: "lg", fontWeight: "semibold" })}
217 >
218 {formatMoney(selectedAccount.available)}
219 </strong>
220 </div>
221 <span
222 className={css({
223 fontSize: "xs",
224 color: "fg.muted",
225 overflowWrap: "anywhere",
226 })}
227 >
228 {selectedAccount.iban}
229 </span>
230 </div>
231 </div>
232
233 <FormField
234 label="Beneficiary name"
235 error={
236 touched.beneficiary || submitAttempted
237 ? beneficiaryError
238 : undefined
239 }
240 >
241 <Input
242 name="beneficiary"
243 value={beneficiary}
244 onChange={(event) => {
245 setBeneficiary(event.target.value);
246 setConfirmation(null);
247 }}
248 onBlur={() => markTouched("beneficiary")}
249 placeholder="e.g. Alice Martin"
250 autoComplete="off"
251 required
252 />
253 </FormField>
254
255 <FormField
256 label="Beneficiary IBAN"
257 helperText="Spaces are allowed."
258 error={touched.iban || submitAttempted ? ibanError : undefined}
259 >
260 <Input
261 name="iban"
262 value={iban}
263 onChange={(event) => {
264 setIban(event.target.value.toUpperCase());
265 setConfirmation(null);
266 }}
267 onBlur={() => markTouched("iban")}
268 placeholder="DE89 3704 0044 0532 0130 00"
269 autoComplete="off"
270 spellCheck={false}
271 required
272 />
273 </FormField>
274
275 <FormField
276 label={`Amount (${data.currency})`}
277 helperText="Use up to two decimal places."
278 error={
279 isOverBalance || touched.amount || submitAttempted
280 ? amountError
281 : undefined
282 }
283 >
284 <Input
285 name="amount"
286 value={amount}
287 onChange={(event) => {
288 setAmount(event.target.value);
289 setConfirmation(null);
290 }}
291 onBlur={() => markTouched("amount")}
292 inputMode="decimal"
293 placeholder="0.00"
294 autoComplete="off"
295 required
296 />
297 </FormField>
298
299 <FormField
300 label="Reference (optional)"
301 helperText="Appears on the beneficiary's statement."
302 >
303 <Input
304 name="reference"
305 value={reference}
306 onChange={(event) => {
307 setReference(event.target.value);
308 setConfirmation(null);
309 }}
310 placeholder="e.g. Invoice 2026-114"
311 maxLength={140}
312 />
313 </FormField>
314 </form>
315 </CardBody>
316
317 <CardFooter>
318 <Button
319 type="submit"
320 form="sepa-transfer-form"
321 disabled={isOverBalance}
322 >
323 Send transfer
324 </Button>
325 </CardFooter>
326 </Card>
327 </main>
328 </div>
329 );
330 }
331
3 write_file 2,672 8,310 $0.0893