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 list_files, read_file 275 63 $0.0002 1 get_guidelines, list_components 293 38 $0.0001 2 get_component, get_component, get_component, get_component 1,786 128 $0.0007
e02ef3974528
Output cap The provider's default 4 import {
5 Badge,
6 Button,
7 Card,
8 CardBody,
9 CardDescription,
10 CardFooter,
11 CardHeader,
12 CardTitle,
13 FormField,
14 Input,
15 Select,
16 } from "@vektos/ds";
17 import { css, cx } from "styled-system/css";
18 import data from "./fixture.json";
19
20 type Account = (typeof data.accounts)[number];
21
22 type Confirmation = {
23 amount: number;
24 beneficiary: string;
25 iban: string;
26 reference: string;
27 accountName: string;
28 };
29
30 const accounts: Account[] = data.accounts;
31
32 const moneyFormat = new Intl.NumberFormat("en-IE", {
33 style: "currency",
34 currency: data.currency,
35 minimumFractionDigits: 2,
36 });
37
38 function formatMoney(value: number): string {
39 return moneyFormat.format(value);
40 }
41
42 function parseAmount(raw: string): number | null {
43 const normalized = raw.replace(",", ".").trim();
44 if (normalized === "" || normalized === ".") return null;
45 if (!/^\d*\.?\d*$/.test(normalized)) return null;
46 return Number(normalized);
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 [confirmation, setConfirmation] = useState<Confirmation | null>(null);
57
58 const selectedAccount = accounts.find((account) => account.id === accountId);
59 const available = selectedAccount ? selectedAccount.available : 0;
60 const amountValue = parseAmount(amount);
61
62 let amountError: string | undefined;
63 if (amountValue === null) {
64 amountError = showErrors ? "Enter the amount you want to send." : undefined;
65 } else if (amountValue <= 0) {
66 amountError = "Enter an amount greater than zero.";
67 } else if (selectedAccount && amountValue > selectedAccount.available) {
68 amountError = `Amount is higher than the available balance of ${formatMoney(
69 selectedAccount.available,
70 )}.`;
71 }
72
73 const beneficiaryError =
74 showErrors && beneficiary.trim() === ""
75 ? "Enter the beneficiary name."
76 : undefined;
77 const ibanError =
78 showErrors && iban.trim() === ""
79 ? "Enter the beneficiary IBAN."
80 : undefined;
81
82 const amountBlocksSubmit = amountValue !== null && amountError !== undefined;
83
84 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
85 event.preventDefault();
86 setShowErrors(true);
87
88 if (
89 amountValue === null ||
90 amountError !== undefined ||
91 beneficiary.trim() === "" ||
92 iban.trim() === ""
93 ) {
94 return;
95 }
96
97 setConfirmation({
98 amount: amountValue,
99 beneficiary: beneficiary.trim(),
100 iban: iban.trim(),
101 reference: reference.trim(),
102 accountName: selectedAccount ? selectedAccount.name : "",
103 });
104 }
105
106 function resetForm() {
107 setConfirmation(null);
108 setShowErrors(false);
109 setAccountId(data.defaultAccountId);
110 setBeneficiary("");
111 setIban("");
112 setAmount("");
113 setReference("");
114 }
115
116 return (
117 <main
118 className={cx(
119 "vektos",
120 css({
121 minHeight: "full",
122 bg: "bg.canvas",
123 color: "fg.default",
124 p: "8",
125 }),
126 )}
127 >
128 <div
129 className={css({
130 maxWidth: "lg",
131 mx: "auto",
132 display: "flex",
133 flexDirection: "column",
134 gap: "4",
135 })}
136 >
137 {confirmation ? (
138 <Card>
139 <CardHeader>
140 <CardTitle asChild>
141 <h1>Transfer sent</h1>
142 </CardTitle>
143 <CardDescription>
144 SEPA transfers usually arrive within one business day.
145 </CardDescription>
146 </CardHeader>
147 <CardBody>
148 <div
149 className={css({
150 display: "flex",
151 alignItems: "center",
152 gap: "3",
153 })}
154 >
155 <Badge tone="success">Sent</Badge>
156 <span className={css({ fontSize: "lg", fontWeight: "semibold" })}>
157 {formatMoney(confirmation.amount)}
158 </span>
159 </div>
160 <p
161 className={css({
162 marginBlockStart: "2",
163 fontSize: "sm",
164 color: "fg.muted",
165 })}
166 >
167 to{" "}
168 <span className={css({ color: "fg.default" })}>
169 {confirmation.beneficiary}
170 </span>{" "}
171 ({confirmation.iban}) from {confirmation.accountName}.
172 </p>
173 {confirmation.reference ? (
174 <p
175 className={css({
176 marginBlockStart: "1",
177 fontSize: "sm",
178 color: "fg.muted",
179 })}
180 >
181 Reference: {confirmation.reference}
182 </p>
183 ) : null}
184 </CardBody>
185 <CardFooter>
186 <Button onClick={resetForm}>Make another transfer</Button>
187 </CardFooter>
188 </Card>
189 ) : (
190 <form onSubmit={handleSubmit} noValidate>
191 <Card>
192 <CardHeader>
193 <CardTitle asChild>
194 <h1>Send a SEPA transfer</h1>
195 </CardTitle>
196 <CardDescription>
197 Pick the account to pay from, then the beneficiary and the
198 amount.
199 </CardDescription>
200 </CardHeader>
201 <CardBody>
202 <div
203 className={css({
204 display: "flex",
205 flexDirection: "column",
206 gap: "4",
207 })}
208 >
209 <FormField
210 label="Pay from"
211 helperText={`Available balance ${formatMoney(available)}`}
212 >
213 <Select
214 value={accountId}
215 onValueChange={setAccountId}
216 options={accounts.map((account) => ({
217 label: account.name,
218 value: account.id,
219 }))}
220 />
221 </FormField>
222
223 <FormField label="Beneficiary name" error={beneficiaryError}>
224 <Input
225 value={beneficiary}
226 onChange={(event) => setBeneficiary(event.target.value)}
227 placeholder="Northwind Ltd"
228 autoComplete="off"
229 />
230 </FormField>
231
232 <FormField
233 label="Beneficiary IBAN"
234 helperText="The account the money is sent to."
235 error={ibanError}
236 >
237 <Input
238 value={iban}
239 onChange={(event) => setIban(event.target.value)}
240 placeholder="IT60 X054 2811 1010 0000 0123 456"
241 autoComplete="off"
242 />
243 </FormField>
244
245 <FormField
246 label="Amount"
247 helperText={`In ${data.currency}, taken from the selected account.`}
248 error={amountError}
249 >
250 <Input
251 inputMode="decimal"
252 value={amount}
253 onChange={(event) => setAmount(event.target.value)}
254 placeholder="0.00"
255 autoComplete="off"
256 />
257 </FormField>
258
259 <FormField
260 label="Reference"
261 helperText="Optional. Shown on your statement."
262 >
263 <Input
264 value={reference}
265 onChange={(event) => setReference(event.target.value)}
266 placeholder="Invoice 2026-114"
267 autoComplete="off"
268 />
269 </FormField>
270 </div>
271 </CardBody>
272 <CardFooter>
273 <Button type="submit" disabled={amountBlocksSubmit}>
274 Send transfer
275 </Button>
276 </CardFooter>
277 </Card>
278 </form>
279 )}
280 </div>
281 </main>
282 );
283 }
284
get_component, get_component, list_tokens
4 list_tokens, list_tokens 2,346 128 $0.0009
5 list_tokens, list_tokens 401 1,041 $0.0014
6 write_file 1,381 6,992 $0.0089
7 check_code 7,114 1,809 $0.0044