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 3 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 read_file, docs-list 5,393 126 $0.0006 1 docs-show, docs-show, docs-show, docs-show, docs-show 6,248 230 $0.0007 2 write_file 10,315 5,183 $0.0036
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 type FieldErrors = {
20 beneficiary?: string;
21 iban?: string;
22 amount?: string;
23 };
24
25 type Sent = {
26 amount: number;
27 beneficiary: string;
28 };
29
30 const currencyFormatter = new Intl.NumberFormat("en-IE", {
31 style: "currency",
32 currency: data.currency,
33 });
34
35 function formatAmount(value: number): string {
36 return currencyFormatter.format(value);
37 }
38
39 // Accepts "1200", "1200.5", "1200,50". Returns null when the text is not a positive amount.
40 function parseAmount(raw: string): number | null {
41 const normalized = raw.trim().replace(",", ".");
42 if (!/^\d+(\.\d{1,2})?$/.test(normalized)) return null;
43 const value = Number(normalized);
44 return value > 0 ? value : null;
45 }
46
47 function normalizeIban(raw: string): string {
48 return raw.replace(/\s/g, "").toUpperCase();
49 }
50
51 function isValidIban(iban: string): boolean {
52 return /^[A-Z]{2}\d{2}[A-Z0-9]{11,30}$/.test(iban);
53 }
54
55 const accountOptions = data.accounts.map((account) => ({
56 label: account.name,
57 value: account.id,
58 }));
59
60 const formStack = css({
61 display: "flex",
62 flexDirection: "column",
63 gap: "4",
64 });
65
66 const pageWrap = css({
67 maxWidth: "520px",
68 marginInline: "auto",
69 padding: "6",
70 });
71
72 const confirmationText = css({
73 fontSize: "md",
74 lineHeight: "relaxed",
75 });
76
77 export default function Page() {
78 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
79 const [beneficiary, setBeneficiary] = useState("");
80 const [iban, setIban] = useState("");
81 const [amount, setAmount] = useState("");
82 const [reference, setReference] = useState("");
83 const [errors, setErrors] = useState<FieldErrors>({});
84 const [sent, setSent] = useState<Sent | null>(null);
85
86 const account =
87 data.accounts.find((item) => item.id === accountId) ?? data.accounts[0];
88
89 const parsedAmount = parseAmount(amount);
90 const exceedsBalance =
91 parsedAmount !== null && parsedAmount > account.available;
92
93 // Live amount message: formatting problems and balance overruns are shown as the user types.
94 const amountError =
95 amount.trim() !== "" && parsedAmount === null
96 ? "Enter an amount greater than zero, with up to two decimals."
97 : exceedsBalance
98 ? `The amount is higher than the available balance of ${formatAmount(account.available)}.`
99 : undefined;
100
101 const shownAmountError = amountError ?? errors.amount;
102
103 function handleSubmit(event: FormEvent<HTMLFormElement>) {
104 event.preventDefault();
105
106 const next: FieldErrors = {};
107
108 if (!beneficiary.trim()) {
109 next.beneficiary = "Enter the beneficiary name.";
110 }
111 if (!isValidIban(normalizeIban(iban))) {
112 next.iban = "Enter a valid IBAN, for example IT60 X054 2811 1010 0000 0123 456.";
113 }
114 if (amountError) {
115 next.amount = amountError;
116 } else if (parsedAmount === null) {
117 next.amount = "Enter the amount to transfer.";
118 }
119
120 setErrors(next);
121
122 if (Object.keys(next).length > 0 || parsedAmount === null || exceedsBalance) {
123 return;
124 }
125
126 setSent({ amount: parsedAmount, beneficiary: beneficiary.trim() });
127 }
128
129 function resetForm() {
130 setBeneficiary("");
131 setIban("");
132 setAmount("");
133 setReference("");
134 setErrors({});
135 setSent(null);
136 }
137
138 if (sent) {
139 return (
140 <main className={pageWrap}>
141 <Card>
142 <CardHeader>
143 <CardTitle>Transfer sent</CardTitle>
144 <CardDescription>Your SEPA transfer has been submitted.</CardDescription>
145 </CardHeader>
146 <CardBody>
147 <p className={confirmationText}>
148 You sent {formatAmount(sent.amount)} to {sent.beneficiary}.
149 </p>
150 </CardBody>
151 <CardFooter>
152 <Button variant="outline" size="sm" onClick={resetForm}>
153 New transfer
154 </Button>
155 </CardFooter>
156 </Card>
157 </main>
158 );
159 }
160
161 return (
162 <main className={pageWrap}>
163 <Card>
164 <CardHeader>
165 <CardTitle>SEPA transfer</CardTitle>
166 <CardDescription>Send money from one of your accounts.</CardDescription>
167 </CardHeader>
168 <form onSubmit={handleSubmit} noValidate>
169 <CardBody>
170 <div className={formStack}>
171 <FormField
172 label="From account"
173 helperText={`Available balance: ${formatAmount(account.available)}`}
174 required
175 >
176 <Select
177 name="account"
178 options={accountOptions}
179 value={accountId}
180 onValueChange={setAccountId}
181 />
182 </FormField>
183
184 <FormField
185 label="Beneficiary name"
186 error={errors.beneficiary}
187 required
188 >
189 <Input
190 name="beneficiary"
191 autoComplete="off"
192 value={beneficiary}
193 onChange={(event) => setBeneficiary(event.target.value)}
194 />
195 </FormField>
196
197 <FormField
198 label="Beneficiary IBAN"
199 helperText="Starts with the country code, for example IT or DE."
200 error={errors.iban}
201 required
202 >
203 <Input
204 name="iban"
205 autoComplete="off"
206 spellCheck={false}
207 value={iban}
208 onChange={(event) => setIban(event.target.value)}
209 />
210 </FormField>
211
212 <FormField
213 label="Amount"
214 helperText={`In ${data.currency}, without the symbol.`}
215 error={shownAmountError}
216 required
217 >
218 <Input
219 name="amount"
220 inputMode="decimal"
221 placeholder="0.00"
222 value={amount}
223 onChange={(event) => setAmount(event.target.value)}
224 />
225 </FormField>
226
227 <FormField label="Reference (optional)">
228 <Input
229 name="reference"
230 autoComplete="off"
231 value={reference}
232 onChange={(event) => setReference(event.target.value)}
233 />
234 </FormField>
235 </div>
236 </CardBody>
237 <CardFooter>
238 <Button type="submit" size="md" disabled={exceedsBalance}>
239 Send transfer
240 </Button>
241 </CardFooter>
242 </form>
243 </Card>
244 </main>
245 );
246 }
247
No overload matches this call.