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 155 35 $0.0000 1 read_file, get_guidelines, list_components 780 58 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component 5,215 151 $0.0000
Output cap The provider's default 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 type Submitted = { amount: number; beneficiary: string };
24
25 export default function Page() {
26 const [accountId, setAccountId] = useState(data.defaultAccountId);
27 const account =
28 data.accounts.find((a) => a.id === accountId) ?? data.accounts[0];
29
30 const [beneficiary, setBeneficiary] = useState("");
31 const [iban, setIban] = useState("");
32 const [amount, setAmount] = useState<number | null>(null);
33 const [reference, setReference] = useState("");
34 const [submitted, setSubmitted] = useState<Submitted | null>(null);
35
36 const amountError =
37 amount !== null && amount > account.available
38 ? "The amount is higher than the available balance."
39 : undefined;
40
41 const canSubmit =
42 beneficiary.trim() !== "" &&
43 iban.trim() !== "" &&
44 amount !== null &&
45 amount > 0 &&
46 amountError === undefined;
47
48 function handleSubmit(event: React.FormEvent) {
49 event.preventDefault();
50 if (!canSubmit || amount === null) return;
51 setSubmitted({ amount, beneficiary: beneficiary.trim() });
52 }
53
54 return (
55 <div className="vektos">
56 <Stack gap="6" marginBlock="6" maxWidth="lg">
57 <Heading level={1}>Send a SEPA transfer</Heading>
58
59 {submitted ? (
60 <Alert tone="success" title="Transfer sent">
61 <FormatNumber
62 value={submitted.amount}
63 format="currency"
64 currency={data.currency}
65 />{" "}
66 to {submitted.beneficiary}.
67 </Alert>
68 ) : null}
69
70 <Card>
71 <CardHeader>
72 <CardTitle>Transfer details</CardTitle>
73 </CardHeader>
74 <form onSubmit={handleSubmit}>
75 <CardBody>
76 <Stack gap="4">
77 <FormField label="Pay from" required>
78 <Select
79 value={accountId}
80 onValueChange={setAccountId}
81 options={data.accounts.map((a) => ({
82 label: a.name,
83 value: a.id,
84 }))}
85 />
86 </FormField>
87
88 <Text size="sm" tone="muted">
89 Available balance:{" "}
90 <FormatNumber
91 value={account.available}
92 format="currency"
93 currency={data.currency}
94 />
95 </Text>
96
97 <FormField label="Beneficiary name" required>
98 <Input
99 value={beneficiary}
100 onChange={(e) => setBeneficiary(e.target.value)}
101 placeholder="Recipient name"
102 />
103 </FormField>
104
105 <FormField label="Beneficiary IBAN" required>
106 <Input
107 value={iban}
108 onChange={(e) => setIban(e.target.value)}
109 placeholder="IT00 X000 0000 0000 0000 0000 000"
110 />
111 </FormField>
112
113 <FormField
114 label="Amount"
115 required
116 error={amountError}
117 helperText={
118 amountError
119 ? undefined
120 : "Enter an amount up to the available balance."
121 }
122 >
123 <NumberInput
124 value={amount}
125 onValueChange={setAmount}
126 format="currency"
127 currency={data.currency}
128 fractionDigits={2}
129 min={0.01}
130 showSteppers={false}
131 placeholder="0.00"
132 />
133 </FormField>
134
135 <FormField label="Reference" helperText="Optional.">
136 <Input
137 value={reference}
138 onChange={(e) => setReference(e.target.value)}
139 placeholder="Invoice number or note"
140 />
141 </FormField>
142 </Stack>
143 </CardBody>
144 <CardFooter>
145 <Button type="submit" variant="solid" disabled={!canSubmit}>
146 Send transfer
147 </Button>
148 </CardFooter>
149 </form>
150 </Card>
151 </Stack>
152 </div>
153 );
154 }
3 get_component, get_component, get_component, get_component, get_component, get_component 10,188 139 $0.0000
4 get_component, get_component, list_tokens, list_tokens 4,914 120 $0.0000
5 list_files 2,848 90 $0.0000
7 write_file 108 3,620 $0.0000
8 list_tokens 3,688 49 $0.0000
9 check_code 323 1,241 $0.0000
10 write_file 1,268 1,504 $0.0000
11 check_code 1,580 948 $0.0000
12 write_file 1,016 986 $0.0000
13 check_code 1,066 936 $0.0000