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 3 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 get_guidelines, read_file, list_components 1,559 135 $0.0002 1 get_component, get_component, get_component, get_component, get_component, list_tokens 4,252 276 $0.0006 2 list_tokens 8,682 272 $0.0010
Output cap The provider's default 4 import {
5 Button,
6 Card,
7 CardBody,
8 CardFooter,
9 CardHeader,
10 CardTitle,
11 FormField,
12 Input,
13 Select,
14 } from "@vektos/ds";
15 import { css } from "styled-system/css";
16 import data from "./fixture.json";
17
18 const money = new Intl.NumberFormat("en-IE", {
19 style: "currency",
20 currency: data.currency,
21 });
22
23 const AMOUNT_PATTERN = /^\d+(\.\d{1,2})?$/;
24 const IBAN_PATTERN = /^[A-Z]{2}\d{2}[A-Z0-9]{11,30}$/;
25
26 type Fields = {
27 beneficiary: string;
28 iban: string;
29 amount: string;
30 };
31
32 type Errors = Partial<Record<keyof Fields, string>>;
33
34 /** Parses the amount typed by the user. Accepts "." or "," as decimal separator. */
35 function parseAmount(raw: string): number | null {
36 const normalized = raw.trim().replace(",", ".");
37 return AMOUNT_PATTERN.test(normalized) ? Number(normalized) : null;
38 }
39
40 /**
41 * Validates the form. Over-balance is always reported; the other rules
42 * only apply once `requireAll` is true (after the first submit attempt),
43 * so the user is not told "required" while still typing.
44 */
45 function validate(fields: Fields, available: number, requireAll: boolean): Errors {
46 const errors: Errors = {};
47
48 const beneficiary = fields.beneficiary.trim();
49 if (beneficiary === "" && requireAll) {
50 errors.beneficiary = "Enter the beneficiary name.";
51 }
52
53 const iban = fields.iban.replace(/\s+/g, "").toUpperCase();
54 if (iban === "") {
55 if (requireAll) errors.iban = "Enter the beneficiary IBAN.";
56 } else if (requireAll && !IBAN_PATTERN.test(iban)) {
57 errors.iban = "Enter a valid IBAN.";
58 }
59
60 const raw = fields.amount.trim();
61 const value = parseAmount(raw);
62 if (raw === "") {
63 if (requireAll) errors.amount = "Enter an amount.";
64 } else if (value === null) {
65 if (requireAll) {
66 errors.amount = "Enter an amount with up to two decimals, for example 120.50.";
67 }
68 } else if (value > available) {
69 errors.amount = `The amount is higher than the available balance of ${money.format(available)}.`;
70 } else if (value <= 0 && requireAll) {
71 errors.amount = "Enter an amount greater than zero.";
72 }
73
74 return errors;
75 }
76
77 type Confirmation = {
78 amount: number;
79 beneficiary: string;
80 };
81
82 export default function SepaTransferPage() {
83 const [accountId, setAccountId] = useState(data.defaultAccountId);
84 const [fields, setFields] = useState<Fields>({
85 beneficiary: "",
86 iban: "",
87 amount: "",
88 });
89 const [reference, setReference] = useState("");
90 const [attempted, setAttempted] = useState(false);
91 const [confirmation, setConfirmation] = useState<Confirmation | null>(null);
92
93 const account = data.accounts.find((a) => a.id === accountId);
94 const available = account?.available ?? 0;
95
96 const errors = validate(fields, available, attempted);
97 const amountValue = parseAmount(fields.amount);
98 const overBalance = amountValue !== null && amountValue > available;
99
100 function update(name: keyof Fields, value: string) {
101 setFields((prev) => ({ ...prev, [name]: value }));
102 }
103
104 function reset() {
105 setFields({ beneficiary: "", iban: "", amount: "" });
106 setReference("");
107 setAttempted(false);
108 setConfirmation(null);
109 }
110
111 function handleSubmit(event: FormEvent<HTMLFormElement>) {
112 event.preventDefault();
113 setAttempted(true);
114
115 const submitErrors = validate(fields, available, true);
116 if (Object.keys(submitErrors).length > 0) return;
117 if (amountValue === null || amountValue > available) return;
118
119 setConfirmation({
120 amount: amountValue,
121 beneficiary: fields.beneficiary.trim(),
122 });
123 }
124
125 if (confirmation) {
126 return (
127 <main
128 className={`vektos ${css({
129 bg: "bg.canvas",
130 color: "fg.default",
131 minHeight: "100vh",
132 px: "4",
133 py: "8",
134 })}`}
135 >
136 <Card className={css({ maxWidth: "lg", mx: "auto" })}>
137 <CardHeader>
138 <CardTitle>Transfer submitted</CardTitle>
139 </CardHeader>
140 <CardBody>
141 <p role="status" className={css({ fontSize: "md" })}>
142 Your transfer of {money.format(confirmation.amount)} to{" "}
143 {confirmation.beneficiary} has been submitted.
144 </p>
145 </CardBody>
146 <CardFooter>
147 <Button variant="outline" size="sm" onClick={reset}>
148 Make another transfer
149 </Button>
150 </CardFooter>
151 </Card>
152 </main>
153 );
154 }
155
156 return (
157 <main
158 className={`vektos ${css({
159 bg: "bg.canvas",
160 color: "fg.default",
161 minHeight: "100vh",
162 px: "4",
163 py: "8",
164 })}`}
165 >
166 <Card className={css({ maxWidth: "lg", mx: "auto" })}>
167 <CardHeader>
168 <CardTitle asChild>
169 <h1>Send a SEPA transfer</h1>
170 </CardTitle>
171 </CardHeader>
172
173 <form
174 noValidate
175 onSubmit={handleSubmit}
176 className={css({ display: "grid", gap: "4", p: "6" })}
177 >
178 <FormField
179 label="From account"
180 helperText={
181 account
182 ? `Available balance: ${money.format(account.available)}`
183 : undefined
184 }
185 >
186 <Select
187 options={data.accounts.map((a) => ({
188 label: a.name,
189 value: a.id,
190 }))}
191 value={accountId}
192 onValueChange={setAccountId}
193 />
194 </FormField>
195
196 <FormField label="Beneficiary name" error={errors.beneficiary}>
197 <Input
198 name="beneficiary"
199 autoComplete="off"
200 value={fields.beneficiary}
201 onChange={(e) => update("beneficiary", e.target.value)}
202 />
203 </FormField>
204
205 <FormField
206 label="Beneficiary IBAN"
207 helperText="For example IT60 X054 2811 1010 0000 0123 456."
208 error={errors.iban}
209 >
210 <Input
211 name="iban"
212 autoComplete="off"
213 spellCheck={false}
214 value={fields.iban}
215 onChange={(e) => update("iban", e.target.value)}
216 />
217 </FormField>
218
219 <FormField
220 label={`Amount (${data.currency})`}
221 helperText="Up to two decimals."
222 error={errors.amount}
223 >
224 <Input
225 name="amount"
226 inputMode="decimal"
227 placeholder="0.00"
228 value={fields.amount}
229 onChange={(e) => update("amount", e.target.value)}
230 />
231 </FormField>
232
233 <FormField label="Reference (optional)">
234 <Input
235 name="reference"
236 autoComplete="off"
237 value={reference}
238 onChange={(e) => setReference(e.target.value)}
239 />
240 </FormField>
241
242 <div className={css({ display: "flex", justifyContent: "flex-end" })}>
243 <Button type="submit" disabled={overBalance || !account}>
244 Send transfer
245 </Button>
246 </div>
247 </form>
248 </Card>
249 </main>
250 );
251 }
252
page.tsx:131:11
Not counted
No overload matches this call.
3 write_file 10,675 9,661 $0.0059