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 1 counted, under 1 rule. “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 138 30 $0.0000 1 read_file, get_guidelines, list_components 182 58 $0.0000 2 get_component, get_component, get_component, get_component, get_component 5,257 130 $0.0000
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Button,
7 Card,
8 CardBody,
9 CardDescription,
10 CardFooter,
11 CardHeader,
12 CardTitle,
13 FormField,
14 FormatNumber,
15 Heading,
16 Input,
17 LocaleProvider,
18 NumberInput,
19 Select,
20 Stack,
21 Text,
22 } from "@vektos/ds";
23
24 type Account = (typeof data.accounts)[number];
25
26 export default function Page() {
27 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
28 const [beneficiaryName, setBeneficiaryName] = useState("");
29 const [beneficiaryIban, setBeneficiaryIban] = useState("");
30 const [amount, setAmount] = useState<number | null>(null);
31 const [reference, setReference] = useState("");
32 const [submitted, setSubmitted] = useState<{ amount: number; beneficiary: string } | null>(null);
33
34 const selectedAccount: Account =
35 data.accounts.find((account) => account.id === accountId) ?? data.accounts[0];
36 const balance = selectedAccount.available;
37
38 let amountError: string | undefined;
39 if (amount !== null) {
40 if (amount > balance) {
41 amountError = "Amount exceeds the available balance.";
42 } else if (amount <= 0) {
43 amountError = "Enter an amount greater than zero.";
44 }
45 }
46
47 const canSubmit =
48 amount !== null &&
49 amount > 0 &&
50 amount <= balance &&
51 beneficiaryName.trim() !== "" &&
52 beneficiaryIban.trim() !== "";
53
54 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
55 event.preventDefault();
56 if (!canSubmit || amount === null) return;
57 setSubmitted({ amount, beneficiary: beneficiaryName.trim() });
58 };
59
60 const handleNewTransfer = () => {
61 setSubmitted(null);
62 setAccountId(data.defaultAccountId);
63 setBeneficiaryName("");
64 setBeneficiaryIban("");
65 setAmount(null);
66 setReference("");
67 };
68
69 return (
70 <LocaleProvider locale="en-IE">
71 <div className="vektos">
72 <Stack gap="6" maxWidth="lg" marginBlock="8">
73 <Heading level={1}>Send a SEPA transfer</Heading>
74
75 {submitted ? (
76 <Card accent>
77 <CardHeader>
78 <CardTitle>Transfer sent</CardTitle>
79 <CardDescription>Your SEPA transfer has been submitted.</CardDescription>
80 </CardHeader>
81 <CardBody>
82 <Stack gap="2">
83 <Text>
84 Amount:{" "}
85 <Text as="span" weight="medium">
86 <FormatNumber value={submitted.amount} format="currency" currency="EUR" />
87 </Text>
88 </Text>
89 <Text>
90 Beneficiary:{" "}
91 <Text as="span" weight="medium">
92 {submitted.beneficiary}
93 </Text>
94 </Text>
95 </Stack>
96 </CardBody>
97 <CardFooter>
98 <Button variant="outline" onClick={handleNewTransfer}>
99 New transfer
100 </Button>
101 </CardFooter>
102 </Card>
103 ) : (
104 <form onSubmit={handleSubmit} noValidate>
105 <Card>
106 <CardHeader>
107 <CardTitle>Transfer details</CardTitle>
108 <CardDescription>Pay from one of your accounts.</CardDescription>
109 </CardHeader>
110 <CardBody>
111 <Stack gap="4">
112 <FormField label="Pay from" required>
113 <Select
114 value={accountId}
115 onValueChange={setAccountId}
116 options={data.accounts.map((account) => ({
117 label: account.name,
118 value: account.id,
119 }))}
120 />
121 </FormField>
122
123 <Stack flexDirection="row" gap="2" alignItems="baseline">
124 <Text size="sm" tone="muted">
125 Available balance
126 </Text>
127 <Text size="sm" weight="medium">
128 <FormatNumber value={balance} format="currency" currency="EUR" />
129 </Text>
130 </Stack>
131
132 <FormField label="Beneficiary name" required>
133 <Input
134 value={beneficiaryName}
135 onChange={(event) => setBeneficiaryName(event.target.value)}
136 placeholder="Name of the beneficiary"
137 />
138 </FormField>
139
140 <FormField label="Beneficiary IBAN" required>
141 <Input
142 value={beneficiaryIban}
143 onChange={(event) => setBeneficiaryIban(event.target.value)}
144 placeholder="IT00 X000 0000 0000 0000 0000 000"
145 />
146 </FormField>
147
148 <FormField label="Amount" required error={amountError}>
149 <NumberInput
150 value={amount}
151 onValueChange={setAmount}
152 format="currency"
153 currency="EUR"
154 fractionDigits={2}
155 min={0.01}
156 showSteppers={false}
157 />
158 </FormField>
159
160 <FormField label="Reference" helperText="Optional.">
161 <Input
162 value={reference}
163 onChange={(event) => setReference(event.target.value)}
164 placeholder="Invoice number, note…"
165 />
166 </FormField>
167 </Stack>
168 </CardBody>
169 <CardFooter>
170 <Button type="submit" disabled={!canSubmit}>
171 Send transfer
172 </Button>
173 </CardFooter>
174 </Card>
175 </form>
176 )}
177 </Stack>
178 </div>
179 </LocaleProvider>
180 );
181 }
182
get_component, get_component, get_component, get_component, get_component
4 get_component, get_component 4,905 53 $0.0000
5 write_file 1,286 4,737 $0.0000
6 write_file 20,255 1,522 $0.0000
7 write_file 6,313 1,235 $0.0000
8 list_tokens 2,836 320 $0.0000
9 list_tokens 574 107 $0.0000
10 write_file 2,158 1,424 $0.0000