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 6 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 131 $0.0006 1 docs-show, docs-show, docs-show, docs-show, docs-show 6,253 230 $0.0007 2 write_file 10,320 4,958 $0.0035
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-IE", {
20 style: "currency",
21 currency: data.currency,
22 });
23
24 const formatMoney = (value: number) => formatter.format(value);
25
26 // Accepts "125", "125.5", "125,50" or "125.00"; returns null for anything else or zero.
27 function parseAmount(raw: string): number | null {
28 const normalized = raw.trim().replace(",", ".");
29 if (!/^\d+(\.\d{1,2})?$/.test(normalized)) return null;
30 const value = Number(normalized);
31 return value > 0 ? value : null;
32 }
33
34 function isValidIban(raw: string): boolean {
35 return /^[A-Z]{2}\d{2}[A-Z0-9]{11,30}$/.test(raw.replace(/\s/g, "").toUpperCase());
36 }
37
38 type Sent = { amount: number; beneficiary: string };
39
40 const accountOptions = data.accounts.map((account) => ({
41 label: account.name,
42 value: account.id,
43 }));
44
45 export default function Page() {
46 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
47 const [beneficiary, setBeneficiary] = useState("");
48 const [iban, setIban] = useState("");
49 const [amount, setAmount] = useState("");
50 const [reference, setReference] = useState("");
51 const [attempted, setAttempted] = useState(false);
52 const [sent, setSent] = useState<Sent | null>(null);
53
54 const account =
55 data.accounts.find((item) => item.id === accountId) ?? data.accounts[0];
56 const parsedAmount = parseAmount(amount);
57 const overBalance = parsedAmount !== null && parsedAmount > account.available;
58
59 const beneficiaryError =
60 attempted && beneficiary.trim() === ""
61 ? "Enter the beneficiary name."
62 : undefined;
63 const ibanError =
64 attempted && !isValidIban(iban) ? "Enter a valid IBAN." : undefined;
65
66 let amountError: string | undefined;
67 if (overBalance) {
68 amountError = `Amount is higher than the available balance of ${formatMoney(account.available)}.`;
69 } else if (attempted && parsedAmount === null) {
70 amountError = "Enter an amount greater than zero, with up to two decimals.";
71 }
72
73 function handleSubmit(event: FormEvent<HTMLFormElement>) {
74 event.preventDefault();
75 setAttempted(true);
76
77 if (
78 overBalance ||
79 parsedAmount === null ||
80 beneficiary.trim() === "" ||
81 !isValidIban(iban)
82 ) {
83 return;
84 }
85
86 setSent({ amount: parsedAmount, beneficiary: beneficiary.trim() });
87 }
88
89 function resetForm() {
90 setSent(null);
91 setBeneficiary("");
92 setIban("");
93 setAmount("");
94 setReference("");
95 setAttempted(false);
96 }
97
98 if (sent) {
99 return (
100 <main className={pageClass}>
101 <Card className={cardClass}>
102 <CardHeader>
103 <CardTitle>Transfer sent</CardTitle>
104 <CardDescription>
105 {`${formatMoney(sent.amount)} was sent to ${sent.beneficiary}.`}
106 </CardDescription>
107 </CardHeader>
108 <CardFooter>
109 <Button variant="outline" size="md" onClick={resetForm}>
110 Make another transfer
111 </Button>
112 </CardFooter>
113 </Card>
114 </main>
115 );
116 }
117
118 return (
119 <main className={pageClass}>
120 <Card className={cardClass}>
121 <CardHeader>
122 <CardTitle>Send a SEPA transfer</CardTitle>
123 <CardDescription>Payments in euro to a SEPA account.</CardDescription>
124 </CardHeader>
125 <form noValidate onSubmit={handleSubmit}>
126 <CardBody>
127 <div className={fieldsClass}>
128 <FormField
129 label="From account"
130 required
131 helperText={`Available balance: ${formatMoney(account.available)}`}
132 >
133 <Select
134 options={accountOptions}
135 value={accountId}
136 onValueChange={(value) => setAccountId(value)}
137 />
138 </FormField>
139
140 <FormField
141 label="Beneficiary name"
142 required
143 error={beneficiaryError}
144 >
145 <Input
146 autoComplete="off"
147 placeholder="Full name"
148 value={beneficiary}
149 onChange={(event) => setBeneficiary(event.target.value)}
150 />
151 </FormField>
152
153 <FormField
154 label="Beneficiary IBAN"
155 required
156 error={ibanError}
157 helperText="For example DE89 3704 0044 0532 0130 00."
158 >
159 <Input
160 autoComplete="off"
161 placeholder="IBAN"
162 value={iban}
163 onChange={(event) => setIban(event.target.value)}
164 />
165 </FormField>
166
167 <FormField
168 label={`Amount (${data.currency})`}
169 required
170 error={amountError}
171 helperText={`Up to ${formatMoney(account.available)} from this account.`}
172 >
173 <Input
174 inputMode="decimal"
175 placeholder="0.00"
176 value={amount}
177 onChange={(event) => setAmount(event.target.value)}
178 />
179 </FormField>
180
181 <FormField
182 label="Reference"
183 helperText="Optional. Up to 140 characters."
184 >
185 <Input
186 maxLength={140}
187 placeholder="Invoice 2026-114"
188 value={reference}
189 onChange={(event) => setReference(event.target.value)}
190 />
191 </FormField>
192 </div>
193 </CardBody>
194 <CardFooter>
195 <Button type="submit" variant="solid" size="md" disabled={overBalance}>
196 Send transfer
197 </Button>
198 </CardFooter>
199 </form>
200 </Card>
201 </main>
202 );
203 }
204
205 const pageClass = css({
206 minHeight: "100vh",
207 display: "flex",
208 justifyContent: "center",
209 alignItems: "flex-start",
210 padding: "8",
211 });
212
213 const cardClass = css({
214 width: "100%",
215 maxWidth: "520px",
216 });
217
218 const fieldsClass = css({
219 display: "flex",
220 flexDirection: "column",
221 gap: "4",
222 });
223
typecheck/TS2769 0 quality