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 185 $0.0002 1 get_component, get_component, get_component, get_component, get_component, list_tokens 4,302 277 $0.0006 2 list_tokens, list_files 7,901 255 $0.0009
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 Account = (typeof data.accounts)[number];
20
21 type Result = { amountCents: number; beneficiary: string; currency: string };
22
23 const IBAN_PATTERN = /^[A-Z]{2}\d{2}[A-Z0-9]{11,30}$/;
24 const AMOUNT_PATTERN = /^\d+(\.\d{1,2})?$/;
25 const REFERENCE_MAX = 140;
26
27 const money = (cents: number, currency: string) =>
28 new Intl.NumberFormat("en-GB", { style: "currency", currency }).format(cents / 100);
29
30 const toCents = (amount: number) => Math.round(amount * 100);
31
32 type AmountIssue = "empty" | "format" | "zero" | "exceeds";
33
34 function getAmountIssue(raw: string, balanceCents: number | null): AmountIssue | null {
35 const value = raw.trim();
36 if (value === "") return "empty";
37 if (!AMOUNT_PATTERN.test(value)) return "format";
38 const cents = toCents(Number(value));
39 if (cents <= 0) return "zero";
40 if (balanceCents !== null && cents > balanceCents) return "exceeds";
41 return null;
42 }
43
44 export default function SepaTransferPage() {
45 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
46 const [beneficiaryName, setBeneficiaryName] = useState("");
47 const [beneficiaryIban, setBeneficiaryIban] = useState("");
48 const [amount, setAmount] = useState("");
49 const [reference, setReference] = useState("");
50 const [submitted, setSubmitted] = useState(false);
51 const [result, setResult] = useState<Result | null>(null);
52
53 const selected: Account | undefined = data.accounts.find((a) => a.id === accountId);
54 const balanceCents = selected ? toCents(selected.available) : null;
55
56 const amountIssue = getAmountIssue(amount, balanceCents);
57 const normalizedIban = beneficiaryIban.replace(/\s+/g, "").toUpperCase();
58
59 const nameError = submitted && beneficiaryName.trim() === "" ? "Enter the beneficiary name." : undefined;
60 const ibanError = submitted && !IBAN_PATTERN.test(normalizedIban)
61 ? "Enter a valid IBAN, such as IT60 X054 2811 1010 0000 0123 456."
62 : undefined;
63
64 let amountError: string | undefined;
65 if (amountIssue === "format") amountError = "Enter an amount with up to two decimals, using a dot, such as 250.00.";
66 else if (amountIssue === "zero") amountError = "Enter an amount greater than zero.";
67 else if (amountIssue === "exceeds" && selected)
68 amountError = `The amount is higher than the available balance of ${money(toCents(selected.available), data.currency)}.`;
69 else if (amountIssue === "empty" && submitted) amountError = "Enter an amount.";
70
71 // Submit is blocked while the amount is invalid or above the balance.
72 const blocked = !selected || amountIssue === "format" || amountIssue === "zero" || amountIssue === "exceeds";
73
74 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
75 event.preventDefault();
76 setSubmitted(true);
77 if (!selected || blocked || nameError || ibanError || amountIssue !== null) return;
78 setResult({
79 amountCents: toCents(Number(amount)),
80 beneficiary: beneficiaryName.trim(),
81 currency: data.currency,
82 });
83 }
84
85 function reset() {
86 setBeneficiaryName("");
87 setBeneficiaryIban("");
88 setAmount("");
89 setReference("");
90 setSubmitted(false);
91 setResult(null);
92 }
93
94 if (result) {
95 return (
96 <main className={`vektos ${css({ minHeight: "100vh", bg: "bg.canvas", color: "fg.default", p: "6", display: "flex", justifyContent: "center" })}`}>
97 <Card className={css({ width: "full", maxWidth: "md", alignSelf: "flex-start" })}>
98 <CardHeader>
99 <CardTitle>Transfer submitted</CardTitle>
100 <CardDescription>Your SEPA transfer has been sent.</CardDescription>
101 </CardHeader>
102 <CardBody>
103 <p role="status" className={css({ fontSize: "lg", fontWeight: "semibold" })}>
104 {money(result.amountCents, result.currency)} sent to {result.beneficiary}.
105 </p>
106 </CardBody>
107 <CardFooter>
108 <Button variant="outline" size="sm" onClick={reset}>
109 New transfer
110 </Button>
111 </CardFooter>
112 </Card>
113 </main>
114 );
115 }
116
117 return (
118 <main className={`vektos ${css({ minHeight: "100vh", bg: "bg.canvas", color: "fg.default", p: "6", display: "flex", justifyContent: "center" })}`}>
119 <Card className={css({ width: "full", maxWidth: "md", alignSelf: "flex-start" })}>
120 <CardHeader>
121 <CardTitle>Send a SEPA transfer</CardTitle>
122 <CardDescription>Pay a beneficiary in euro from one of your accounts.</CardDescription>
123 </CardHeader>
124 <form onSubmit={handleSubmit} noValidate>
125 <CardBody>
126 <div className={css({ display: "grid", gap: "4" })}>
127 <FormField
128 label="From account"
129 helperText={
130 selected
131 ? `Available balance: ${money(toCents(selected.available), data.currency)}`
132 : "Choose an account."
133 }
134 >
135 <Select
136 value={accountId}
137 onValueChange={(value: string) => setAccountId(value)}
138 options={data.accounts.map((a) => ({ label: `${a.name} (${a.iban})`, value: a.id }))}
139 />
140 </FormField>
141
142 <FormField label="Beneficiary name" error={nameError}>
143 <Input
144 name="beneficiaryName"
145 autoComplete="off"
146 value={beneficiaryName}
147 onChange={(e) => setBeneficiaryName(e.target.value)}
148 required
149 />
150 </FormField>
151
152 <FormField
153 label="Beneficiary IBAN"
154 error={ibanError}
155 helperText="Spaces are ignored."
156 >
157 <Input
158 name="beneficiaryIban"
159 autoComplete="off"
160 spellCheck={false}
161 value={beneficiaryIban}
162 onChange={(e) => setBeneficiaryIban(e.target.value)}
163 required
164 />
165 </FormField>
166
167 <FormField
168 label={`Amount (${data.currency})`}
169 error={amountError}
170 helperText="Use a dot as decimal separator, such as 250.00."
171 >
172 <Input
173 name="amount"
174 inputMode="decimal"
175 placeholder="0.00"
176 value={amount}
177 onChange={(e) => setAmount(e.target.value)}
178 required
179 />
180 </FormField>
181
182 <FormField
183 label="Reference (optional)"
184 helperText={`Up to ${REFERENCE_MAX} characters.`}
185 >
186 <Input
187 name="reference"
188 maxLength={REFERENCE_MAX}
189 value={reference}
190 onChange={(e) => setReference(e.target.value)}
191 />
192 </FormField>
193 </div>
194 </CardBody>
195 <CardFooter>
196 <Button type="submit" size="sm" disabled={blocked}>
197 Send transfer
198 </Button>
199 </CardFooter>
200 </form>
201 </Card>
202 </main>
203 );
204 }
205
page.tsx:96:40
Not counted
No overload matches this call.
3 list_tokens 9,184 3,978 $0.0029
4 write_file 13,265 2,845 $0.0027