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 None. The run followed every rule that was checked.
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,790 135 $0.0002 1 get_component, get_component, get_component, get_component, get_component, list_tokens 4,483 254 $0.0006 2 write_file 9,642 4,737 $0.0033
e02ef3974528
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 accountOptions = data.accounts.map((account) => ({
25 label: `${account.name} (${account.iban})`,
26 value: account.id,
27 }));
28
29 /** Accepts "250", "250.5", "250,50". Returns NaN when the text is not a positive amount. */
30 function parseAmount(text: string): number {
31 const normalized = text.trim().replace(/\s/g, "").replace(",", ".");
32 if (!/^\d+(\.\d{1,2})?$/.test(normalized)) return NaN;
33 const value = Number(normalized);
34 return value > 0 ? value : NaN;
35 }
36
37 type Confirmation = { amount: number; beneficiary: string };
38
39 export default function Page() {
40 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
41 const [beneficiary, setBeneficiary] = useState("");
42 const [iban, setIban] = useState("");
43 const [amountText, setAmountText] = useState("");
44 const [reference, setReference] = useState("");
45 const [submitted, setSubmitted] = useState(false);
46 const [confirmation, setConfirmation] = useState<Confirmation | null>(null);
47
48 const account = data.accounts.find((a) => a.id === accountId);
49 const balance = account?.available ?? 0;
50 const amount = parseAmount(amountText);
51
52 // Required-field and format errors appear after the first submit attempt.
53 const beneficiaryError =
54 submitted && beneficiary.trim() === "" ? "Enter the beneficiary name." : undefined;
55 const ibanError =
56 submitted && iban.trim() === "" ? "Enter the beneficiary IBAN." : undefined;
57
58 // The balance check runs as the user types, so the error shows before submit.
59 let amountError: string | undefined;
60 if (amountText.trim() !== "" && !Number.isNaN(amount) && amount > balance) {
61 amountError = `The amount is higher than the available balance of ${formatter.format(balance)}.`;
62 } else if (submitted && amountText.trim() === "") {
63 amountError = "Enter an amount.";
64 } else if (submitted && Number.isNaN(amount)) {
65 amountError = "Enter an amount greater than zero, such as 250.00.";
66 }
67
68 const hasErrors = Boolean(beneficiaryError || ibanError || amountError);
69
70 function handleSubmit(event: FormEvent<HTMLFormElement>) {
71 event.preventDefault();
72 setSubmitted(true);
73 const amountInvalid =
74 Number.isNaN(amount) || amount > balance || amountText.trim() === "";
75 const invalid =
76 beneficiary.trim() === "" || iban.trim() === "" || amountInvalid;
77 if (invalid) return;
78 setConfirmation({ amount, beneficiary: beneficiary.trim() });
79 }
80
81 function handleNewTransfer() {
82 setBeneficiary("");
83 setIban("");
84 setAmountText("");
85 setReference("");
86 setSubmitted(false);
87 setConfirmation(null);
88 }
89
90 if (confirmation) {
91 return (
92 <main className={css({ bg: "bg.canvas", p: "6" })}>
93 <div className={css({ maxWidth: "md", mx: "auto" })}>
94 <output className={css({ display: "block" })}>
95 <Card>
96 <CardHeader>
97 <CardTitle>Transfer sent</CardTitle>
98 <CardDescription>
99 {formatter.format(confirmation.amount)} sent to {confirmation.beneficiary}.
100 </CardDescription>
101 </CardHeader>
102 <CardFooter>
103 <Button variant="outline" size="sm" onClick={handleNewTransfer}>
104 New transfer
105 </Button>
106 </CardFooter>
107 </Card>
108 </output>
109 </div>
110 </main>
111 );
112 }
113
114 return (
115 <main className={css({ bg: "bg.canvas", p: "6" })}>
116 <div className={css({ maxWidth: "md", mx: "auto" })}>
117 <Card>
118 <CardHeader>
119 <CardTitle>Send a SEPA transfer</CardTitle>
120 <CardDescription>Pay from one of your accounts to a beneficiary in SEPA.</CardDescription>
121 </CardHeader>
122 <form onSubmit={handleSubmit} noValidate>
123 <CardBody>
124 <div className={css({ display: "flex", flexDirection: "column", gap: "4" })}>
125 <FormField label="From account" helperText={`Available balance: ${formatter.format(balance)}`}>
126 <Select
127 options={accountOptions}
128 value={accountId}
129 onValueChange={(value) => setAccountId(value)}
130 name="account"
131 />
132 </FormField>
133
134 <FormField label="Beneficiary name" error={beneficiaryError}>
135 <Input
136 name="beneficiary"
137 autoComplete="off"
138 value={beneficiary}
139 onChange={(event) => setBeneficiary(event.target.value)}
140 />
141 </FormField>
142
143 <FormField label="Beneficiary IBAN" error={ibanError}>
144 <Input
145 name="iban"
146 autoComplete="off"
147 spellCheck={false}
148 value={iban}
149 onChange={(event) => setIban(event.target.value)}
150 />
151 </FormField>
152
153 <FormField
154 label={`Amount (${data.currency})`}
155 helperText="Use digits and a decimal point, for example 250.00."
156 error={amountError}
157 >
158 <Input
159 name="amount"
160 inputMode="decimal"
161 placeholder="0.00"
162 value={amountText}
163 onChange={(event) => setAmountText(event.target.value)}
164 />
165 </FormField>
166
167 <FormField label="Reference (optional)">
168 <Input
169 name="reference"
170 autoComplete="off"
171 value={reference}
172 onChange={(event) => setReference(event.target.value)}
173 />
174 </FormField>
175 </div>
176 </CardBody>
177 <CardFooter>
178 <Button type="submit" disabled={hasErrors}>
179 Send transfer
180 </Button>
181 </CardFooter>
182 </form>
183 </Card>
184 </div>
185 </main>
186 );
187 }
188
3 check_code 14,400 2,661 $0.0028
4 write_file 17,261 2,714 $0.0031
5 check_code 19,996 2,382 $0.0032