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 4 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 list_files 155 46 $0.0000 1 read_file 215 31 $0.0000 2 get_guidelines, list_components 1,069 39 $0.0000 3
Output cap 20,000 tokens a step 3 import { useState, type FormEvent } from "react";
4 import data from "./fixture.json";
5 import {
6 Alert,
7 Button,
8 Card,
9 CardBody,
10 CardHeader,
11 CardTitle,
12 FormField,
13 FormatNumber,
14 Heading,
15 Input,
16 NumberInput,
17 Select,
18 Stack,
19 Text,
20 Toaster,
21 toast,
22 } from "@vektos/ds";
23
24 export default function SepaTransferPage() {
25 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
26 const account =
27 data.accounts.find((a) => a.id === accountId) ?? data.accounts[0];
28
29 const [beneficiaryName, setBeneficiaryName] = useState("");
30 const [beneficiaryIban, setBeneficiaryIban] = useState("");
31 const [amount, setAmount] = useState<number | null>(null);
32 const [reference, setReference] = useState("");
33
34 const [submitted, setSubmitted] = useState<{
35 amount: number;
36 beneficiary: string;
37 } | null>(null);
38
39 const amountError =
40 amount !== null && amount > account.available
41 ? "The amount is higher than the available balance."
42 : undefined;
43
44 const canSubmit =
45 beneficiaryName.trim() !== "" &&
46 beneficiaryIban.trim() !== "" &&
47 amount !== null &&
48 amount > 0 &&
49 amountError === undefined;
50
51 function handleSubmit(event: FormEvent<HTMLFormElement>) {
52 event.preventDefault();
53 if (!canSubmit || amount === null) return;
54
55 setSubmitted({ amount, beneficiary: beneficiaryName.trim() });
56 toast({
57 title: "Transfer sent",
58 description: `${beneficiaryName.trim()} · ${amount} ${data.currency}`,
59 tone: "success",
60 });
61
62 setBeneficiaryName("");
63 setBeneficiaryIban("");
64 setAmount(null);
65 setReference("");
66 }
67
68 return (
69 <div className="vektos">
70 <Stack gap="6" maxWidth="md" marginInline="auto" marginBlock="8">
71 <Heading level={1}>SEPA transfer</Heading>
72
73 {submitted !== null && (
74 <Alert tone="success" title="Transfer sent">
75 <FormatNumber
76 value={submitted.amount}
77 format="currency"
78 currency={data.currency}
79 />{" "}
80 to {submitted.beneficiary}
81 </Alert>
82 )}
83
84 <Card>
85 <CardHeader>
86 <CardTitle>Payment details</CardTitle>
87 </CardHeader>
88 <CardBody>
89 <form onSubmit={handleSubmit}>
90 <Stack gap="4">
91 <FormField label="Pay from" required>
92 <Select
93 options={data.accounts.map((a) => ({
94 label: `${a.name} — ${a.iban}`,
95 value: a.id,
96 }))}
97 value={accountId}
98 onValueChange={setAccountId}
99 placeholder="Choose an account"
100 />
101 </FormField>
102
103 <Text tone="muted" size="sm">
104 Available balance:{" "}
105 <FormatNumber
106 value={account.available}
107 format="currency"
108 currency={data.currency}
109 />
110 </Text>
111
112 <FormField label="Beneficiary name" required>
113 <Input
114 value={beneficiaryName}
115 onChange={(e) => setBeneficiaryName(e.target.value)}
116 placeholder="Name of the beneficiary"
117 />
118 </FormField>
119
120 <FormField label="Beneficiary IBAN" required>
121 <Input
122 value={beneficiaryIban}
123 onChange={(e) => setBeneficiaryIban(e.target.value)}
124 placeholder="IBAN"
125 />
126 </FormField>
127
128 <FormField
129 label="Amount"
130 required
131 error={amountError}
132 helperText={
133 amountError === undefined
134 ? "Up to the available balance."
135 : undefined
136 }
137 >
138 <NumberInput
139 value={amount}
140 onValueChange={setAmount}
141 format="currency"
142 currency={data.currency}
143 fractionDigits={2}
144 min={0.01}
145 showSteppers={false}
146 placeholder="0.00"
147 />
148 </FormField>
149
150 <FormField label="Reference" helperText="Optional">
151 <Input
152 value={reference}
153 onChange={(e) => setReference(e.target.value)}
154 placeholder="Payment reference"
155 />
156 </FormField>
157
158 <Stack
159 flexDirection="row"
160 justifyContent="flex-end"
161 gap="2"
162 >
163 <Button type="submit" disabled={!canSubmit}>
164 Send transfer
165 </Button>
166 </Stack>
167 </Stack>
168 </form>
169 </CardBody>
170 </Card>
171 </Stack>
172 <Toaster />
173 </div>
174 );
175 }
176
get_component, get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component, get_component 3,562 158 $0.0000
5 get_component, list_tokens 5,047 85 $0.0000
6 list_files 2,203 61 $0.0000
8 list_tokens, list_tokens, list_tokens 305 69 $0.0000
13 get_component 93 1,262 $0.0000
14 write_file 1,842 3,745 $0.0000
15 check_code 3,819 1,038 $0.0000
16 write_file 1,105 1,069 $0.0000
17 check_code 1,110 1,032 $0.0000