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 12 counted, under 6 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 list_files, get_guidelines, list_components, list_tokens 598 81 $0.0001 1 read_file 3 19 $0.0004 2 get_component, get_component, get_component, get_component, get_component 3 91 $0.0001
Output cap
The provider's default 4 import {
5 Button,
6 Card,
7 CardBody,
8 CardDescription,
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 currencyFormatter = new Intl.NumberFormat("en-IE", {
19 style: "currency",
20 currency: data.currency,
21 });
22
23 type Transfer = {
24 amount: number;
25 beneficiary: string;
26 };
27
28 export default function Page() {
29 const [accountId, setAccountId] = useState(data.defaultAccountId);
30 const [beneficiary, setBeneficiary] = useState("");
31 const [iban, setIban] = useState("");
32 const [amount, setAmount] = useState("");
33 const [reference, setReference] = useState("");
34 const [transfer, setTransfer] = useState<Transfer | null>(null);
35
36 const selectedAccount =
37 data.accounts.find((account) => account.id === accountId) ?? data.accounts[0];
38 const parsedAmount = Number(amount.trim().replace(",", "."));
39 const amountError =
40 amount.trim() === ""
41 ? undefined
42 : !Number.isFinite(parsedAmount) || parsedAmount <= 0
43 ? "Enter an amount greater than zero."
44 : parsedAmount > selectedAccount.available
45 ? "This amount is higher than your available balance."
46 : undefined;
47
48 function handleSubmit(event: FormEvent<HTMLFormElement>) {
49 event.preventDefault();
50 if (amountError || !Number.isFinite(parsedAmount) || parsedAmount <= 0) return;
51
52 setTransfer({ amount: parsedAmount, beneficiary: beneficiary.trim() });
53 }
54
55 function startAnotherTransfer() {
56 setBeneficiary("");
57 setIban("");
58 setAmount("");
59 setReference("");
60 setTransfer(null);
61 }
62
63 return (
64 <main className={`vektos ${css({ minHeight: "100vh", bg: "bg.canvas", color: "fg.default" })}`}>
65 <header
66 className={css({
67 display: "flex",
68 alignItems: "center",
69 justifyContent: "space-between",
70 px: "6",
71 py: "4",
72 borderBottomWidth: "1px",
73 borderColor: "border.default",
74 bg: "bg.surface",
75 })}
76 >
77 <div className={css({ display: "flex", alignItems: "center", gap: "3" })}>
78 <span
79 aria-hidden="true"
80 className={css({
81 display: "grid",
82 placeItems: "center",
83 width: "8",
84 height: "8",
85 rounded: "md",
86 bg: "accent.default",
87 color: "accent.fg",
88 fontWeight: "bold",
89 fontSize: "md",
90 })}
91 >
92 v
93 </span>
94 <span className={css({ fontWeight: "semibold", fontSize: "md" })}>Vektos</span>
95 </div>
96 <span className={css({ color: "fg.muted", fontSize: "sm" })}>Payments</span>
97 </header>
98
99 <div
100 className={css({
101 width: "full",
102 maxWidth: "lg",
103 mx: "auto",
104 px: "4",
105 py: "8",
106 })}
107 >
108 <div className={css({ marginBlockEnd: "6" })}>
109 <p
110 className={css({
111 color: "accent.default",
112 fontSize: "sm",
113 fontWeight: "semibold",
114 marginBlockEnd: "2",
115 })}
116 >
117 PAYMENTS / SEPA
118 </p>
119 <h1 className={css({ fontSize: "lg", fontWeight: "bold", marginBlockEnd: "2" })}>
120 Send a transfer
121 </h1>
122 <p className={css({ color: "fg.muted", fontSize: "sm" })}>
123 Send euros to any bank account in the SEPA area.
124 </p>
125 </div>
126
127 <Card>
128 {transfer ? (
129 <>
130 <CardHeader>
131 <CardTitle>Transfer sent</CardTitle>
132 <CardDescription>Your SEPA transfer has been submitted successfully.</CardDescription>
133 </CardHeader>
134 <CardBody>
135 <div
136 role="status"
137 className={css({
138 display: "flex",
139 alignItems: "flex-start",
140 gap: "4",
141 rounded: "lg",
142 bg: "success.subtle",
143 p: "4",
144 marginBlockEnd: "6",
145 })}
146 >
147 <span
148 aria-hidden="true"
149 className={css({
150 display: "grid",
151 placeItems: "center",
152 width: "8",
153 height: "8",
154 flexShrink: "0",
155 rounded: "full",
156 bg: "success.default",
157 color: "success.subtle",
158 fontWeight: "bold",
159 })}
160 >
161 ✓
162 </span>
163 <div>
164 <p className={css({ fontWeight: "semibold", color: "success.text" })}>
165 {currencyFormatter.format(transfer.amount)} sent to {transfer.beneficiary}
166 </p>
167 <p className={css({ color: "success.text", fontSize: "sm", marginBlockStart: "1" })}>
168 The transfer is on its way.
169 </p>
170 </div>
171 </div>
172 <Button variant="outline" onClick={startAnotherTransfer}>
173 Send another transfer
174 </Button>
175 </CardBody>
176 </>
177 ) : (
178 <>
179 <CardHeader>
180 <CardTitle>Transfer details</CardTitle>
181 <CardDescription>Enter the recipient and payment details below.</CardDescription>
182 </CardHeader>
183 <CardBody>
184 <form onSubmit={handleSubmit}>
185 <div className={css({ display: "grid", gap: "6" })}>
186 <section aria-label="Pay from" className={css({ display: "grid", gap: "3" })}>
187 <FormField label="Pay from">
188 <Select
189 name="account"
190 value={accountId}
191 onValueChange={setAccountId}
192 options={data.accounts.map((account) => ({
193 value: account.id,
194 label: `${account.name} · ${account.iban}`,
195 }))}
196 />
197 </FormField>
198 <div
199 className={css({
200 display: "flex",
201 justifyContent: "space-between",
202 alignItems: "center",
203 gap: "3",
204 rounded: "md",
205 bg: "bg.subtle",
206 px: "4",
207 py: "3",
208 })}
209 >
210 <span className={css({ color: "fg.muted", fontSize: "sm" })}>
211 Available balance
212 </span>
213 <span className={css({ fontWeight: "semibold", fontSize: "sm" })}>
214 {currencyFormatter.format(selectedAccount.available)}
215 </span>
216 </div>
217 </section>
218
219 <div className={css({ display: "grid", gap: "4" })}>
220 <FormField label="Beneficiary name">
221 <Input
222 name="beneficiary"
223 autoComplete="name"
224 placeholder="Name as it appears on the account"
225 value={beneficiary}
226 onChange={(event) => setBeneficiary(event.target.value)}
227 required
228 />
229 </FormField>
230 <FormField label="Beneficiary IBAN" helperText="Enter the IBAN of the recipient.">
231 <Input
232 name="iban"
233 autoComplete="off"
234 placeholder="e.g. IT60 0542 8111 0100 0000 1234 56"
235 value={iban}
236 onChange={(event) => setIban(event.target.value)}
237 required
238 />
239 </FormField>
240 <FormField label={`Amount (${data.currency})`} error={amountError}>
241 <Input
242 name="amount"
243 inputMode="decimal"
244 placeholder="0.00"
245 value={amount}
246 onChange={(event) => setAmount(event.target.value)}
247 aria-invalid={Boolean(amountError)}
248 required
249 />
250 </FormField>
251 <FormField label="Reference (optional)" helperText="Add a note to help identify this payment.">
252 <Input
253 name="reference"
254 placeholder="e.g. Invoice 1042"
255 value={reference}
256 onChange={(event) => setReference(event.target.value)}
257 />
258 </FormField>
259 </div>
260
261 <div
262 className={css({
263 display: "flex",
264 justifyContent: "flex-end",
265 paddingBlockStart: "2",
266 borderTopWidth: "1px",
267 borderColor: "border.default",
268 })}
269 >
270 <Button type="submit" disabled={Boolean(amountError)}>
271 Send transfer
272 </Button>
273 </div>
274 </div>
275 </form>
276 </CardBody>
277 </>
278 )}
279 </Card>
280 <p className={css({ color: "fg.muted", fontSize: "xs", textAlign: "center", marginBlockStart: "5" })}>
281 Your payment details are protected and encrypted.
282 </p>
283 </div>
284 </main>
285 );
286 }
287
No overload matches this call.
typecheck/TS18048 2 quality lint/jsx-a11y(prefer-tag-over-role) 1 quality list_tokens, list_tokens, list_tokens