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, check_code 9,642 7,473 $0.0047
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-GB", {
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 const AMOUNT_PATTERN = /^\d+([.,]\d{1,2})?$/;
30 const IBAN_PATTERN = /^[A-Z]{2}\d{2}[A-Z0-9]{11,30}$/;
31
32 function parseAmount(raw: string): number | null {
33 const trimmed = raw.trim();
34 if (!AMOUNT_PATTERN.test(trimmed)) return null;
35 return Number(trimmed.replace(",", "."));
36 }
37
38 function normalizeIban(raw: string): string {
39 return raw.replace(/\s+/g, "").toUpperCase();
40 }
41
42 type FieldErrors = {
43 beneficiary?: string;
44 iban?: string;
45 amount?: string;
46 };
47
48 type Confirmation = {
49 amount: number;
50 beneficiary: string;
51 };
52
53 const stack = css({ display: "flex", flexDirection: "column", gap: "4" });
54 const page = css({ maxWidth: "lg", marginInline: "auto", padding: "6" });
55 const balance = css({ fontSize: "sm", color: "fg.muted" });
56 const confirmText = css({ fontSize: "md", color: "fg.default" });
57
58 const noAccount = { id: "", name: "", iban: "", available: 0 };
59
60 export default function Page() {
61 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
62 const [beneficiary, setBeneficiary] = useState("");
63 const [iban, setIban] = useState("");
64 const [amount, setAmount] = useState("");
65 const [reference, setReference] = useState("");
66 const [errors, setErrors] = useState<FieldErrors>({});
67 const [confirmation, setConfirmation] = useState<Confirmation | null>(null);
68
69 const account =
70 data.accounts.find((item) => item.id === accountId) ?? noAccount;
71 const amountValue = parseAmount(amount);
72 const overBalance = amountValue !== null && amountValue > account.available;
73 const balanceText = formatter.format(account.available);
74 const amountError = overBalance
75 ? `Amount is higher than the available balance of ${balanceText}.`
76 : errors.amount;
77
78 function handleSubmit(event: FormEvent<HTMLFormElement>) {
79 event.preventDefault();
80
81 const nextErrors: FieldErrors = {};
82 if (!beneficiary.trim()) {
83 nextErrors.beneficiary = "Enter the beneficiary name.";
84 }
85 if (!IBAN_PATTERN.test(normalizeIban(iban))) {
86 nextErrors.iban = "Enter a valid IBAN, for example IT60 X054 2811 1010 0000 0123 456.";
87 }
88 if (amountValue === null || amountValue <= 0) {
89 nextErrors.amount = "Enter an amount greater than zero.";
90 } else if (amountValue > account.available) {
91 nextErrors.amount = `Amount is higher than the available balance of ${balanceText}.`;
92 }
93
94 if (Object.keys(nextErrors).length > 0 || amountValue === null) {
95 setErrors(nextErrors);
96 return;
97 }
98
99 setErrors({});
100 setConfirmation({ amount: amountValue, beneficiary: beneficiary.trim() });
101 }
102
103 function handleReset() {
104 setBeneficiary("");
105 setIban("");
106 setAmount("");
107 setReference("");
108 setErrors({});
109 setConfirmation(null);
110 }
111
112 return (
113 <main className="vektos">
114 <div className={page}>
115 {confirmation ? (
116 <Card>
117 <CardHeader>
118 <CardTitle>Transfer sent</CardTitle>
119 <CardDescription>Your SEPA transfer has been submitted.</CardDescription>
120 </CardHeader>
121 <CardBody>
122 <output className={confirmText}>
123 You sent {formatter.format(confirmation.amount)} to{" "}
124 {confirmation.beneficiary}.
125 </output>
126 </CardBody>
127 <CardFooter>
128 <Button variant="outline" size="sm" onClick={handleReset}>
129 New transfer
130 </Button>
131 </CardFooter>
132 </Card>
133 ) : (
134 <Card>
135 <CardHeader>
136 <CardTitle>SEPA transfer</CardTitle>
137 <CardDescription>Send money to a beneficiary in the SEPA area.</CardDescription>
138 </CardHeader>
139 <CardBody>
140 <form noValidate onSubmit={handleSubmit} className={stack}>
141 <FormField label="From account">
142 <Select
143 options={accountOptions}
144 value={accountId}
145 onValueChange={(value) => setAccountId(value)}
146 />
147 </FormField>
148 <p className={balance}>Available balance: {balanceText}</p>
149
150 <FormField label="Beneficiary name" error={errors.beneficiary}>
151 <Input
152 autoComplete="off"
153 value={beneficiary}
154 onChange={(event) => setBeneficiary(event.target.value)}
155 />
156 </FormField>
157
158 <FormField label="Beneficiary IBAN" error={errors.iban}>
159 <Input
160 autoComplete="off"
161 spellCheck={false}
162 value={iban}
163 onChange={(event) => setIban(event.target.value)}
164 />
165 </FormField>
166
167 <FormField
168 label={`Amount (${data.currency})`}
169 helperText="Use a dot or a comma, with at most two decimals."
170 error={amountError}
171 >
172 <Input
173 inputMode="decimal"
174 placeholder="0.00"
175 value={amount}
176 onChange={(event) => setAmount(event.target.value)}
177 />
178 </FormField>
179
180 <FormField label="Reference" helperText="Optional.">
181 <Input
182 value={reference}
183 onChange={(event) => setReference(event.target.value)}
184 />
185 </FormField>
186
187 <div>
188 <Button type="submit" disabled={overBalance}>
189 Send transfer
190 </Button>
191 </div>
192 </form>
193 </CardBody>
194 </Card>
195 )}
196 </div>
197 </main>
198 );
199 }
200
3 write_file, check_code 17,332 5,092 $0.0043