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 4 counted, under 2 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 get_guidelines, read_file, list_components 1,790 135 $0.0002 1 get_component, get_component, get_component, get_component, get_component, list_tokens 4,483 254 $0.0006 2 write_file 9,642 5,386 $0.0037
e02ef3974528
Output cap The provider's default 4 import type { FormEvent } from "react";
5 import data from "./fixture.json";
6 import {
7 Button,
8 Card,
9 CardBody,
10 CardDescription,
11 CardFooter,
12 CardHeader,
13 CardTitle,
14 FormField,
15 Input,
16 Select,
17 } from "@vektos/ds";
18 import { css } from "styled-system/css";
19
20 const moneyFormatter = new Intl.NumberFormat("en-IE", {
21 style: "currency",
22 currency: data.currency,
23 });
24
25 function formatMoney(value: number): string {
26 return moneyFormatter.format(value);
27 }
28
29 /** Accepts "250", "250.5", "250,00" or "250.00". Returns null when the format is wrong. */
30 function parseAmount(raw: string): number | null {
31 const normalized = raw.trim().replace(",", ".");
32 if (!/^\d+(\.\d{1,2})?$/.test(normalized)) {
33 return null;
34 }
35 return Number(normalized);
36 }
37
38 /** Checks the IBAN shape: country code, check digits, then up to 30 alphanumerics. */
39 function isValidIban(raw: string): boolean {
40 const iban = raw.replace(/\s/g, "").toUpperCase();
41 return /^[A-Z]{2}\d{2}[A-Z0-9]{11,30}$/.test(iban);
42 }
43
44 const accountOptions = data.accounts.map((account) => ({
45 label: account.name,
46 value: account.id,
47 }));
48
49 export default function SepaTransferPage() {
50 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
51 const [beneficiary, setBeneficiary] = useState("");
52 const [iban, setIban] = useState("");
53 const [amount, setAmount] = useState("");
54 const [reference, setReference] = useState("");
55 const [showErrors, setShowErrors] = useState(false);
56 const [sent, setSent] = useState<{ amount: number; beneficiary: string } | null>(null);
57
58 const account = data.accounts.find((item) => item.id === accountId) ?? data.accounts[0];
59 const amountValue = parseAmount(amount);
60 const exceedsBalance = amountValue !== null && amountValue > account.available;
61
62 let amountError: string | undefined;
63 if (amount.trim() === "") {
64 amountError = showErrors ? "Enter an amount." : undefined;
65 } else if (amountValue === null) {
66 amountError = "Enter an amount such as 250.00.";
67 } else if (amountValue <= 0) {
68 amountError = "Enter an amount greater than zero.";
69 } else if (exceedsBalance) {
70 amountError = `The amount is higher than the available balance of ${formatMoney(account.available)}.`;
71 }
72
73 const beneficiaryError =
74 showErrors && beneficiary.trim() === "" ? "Enter the beneficiary name." : undefined;
75 const ibanError =
76 showErrors && !isValidIban(iban) ? "Enter a valid IBAN, such as IT60 X054 2811 1010 0000 0123 456." : undefined;
77
78 function handleSubmit(event: FormEvent<HTMLFormElement>) {
79 event.preventDefault();
80 setShowErrors(true);
81
82 const hasError =
83 beneficiary.trim() === "" ||
84 !isValidIban(iban) ||
85 amountValue === null ||
86 amountValue <= 0 ||
87 exceedsBalance;
88
89 if (hasError || amountValue === null) {
90 return;
91 }
92
93 setSent({ amount: amountValue, beneficiary: beneficiary.trim() });
94 }
95
96 function resetForm() {
97 setBeneficiary("");
98 setIban("");
99 setAmount("");
100 setReference("");
101 setShowErrors(false);
102 setSent(null);
103 }
104
105 if (sent) {
106 return (
107 <main className={`vektos ${css({ minHeight: "full", bg: "bg.canvas", color: "fg.default", p: "6" })}`}>
108 <div className={css({ maxWidth: "md", mx: "auto" })}>
109 <Card>
110 <CardHeader>
111 <CardTitle>Transfer submitted</CardTitle>
112 <CardDescription>Your SEPA transfer has been sent.</CardDescription>
113 </CardHeader>
114 <CardBody>
115 <p role="status" className={css({ fontSize: "md", color: "success.text" })}>
116 You sent {formatMoney(sent.amount)} to {sent.beneficiary}.
117 </p>
118 </CardBody>
119 <CardFooter>
120 <Button variant="outline" size="sm" onClick={resetForm}>
121 New transfer
122 </Button>
123 </CardFooter>
124 </Card>
125 </div>
126 </main>
127 );
128 }
129
130 return (
131 <main className={`vektos ${css({ minHeight: "full", bg: "bg.canvas", color: "fg.default", p: "6" })}`}>
132 <div className={css({ maxWidth: "md", mx: "auto" })}>
133 <Card>
134 <form onSubmit={handleSubmit} noValidate>
135 <CardHeader>
136 <CardTitle>Send a SEPA transfer</CardTitle>
137 <CardDescription>Transfers are sent in euros.</CardDescription>
138 </CardHeader>
139 <CardBody>
140 <div className={css({ display: "flex", flexDirection: "column", gap: "4" })}>
141 <FormField label="From account">
142 <Select
143 options={accountOptions}
144 value={accountId}
145 onValueChange={(value) => setAccountId(value)}
146 name="account"
147 />
148 </FormField>
149
150 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
151 Available balance:{" "}
152 <span className={css({ fontWeight: "semibold", color: "fg.default" })}>
153 {formatMoney(account.available)}
154 </span>
155 </p>
156
157 <FormField label="Beneficiary name" error={beneficiaryError}>
158 <Input
159 name="beneficiary"
160 autoComplete="off"
161 required
162 value={beneficiary}
163 onChange={(event) => setBeneficiary(event.target.value)}
164 />
165 </FormField>
166
167 <FormField
168 label="Beneficiary IBAN"
169 error={ibanError}
170 helperText="Letters and digits. Spaces are optional."
171 >
172 <Input
173 name="iban"
174 autoComplete="off"
175 spellCheck={false}
176 required
177 value={iban}
178 onChange={(event) => setIban(event.target.value)}
179 />
180 </FormField>
181
182 <FormField
183 label="Amount"
184 error={amountError}
185 helperText={`In ${data.currency}, for example 250.00.`}
186 >
187 <Input
188 name="amount"
189 inputMode="decimal"
190 placeholder="0.00"
191 required
192 value={amount}
193 onChange={(event) => setAmount(event.target.value)}
194 />
195 </FormField>
196
197 <FormField label="Reference" helperText="Optional. Up to 140 characters.">
198 <Input
199 name="reference"
200 maxLength={140}
201 value={reference}
202 onChange={(event) => setReference(event.target.value)}
203 />
204 </FormField>
205 </div>
206 </CardBody>
207 <CardFooter>
208 <Button type="submit" size="sm" disabled={exceedsBalance}>
209 Send transfer
210 </Button>
211 </CardFooter>
212 </form>
213 </Card>
214 </div>
215 </main>
216 );
217 }
218
3 check_code 15,049 2,671 $0.0028
4 check_code 17,870 2,874 $0.0032