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 5 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, list_tokens 1,751 162 $0.0003 1 get_component, get_component, get_component, get_component, get_component 6,214 229 $0.0007 2 check_code 9,605 8,672 $0.0053
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 formatter = new Intl.NumberFormat("en-GB", {
20 style: "currency",
21 currency: data.currency,
22 });
23 const formatMoney = (value: number) => formatter.format(value);
24
25 const AMOUNT_PATTERN = /^\d+([.,]\d{1,2})?$/;
26
27 function parseAmount(raw: string): number | null {
28 const trimmed = raw.trim();
29 if (!AMOUNT_PATTERN.test(trimmed)) return null;
30 return Number(trimmed.replace(",", "."));
31 }
32
33 type Confirmation = {
34 amount: number;
35 beneficiary: string;
36 reference: string;
37 };
38
39 const pageStyles = css({
40 display: "flex",
41 justifyContent: "center",
42 alignItems: "flex-start",
43 bg: "bg.canvas",
44 color: "fg.default",
45 p: "6",
46 });
47
48 const cardStyles = css({
49 width: "full",
50 maxWidth: "lg",
51 });
52
53 const formStyles = css({
54 display: "flex",
55 flexDirection: "column",
56 gap: "4",
57 });
58
59 const actionRowStyles = css({
60 display: "flex",
61 justifyContent: "flex-end",
62 });
63
64 const confirmationTextStyles = css({
65 fontSize: "lg",
66 fontWeight: "semibold",
67 color: "success.text",
68 });
69
70 const referenceStyles = css({
71 color: "fg.muted",
72 fontSize: "sm",
73 });
74
75 export default function SepaTransferPage() {
76 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
77 const [beneficiaryName, setBeneficiaryName] = useState("");
78 const [iban, setIban] = useState("");
79 const [amount, setAmount] = useState("");
80 const [reference, setReference] = useState("");
81 const [attempted, setAttempted] = useState(false);
82 const [confirmation, setConfirmation] = useState<Confirmation | null>(null);
83
84 const account =
85 data.accounts.find((item) => item.id === accountId) ?? data.accounts[0];
86 const amountValue = parseAmount(amount);
87
88 let amountError: string | undefined;
89 if (amount.trim() !== "" && amountValue === null) {
90 amountError = "Enter an amount with up to two decimals, such as 125.50.";
91 } else if (amountValue !== null && amountValue <= 0) {
92 amountError = "Enter an amount greater than zero.";
93 } else if (amountValue !== null && amountValue > account.available) {
94 amountError = `The amount is higher than the available balance of ${formatMoney(account.available)}.`;
95 }
96
97 const displayedAmountError =
98 amountError ??
99 (attempted && amount.trim() === "" ? "Enter an amount." : undefined);
100 const nameError =
101 attempted && beneficiaryName.trim() === ""
102 ? "Enter the beneficiary name."
103 : undefined;
104 const ibanError =
105 attempted && iban.trim() === "" ? "Enter the beneficiary IBAN." : undefined;
106
107 function handleSubmit(event: FormEvent<HTMLFormElement>) {
108 event.preventDefault();
109 setAttempted(true);
110
111 const isValid =
112 amountError === undefined &&
113 amountValue !== null &&
114 amountValue > 0 &&
115 amountValue <= account.available &&
116 beneficiaryName.trim() !== "" &&
117 iban.trim() !== "";
118
119 if (!isValid || amountValue === null) return;
120
121 setConfirmation({
122 amount: amountValue,
123 beneficiary: beneficiaryName.trim(),
124 reference: reference.trim(),
125 });
126 }
127
128 function resetForm() {
129 setAccountId(data.defaultAccountId);
130 setBeneficiaryName("");
131 setIban("");
132 setAmount("");
133 setReference("");
134 setAttempted(false);
135 setConfirmation(null);
136 }
137
138 if (confirmation) {
139 return (
140 <main className={pageStyles}>
141 <Card className={cardStyles}>
142 <CardHeader>
143 <CardTitle>Transfer submitted</CardTitle>
144 <CardDescription>
145 Your SEPA transfer has been sent for processing.
146 </CardDescription>
147 </CardHeader>
148 <CardBody>
149 <p role="status" className={confirmationTextStyles}>
150 {formatMoney(confirmation.amount)} to {confirmation.beneficiary}
151 </p>
152 {confirmation.reference !== "" && (
153 <p className={referenceStyles}>
154 Reference: {confirmation.reference}
155 </p>
156 )}
157 </CardBody>
158 <CardFooter>
159 <Button variant="outline" size="sm" onClick={resetForm}>
160 New transfer
161 </Button>
162 </CardFooter>
163 </Card>
164 </main>
165 );
166 }
167
168 return (
169 <main className={pageStyles}>
170 <Card className={cardStyles}>
171 <CardHeader>
172 <CardTitle>Send a SEPA transfer</CardTitle>
173 <CardDescription>
174 Choose the account to pay from and enter the beneficiary details.
175 </CardDescription>
176 </CardHeader>
177 <CardBody>
178 <form className={formStyles} noValidate onSubmit={handleSubmit}>
179 <FormField
180 label="Pay from"
181 helperText={`Available balance: ${formatMoney(account.available)}`}
182 >
183 <Select
184 name="account"
185 value={accountId}
186 onValueChange={setAccountId}
187 options={data.accounts.map((item) => ({
188 label: item.name,
189 value: item.id,
190 }))}
191 />
192 </FormField>
193
194 <FormField label="Beneficiary name" error={nameError} required>
195 <Input
196 name="beneficiaryName"
197 autoComplete="off"
198 value={beneficiaryName}
199 onChange={(event) => setBeneficiaryName(event.target.value)}
200 required
201 />
202 </FormField>
203
204 <FormField label="Beneficiary IBAN" error={ibanError} required>
205 <Input
206 name="iban"
207 autoComplete="off"
208 spellCheck={false}
209 placeholder="IT00 0000 0000 0000 0000 0000 000"
210 value={iban}
211 onChange={(event) => setIban(event.target.value)}
212 required
213 />
214 </FormField>
215
216 <FormField
217 label="Amount (EUR)"
218 helperText="Cannot be higher than the available balance."
219 error={displayedAmountError}
220 required
221 >
222 <Input
223 name="amount"
224 inputMode="decimal"
225 placeholder="0.00"
226 value={amount}
227 onChange={(event) => setAmount(event.target.value)}
228 required
229 />
230 </FormField>
231
232 <FormField label="Reference (optional)">
233 <Input
234 name="reference"
235 autoComplete="off"
236 value={reference}
237 onChange={(event) => setReference(event.target.value)}
238 />
239 </FormField>
240
241 <div className={actionRowStyles}>
242 <Button type="submit" disabled={amountError !== undefined}>
243 Send transfer
244 </Button>
245 </div>
246 </form>
247 </CardBody>
248 </Card>
249 </main>
250 );
251 }
252
3 write_file 18,286 2,684 $0.0032