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 9 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 666 15 $0.0001 1 list_files, list_components, list_tokens, read_file 3 68 $0.0003 2 get_component, get_component, get_component, get_component, get_component 3 91 $0.0003
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 export default function Page() {
24 const [accountId, setAccountId] = useState(data.defaultAccountId);
25 const [beneficiary, setBeneficiary] = useState("");
26 const [iban, setIban] = useState("");
27 const [amount, setAmount] = useState("");
28 const [reference, setReference] = useState("");
29 const [sent, setSent] = useState<{ amount: number; beneficiary: string } | null>(null);
30
31 const selectedAccount = data.accounts.find((account) => account.id === accountId) ?? data.accounts[0];
32 const parsedAmount = Number(amount.replace(",", "."));
33 const exceedsBalance = amount.trim() !== "" && Number.isFinite(parsedAmount) && parsedAmount > selectedAccount.available;
34 const amountError = exceedsBalance
35 ? "This amount is higher than the available balance."
36 : amount.trim() !== "" && (!Number.isFinite(parsedAmount) || parsedAmount <= 0)
37 ? "Enter an amount greater than zero."
38 : undefined;
39
40 const accountOptions = data.accounts.map((account) => ({
41 label: `${account.name} · ${account.iban}`,
42 value: account.id,
43 }));
44
45 function handleSubmit(event: FormEvent<HTMLFormElement>) {
46 event.preventDefault();
47 if (exceedsBalance || amountError || !beneficiary.trim() || !iban.trim()) return;
48 setSent({ amount: parsedAmount, beneficiary: beneficiary.trim() });
49 }
50
51 return (
52 <main className={`vektos ${css({ minH: "full", bg: "bg.canvas", color: "fg.default", px: "4", py: "8" })}`}>
53 <div className={css({ maxW: "md", mx: "auto" })}>
54 <header className={css({ mb: "6" })}>
55 <p className={css({ color: "accent.default", fontSize: "sm", fontWeight: "semibold", mb: "2" })}>
56 PAYMENTS <span aria-hidden="true">/</span> SEPA TRANSFER
57 </p>
58 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight", mb: "2" })}>
59 Send a transfer
60 </h1>
61 <p className={css({ color: "fg.muted", fontSize: "sm", lineHeight: "normal" })}>
62 Send euros to any beneficiary in the SEPA area.
63 </p>
64 </header>
65
66 {sent ? (
67 <Card>
68 <CardHeader>
69 <CardTitle>Transfer sent</CardTitle>
70 <CardDescription>Your SEPA transfer has been submitted successfully.</CardDescription>
71 </CardHeader>
72 <CardBody>
73 <div
74 role="status"
75 aria-live="polite"
76 className={css({ bg: "success.subtle", color: "success.text", borderRadius: "md", p: "4" })}
77 >
78 <p className={css({ fontWeight: "semibold", mb: "1" })}>
79 {currencyFormatter.format(sent.amount)} sent to {sent.beneficiary}
80 </p>
81 <p className={css({ fontSize: "sm" })}>You can close this page or make another transfer.</p>
82 </div>
83 <div className={css({ mt: "4" })}>
84 <Button variant="outline" size="md" onClick={() => setSent(null)}>
85 Make another transfer
86 </Button>
87 </div>
88 </CardBody>
89 </Card>
90 ) : (
91 <Card>
92 <CardHeader>
93 <CardTitle>Transfer details</CardTitle>
94 <CardDescription>Enter the account and beneficiary details below.</CardDescription>
95 </CardHeader>
96 <CardBody>
97 <form onSubmit={handleSubmit} className={css({ display: "flex", flexDirection: "column", gap: "4" })}>
98 <FormField label="Pay from">
99 <Select
100 options={accountOptions}
101 value={accountId}
102 onValueChange={(value) => {
103 setAccountId(value);
104 setSent(null);
105 }}
106 />
107 </FormField>
108
109 <div
110 className={css({ display: "flex", alignItems: "center", justifyContent: "space-between", bg: "bg.subtle", borderRadius: "md", px: "4", py: "3" })}
111 >
112 <span className={css({ color: "fg.muted", fontSize: "sm" })}>Available balance</span>
113 <span className={css({ fontSize: "sm", fontWeight: "semibold" })}>
114 {currencyFormatter.format(selectedAccount.available)}
115 </span>
116 </div>
117
118 <FormField label="Beneficiary name">
119 <Input
120 autoComplete="name"
121 required
122 value={beneficiary}
123 onChange={(event) => setBeneficiary(event.target.value)}
124 placeholder="Name as shown on their account"
125 />
126 </FormField>
127
128 <FormField label="Beneficiary IBAN" helperText="Enter the IBAN of the account receiving this transfer.">
129 <Input
130 autoComplete="off"
131 required
132 value={iban}
133 onChange={(event) => setIban(event.target.value)}
134 placeholder="e.g. DE89 3704 0044 0532 0130 00"
135 />
136 </FormField>
137
138 <FormField label="Amount" error={amountError} helperText="Amount in EUR.">
139 <Input
140 inputMode="decimal"
141 required
142 value={amount}
143 onChange={(event) => setAmount(event.target.value)}
144 placeholder="0.00"
145 aria-invalid={Boolean(amountError)}
146 />
147 </FormField>
148
149 <FormField label="Reference (optional)" helperText="Add a note to help identify this payment.">
150 <Input
151 value={reference}
152 onChange={(event) => setReference(event.target.value)}
153 placeholder="e.g. Invoice 1042"
154 />
155 </FormField>
156
157 <div className={css({ display: "flex", justifyContent: "flex-end", pt: "2" })}>
158 <Button type="submit" variant="solid" size="md" disabled={exceedsBalance || Boolean(amountError)}>
159 Send transfer
160 </Button>
161 </div>
162 </form>
163 </CardBody>
164 </Card>
165 )}
166 </div>
167 </main>
168 );
169 }
170
2 quality
lint/jsx-a11y(prefer-tag-over-role) 1 quality