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 2 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 113 30 $0.0000 1 read_file, get_guidelines 797 47 $0.0000 2 list_components, list_tokens 2,829 40 $0.0000 3
Output cap 20,000 tokens a step 3 import { useState } from "react";
4 import data from "./fixture.json";
5 import {
6 Alert,
7 Button,
8 Card,
9 CardBody,
10 CardFooter,
11 CardHeader,
12 CardTitle,
13 FormField,
14 FormatNumber,
15 Heading,
16 Input,
17 NumberInput,
18 Select,
19 Stack,
20 Text,
21 } from "@vektos/ds";
22
23 export default function Page() {
24 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
25 const [beneficiary, setBeneficiary] = useState("");
26 const [iban, setIban] = useState("");
27 const [amount, setAmount] = useState<number | null>(null);
28 const [reference, setReference] = useState("");
29 const [submitted, setSubmitted] = useState<{ amount: number; beneficiary: string } | null>(null);
30 const [submitAttempted, setSubmitAttempted] = useState(false);
31
32 const balance =
33 (data.accounts.find((account) => account.id === accountId) ?? data.accounts[0])
34 ?.available ?? 0;
35
36 const amountError =
37 amount === null
38 ? submitAttempted
39 ? "Enter an amount."
40 : undefined
41 : amount <= 0
42 ? "Enter an amount greater than zero."
43 : amount > balance
44 ? "The amount exceeds the available balance."
45 : undefined;
46
47 const beneficiaryError =
48 submitAttempted && beneficiary.trim() === ""
49 ? "Enter the beneficiary name."
50 : undefined;
51
52 const ibanError =
53 submitAttempted && iban.trim() === ""
54 ? "Enter the beneficiary IBAN."
55 : undefined;
56
57 const canSubmit =
58 beneficiary.trim() !== "" &&
59 iban.trim() !== "" &&
60 amount !== null &&
61 amount > 0 &&
62 amount <= balance;
63
64 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
65 event.preventDefault();
66 if (!canSubmit || amount === null) {
67 setSubmitAttempted(true);
68 return;
69 }
70 setSubmitted({ amount, beneficiary: beneficiary.trim() });
71 setAccountId(data.defaultAccountId);
72 setBeneficiary("");
73 setIban("");
74 setAmount(null);
75 setReference("");
76 setSubmitAttempted(false);
77 }
78
79 return (
80 <div className="vektos">
81 <Stack gap="6" marginBlock="6" marginInline="auto" maxWidth="md">
82 <Heading level={1}>Send a SEPA transfer</Heading>
83
84 {submitted && (
85 <Alert tone="success" title="Transfer sent">
86 <FormatNumber
87 value={submitted.amount}
88 format="currency"
89 currency={data.currency}
90 />{" "}
91 to {submitted.beneficiary}.
92 </Alert>
93 )}
94
95 <Card>
96 <CardHeader>
97 <CardTitle>New transfer</CardTitle>
98 </CardHeader>
99 <form onSubmit={handleSubmit}>
100 <CardBody>
101 <Stack gap="4">
102 <FormField label="Pay from" required>
103 <Select
104 options={data.accounts.map((account) => ({
105 label: account.name,
106 value: account.id,
107 }))}
108 value={accountId}
109 onValueChange={setAccountId}
110 />
111 </FormField>
112
113 <Stack gap="1">
114 <Text size="sm" tone="muted">
115 Available balance
116 </Text>
117 <Text size="md" weight="semibold">
118 <FormatNumber
119 value={balance}
120 format="currency"
121 currency={data.currency}
122 />
123 </Text>
124 </Stack>
125
126 <FormField label="Beneficiary name" required error={beneficiaryError}>
127 <Input
128 value={beneficiary}
129 onChange={(event) => setBeneficiary(event.target.value)}
130 placeholder="Name of the beneficiary"
131 />
132 </FormField>
133
134 <FormField label="Beneficiary IBAN" required error={ibanError}>
135 <Input
136 value={iban}
137 onChange={(event) => setIban(event.target.value)}
138 placeholder="IT00 X000 0000 0000 0000 0000 000"
139 />
140 </FormField>
141
142 <FormField label="Amount" required error={amountError}>
143 <NumberInput
144 value={amount}
145 onValueChange={setAmount}
146 format="currency"
147 currency={data.currency}
148 fractionDigits={2}
149 min={0.01}
150 showSteppers={false}
151 placeholder="0.00"
152 />
153 </FormField>
154
155 <FormField label="Reference" helperText="Optional message to the beneficiary.">
156 <Input
157 value={reference}
158 onChange={(event) => setReference(event.target.value)}
159 placeholder="Invoice number or note"
160 />
161 </FormField>
162 </Stack>
163 </CardBody>
164 <CardFooter>
165 <Button type="submit" variant="solid" disabled={!canSubmit}>
166 Send transfer
167 </Button>
168 </CardFooter>
169 </form>
170 </Card>
171 </Stack>
172 </div>
173 );
174 }
list_tokens, list_tokens, list_tokens, list_tokens, list_tokens, list_tokens
4 get_component, get_component, get_component, get_component, get_component 1,042 134 $0.0000
5 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 3,525 172 $0.0000
6 get_component, get_component 7,310 51 $0.0000
7 list_files 1,036 142 $0.0000
8 read_file 19,304 68 $0.0000
10 write_file, check_code check_code: 2 violations:
- line 34: typecheck/TS18048: 'selectedAccount' is possibly 'undefined'.
- line 70: lint/typescript(no-unnecessary-type-assertion): This assertion is unnecessary since it does not change the type of the expression.
60 5,841 $0.0000
11 write_file 6,124 1,564 $0.0000
12 check_code check_code: 1 violations:
- line 70: lint/typescript(no-unnecessary-type-assertion): This assertion is unnecessary since it does not change the type of the expression.
1,632 1,104 $0.0000
13 write_file 28,832 1,376 $0.0000
14 check_code check_code: No violations.
1,432 1,102 $0.0000