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 None. The run followed every rule that was checked.
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, list_files, list_components 135 95 $0.0014 1 read_file, get_component, get_component, get_component, get_component, get_component, list_tokens 1,814 233 $0.0062 2 write_file 4,270 7,375 $0.0829
e02ef3974528
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 accountOptions = data.accounts.map((account) => ({
20 label: account.name,
21 value: account.id,
22 }));
23
24 const initialAccount =
25 data.accounts.find((account) => account.id === data.defaultAccountId) ??
26 data.accounts[0]!;
27
28 const currencyFormatter = new Intl.NumberFormat("en-IE", {
29 style: "currency",
30 currency: data.currency,
31 minimumFractionDigits: 2,
32 maximumFractionDigits: 2,
33 });
34
35 function formatCurrency(amount: number) {
36 return currencyFormatter.format(amount);
37 }
38
39 function parseAmount(value: string) {
40 const normalized = value.trim().replace(",", ".");
41
42 if (!/^\d+(?:\.\d{1,2})?$/.test(normalized)) {
43 return null;
44 }
45
46 const parsed = Number(normalized);
47 return Number.isFinite(parsed) ? parsed : null;
48 }
49
50 type FieldErrors = {
51 beneficiaryName?: string;
52 iban?: string;
53 amount?: string;
54 };
55
56 function clearFieldError(errors: FieldErrors, field: keyof FieldErrors): FieldErrors {
57 const nextErrors = { ...errors };
58 delete nextErrors[field];
59 return nextErrors;
60 }
61
62 type Confirmation = {
63 amount: number;
64 beneficiary: string;
65 };
66
67 export default function SepaTransferPage() {
68 const [accountId, setAccountId] = useState(initialAccount.id);
69 const [beneficiaryName, setBeneficiaryName] = useState("");
70 const [iban, setIban] = useState("");
71 const [amount, setAmount] = useState("");
72 const [reference, setReference] = useState("");
73 const [errors, setErrors] = useState<FieldErrors>({});
74 const [confirmation, setConfirmation] = useState<Confirmation | null>(null);
75
76 const selectedAccount =
77 data.accounts.find((account) => account.id === accountId) ?? initialAccount;
78 const parsedAmount = parseAmount(amount);
79 const exceedsBalance =
80 parsedAmount !== null && parsedAmount > selectedAccount.available;
81 const balanceError = exceedsBalance
82 ? `Amount exceeds the available balance of ${formatCurrency(selectedAccount.available)}.`
83 : undefined;
84
85 function handleAccountChange(value: string) {
86 setAccountId(value);
87 setErrors((current) => clearFieldError(current, "amount"));
88 setConfirmation(null);
89 }
90
91 function handleSubmit(event: FormEvent<HTMLFormElement>) {
92 event.preventDefault();
93
94 const nextErrors: FieldErrors = {};
95 const trimmedName = beneficiaryName.trim();
96 const normalizedIban = iban.replace(/\s/g, "").toUpperCase();
97
98 if (!trimmedName) {
99 nextErrors.beneficiaryName = "Enter the beneficiary name.";
100 }
101
102 if (!normalizedIban) {
103 nextErrors.iban = "Enter the beneficiary IBAN.";
104 } else if (!/^[A-Z]{2}\d{2}[A-Z0-9]{11,30}$/.test(normalizedIban)) {
105 nextErrors.iban = "Enter a valid IBAN.";
106 }
107
108 if (!amount.trim()) {
109 nextErrors.amount = "Enter an amount.";
110 } else if (parsedAmount === null) {
111 nextErrors.amount = "Enter a valid amount with up to two decimal places.";
112 } else if (parsedAmount <= 0) {
113 nextErrors.amount = "Enter an amount greater than zero.";
114 } else if (parsedAmount > selectedAccount.available) {
115 nextErrors.amount = `Amount exceeds the available balance of ${formatCurrency(selectedAccount.available)}.`;
116 }
117
118 setErrors(nextErrors);
119
120 if (
121 Object.keys(nextErrors).length > 0 ||
122 parsedAmount === null ||
123 parsedAmount <= 0 ||
124 parsedAmount > selectedAccount.available
125 ) {
126 setConfirmation(null);
127 return;
128 }
129
130 setConfirmation({ amount: parsedAmount, beneficiary: trimmedName });
131 setBeneficiaryName("");
132 setIban("");
133 setAmount("");
134 setReference("");
135 setErrors({});
136 }
137
138 return (
139 <main
140 className={`vektos ${css({
141 bg: "bg.canvas",
142 color: "fg.default",
143 px: "4",
144 py: "8",
145 })}`}
146 >
147 <div className={css({ maxWidth: "md", mx: "auto", width: "full" })}>
148 <header className={css({ marginBlockEnd: "6" })}>
149 <h1 className={css({ fontSize: "lg", fontWeight: "semibold" })}>
150 Send a SEPA transfer
151 </h1>
152 <p
153 className={css({
154 color: "fg.muted",
155 fontSize: "sm",
156 marginBlockStart: "1",
157 })}
158 >
159 Send euros from one of your accounts to a SEPA beneficiary.
160 </p>
161 </header>
162
163 {confirmation && (
164 <output
165 aria-live="polite"
166 className={css({
167 display: "block",
168 bg: "success.subtle",
169 color: "success.text",
170 rounded: "md",
171 p: "4",
172 marginBlockEnd: "4",
173 })}
174 >
175 <span
176 className={css({
177 display: "block",
178 fontWeight: "semibold",
179 fontSize: "sm",
180 })}
181 >
182 Transfer sent
183 </span>
184 <span
185 className={css({
186 display: "block",
187 fontSize: "sm",
188 marginBlockStart: "1",
189 })}
190 >
191 {formatCurrency(confirmation.amount)} sent to {confirmation.beneficiary}.
192 </span>
193 </output>
194 )}
195
196 <form onSubmit={handleSubmit} noValidate>
197 <Card>
198 <CardHeader>
199 <CardTitle asChild>
200 <h2>Transfer details</h2>
201 </CardTitle>
202 <CardDescription>
203 Complete the beneficiary and payment information below.
204 </CardDescription>
205 </CardHeader>
206
207 <CardBody
208 className={css({ display: "flex", flexDirection: "column", gap: "6" })}
209 >
210 <div
211 className={css({ display: "flex", flexDirection: "column", gap: "3" })}
212 >
213 <FormField label="Pay from">
214 <Select
215 name="accountId"
216 options={accountOptions}
217 value={accountId}
218 onValueChange={handleAccountChange}
219 />
220 </FormField>
221
222 <div
223 aria-live="polite"
224 className={css({
225 bg: "bg.subtle",
226 rounded: "md",
227 p: "4",
228 display: "flex",
229 flexWrap: "wrap",
230 gap: "4",
231 })}
232 >
233 <div>
234 <p className={css({ color: "fg.muted", fontSize: "xs" })}>
235 Account IBAN
236 </p>
237 <p
238 className={css({
239 fontSize: "sm",
240 marginBlockStart: "1",
241 overflowWrap: "anywhere",
242 })}
243 >
244 {selectedAccount.iban}
245 </p>
246 </div>
247 <div className={css({ marginInlineStart: "auto" })}>
248 <p className={css({ color: "fg.muted", fontSize: "xs" })}>
249 Available balance
250 </p>
251 <p
252 className={css({
253 fontSize: "sm",
254 fontWeight: "semibold",
255 marginBlockStart: "1",
256 })}
257 >
258 {formatCurrency(selectedAccount.available)}
259 </p>
260 </div>
261 </div>
262 </div>
263
264 <FormField label="Beneficiary name" error={errors.beneficiaryName}>
265 <Input
266 name="beneficiaryName"
267 value={beneficiaryName}
268 onChange={(event) => {
269 setBeneficiaryName(event.target.value);
270 setErrors((current) => clearFieldError(current, "beneficiaryName"));
271 setConfirmation(null);
272 }}
273 placeholder="Name or company name"
274 autoComplete="off"
275 required
276 />
277 </FormField>
278
279 <FormField
280 label="Beneficiary IBAN"
281 helperText="Enter the IBAN with or without spaces."
282 error={errors.iban}
283 >
284 <Input
285 name="iban"
286 value={iban}
287 onChange={(event) => {
288 setIban(event.target.value.toUpperCase());
289 setErrors((current) => clearFieldError(current, "iban"));
290 setConfirmation(null);
291 }}
292 placeholder="DE89 3704 0044 0532 0130 00"
293 autoComplete="off"
294 autoCapitalize="characters"
295 spellCheck={false}
296 maxLength={42}
297 required
298 />
299 </FormField>
300
301 <FormField
302 label={`Amount (${data.currency})`}
303 helperText="Enter an amount with up to two decimal places."
304 error={errors.amount ?? balanceError}
305 >
306 <Input
307 name="amount"
308 value={amount}
309 onChange={(event) => {
310 setAmount(event.target.value);
311 setErrors((current) => clearFieldError(current, "amount"));
312 setConfirmation(null);
313 }}
314 inputMode="decimal"
315 autoComplete="off"
316 placeholder="0.00"
317 required
318 />
319 </FormField>
320
321 <FormField
322 label="Reference (optional)"
323 helperText="Add a note for the beneficiary, up to 140 characters."
324 >
325 <Input
326 name="reference"
327 value={reference}
328 onChange={(event) => setReference(event.target.value)}
329 placeholder="Invoice or payment reference"
330 maxLength={140}
331 />
332 </FormField>
333 </CardBody>
334
335 <CardFooter>
336 <Button type="submit" disabled={exceedsBalance}>
337 Send SEPA transfer
338 </Button>
339 </CardFooter>
340 </Card>
341 </form>
342 </div>
343 </main>
344 );
345 }
346
3 check_code 7,460 2,190 $0.0382
4 write_file 2,739 2,654 $0.0349
5 read_file 2,744 114 $0.0101
6 check_code 2,410 2,279 $0.0316