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 5 counted, under 2 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,751 133 $0.0002 1 get_component, get_component, get_component, get_component, get_component, list_tokens 4,442 254 $0.0006 2 write_file, check_code 9,601 6,046 $0.0040
Output cap The provider's default 4 import type { FormEvent } from "react";
5 import {
6 Button,
7 Card,
8 CardBody,
9 CardDescription,
10 CardFooter,
11 CardHeader,
12 CardTitle,
13 FormField,
14 Input,
15 Select,
16 } from "@vektos/ds";
17 import { css } from "styled-system/css";
18 import data from "./fixture.json";
19
20 const money = new Intl.NumberFormat("en-IE", {
21 style: "currency",
22 currency: data.currency,
23 });
24
25 const IBAN_PATTERN = /^[A-Z]{2}\d{2}[A-Z0-9]{11,30}$/;
26 const AMOUNT_PATTERN = /^\d+(\.\d{1,2})?$/;
27
28 /** Accepts "125", "125.5", "125,50". Returns null when not a positive amount. */
29 function parseAmount(raw: string): number | null {
30 const normalized = raw.trim().replace(",", ".");
31 if (!AMOUNT_PATTERN.test(normalized)) return null;
32 const value = Number(normalized);
33 return value > 0 ? value : null;
34 }
35
36 type Sent = { amount: number; name: string };
37
38 export default function Page() {
39 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
40 const [name, setName] = useState("");
41 const [iban, setIban] = useState("");
42 const [amountRaw, setAmountRaw] = useState("");
43 const [reference, setReference] = useState("");
44 const [attempted, setAttempted] = useState(false);
45 const [sent, setSent] = useState<Sent | null>(null);
46
47 const account =
48 data.accounts.find((a) => a.id === accountId) ?? data.accounts[0];
49
50 const amount = parseAmount(amountRaw);
51 const exceedsBalance = amount !== null && amount > account.available;
52
53 const nameError = name.trim() === "" ? "Enter the beneficiary name." : undefined;
54 const ibanError = IBAN_PATTERN.test(iban.replace(/\s+/g, "").toUpperCase())
55 ? undefined
56 : "Enter a valid IBAN, such as IT60 X054 2811 1010 0000 0123 456.";
57 const amountError = exceedsBalance
58 ? `Amount is higher than the available balance of ${money.format(account.available)}.`
59 : amount === null
60 ? "Enter an amount greater than zero, such as 125.50."
61 : undefined;
62
63 const hasErrors = Boolean(nameError || ibanError || amountError);
64
65 function handleSubmit(event: FormEvent<HTMLFormElement>) {
66 event.preventDefault();
67 setAttempted(true);
68 if (hasErrors || exceedsBalance || amount === null) return;
69 setSent({ amount, name: name.trim() });
70 }
71
72 function handleReset() {
73 setName("");
74 setIban("");
75 setAmountRaw("");
76 setReference("");
77 setAttempted(false);
78 setSent(null);
79 }
80
81 return (
82 <main className={`vektos ${css({ bg: "bg.canvas", p: "6", display: "flex", justifyContent: "center" })}`}>
83 <Card className={css({ width: "full", maxWidth: "lg", boxShadow: "sm" })}>
84 {sent ? (
85 <div role="status">
86 <CardHeader>
87 <CardTitle asChild>
88 <h1>Transfer sent</h1>
89 </CardTitle>
90 <CardDescription>
91 {`${money.format(sent.amount)} sent to ${sent.name}.`}
92 </CardDescription>
93 </CardHeader>
94 <CardFooter>
95 <Button variant="outline" size="sm" onClick={handleReset}>
96 Make another transfer
97 </Button>
98 </CardFooter>
99 </div>
100 ) : (
101 <form noValidate onSubmit={handleSubmit}>
102 <CardHeader>
103 <CardTitle asChild>
104 <h1>Send a SEPA transfer</h1>
105 </CardTitle>
106 <CardDescription>Pay from one of your accounts.</CardDescription>
107 </CardHeader>
108 <CardBody>
109 <div className={css({ display: "flex", flexDirection: "column", gap: "4" })}>
110 <FormField
111 label="From account"
112 helperText={`IBAN ${account.iban}`}
113 >
114 <Select
115 options={data.accounts.map((a) => ({
116 label: a.name,
117 value: a.id,
118 }))}
119 value={accountId}
120 onValueChange={setAccountId}
121 />
122 </FormField>
123
124 <FormField
125 label="Beneficiary name"
126 error={attempted ? nameError : undefined}
127 >
128 <Input
129 name="beneficiaryName"
130 autoComplete="off"
131 required
132 value={name}
133 onChange={(e) => setName(e.target.value)}
134 />
135 </FormField>
136
137 <FormField
138 label="Beneficiary IBAN"
139 error={attempted ? ibanError : undefined}
140 >
141 <Input
142 name="beneficiaryIban"
143 autoComplete="off"
144 spellCheck={false}
145 required
146 value={iban}
147 onChange={(e) => setIban(e.target.value)}
148 />
149 </FormField>
150
151 <FormField
152 label={`Amount (${data.currency})`}
153 helperText={`Available balance: ${money.format(account.available)}`}
154 error={exceedsBalance || attempted ? amountError : undefined}
155 >
156 <Input
157 name="amount"
158 inputMode="decimal"
159 placeholder="0.00"
160 autoComplete="off"
161 required
162 value={amountRaw}
163 onChange={(e) => setAmountRaw(e.target.value)}
164 />
165 </FormField>
166
167 <FormField label="Reference" helperText="Optional. Shown to the beneficiary.">
168 <Input
169 name="reference"
170 autoComplete="off"
171 maxLength={140}
172 value={reference}
173 onChange={(e) => setReference(e.target.value)}
174 />
175 </FormField>
176 </div>
177 </CardBody>
178 <CardFooter>
179 <Button type="submit" size="md" disabled={exceedsBalance}>
180 Send transfer
181 </Button>
182 </CardFooter>
183 </form>
184 )}
185 </Card>
186 </main>
187 );
188 }
189
3 read_file 15,723 264 $0.0017
4 check_code 18,189 2,412 $0.0030