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 2,335 30 $0.0000 1 read_file, list_files 75 42 $0.0000 2 list_files 2,680 39 $0.0000 3
Output cap The provider's default 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 } from "@vektos/ds";
20
21 type Account = (typeof data.accounts)[number];
22
23 export default function Page() {
24 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
25 const account = data.accounts.find((a) => a.id === accountId) ?? data.accounts[0];
26
27 const [beneficiaryName, setBeneficiaryName] = useState("");
28 const [iban, setIban] = useState("");
29 const [amount, setAmount] = useState<number | null>(null);
30 const [reference, setReference] = useState("");
31
32 const [submission, setSubmission] = useState<{
33 amount: number;
34 beneficiary: string;
35 } | null>(null);
36
37 const amountError =
38 amount !== null && amount > account.available
39 ? "Amount exceeds the available balance."
40 : undefined;
41
42 const canSubmit =
43 beneficiaryName.trim().length > 0 &&
44 iban.trim().length > 0 &&
45 amount !== null &&
46 amount > 0 &&
47 !amountError;
48
49 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
50 event.preventDefault();
51 if (!canSubmit || amount === null) return;
52 setSubmission({ amount, beneficiary: beneficiaryName.trim() });
53 setBeneficiaryName("");
54 setIban("");
55 setAmount(null);
56 setReference("");
57 }
58
59 return (
60 <Stack gap="6">
61 <Heading level={1}>Send a SEPA transfer</Heading>
62
63 {submission && (
64 <Alert tone="success" title="Transfer sent">
65 <FormatNumber
66 value={submission.amount}
67 format="currency"
68 currency={data.currency}
69 />{" "}
70 to {submission.beneficiary}
71 </Alert>
72 )}
73
74 <Card>
75 <CardHeader>
76 <CardTitle>Transfer details</CardTitle>
77 </CardHeader>
78 <CardBody>
79 <form onSubmit={handleSubmit}>
80 <Stack gap="4">
81 <FormField
82 label="Pay from"
83 required
84 helperText={
85 <>
86 Available balance:{" "}
87 <FormatNumber
88 value={account.available}
89 format="currency"
90 currency={data.currency}
91 />
92 </>
93 }
94 >
95 <Select
96 value={accountId}
97 onValueChange={setAccountId}
98 options={data.accounts.map((a: Account) => ({
99 label: a.name,
100 value: a.id,
101 }))}
102 />
103 </FormField>
104
105 <FormField label="Beneficiary name" required>
106 <Input
107 value={beneficiaryName}
108 onChange={(event) => setBeneficiaryName(event.target.value)}
109 placeholder="Full name"
110 />
111 </FormField>
112
113 <FormField label="Beneficiary IBAN" required>
114 <Input
115 value={iban}
116 onChange={(event) => setIban(event.target.value)}
117 placeholder="IT00 X000 0000 0000 0000 0000 000"
118 />
119 </FormField>
120
121 <FormField
122 label="Amount"
123 required
124 error={amountError}
125 helperText="Enter an amount up to the available balance."
126 >
127 <NumberInput
128 format="currency"
129 currency={data.currency}
130 fractionDigits={2}
131 min={0.01}
132 showSteppers={false}
133 value={amount}
134 onValueChange={setAmount}
135 />
136 </FormField>
137
138 <FormField label="Reference" helperText="Optional">
139 <Input
140 value={reference}
141 onChange={(event) => setReference(event.target.value)}
142 placeholder="Invoice number, note…"
143 />
144 </FormField>
145
146 <Stack flexDirection="row" justifyContent="flex-end">
147 <Button variant="solid" type="submit" disabled={!canSubmit}>
148 Send transfer
149 </Button>
150 </Stack>
151 </Stack>
152 </form>
153 </CardBody>
154 </Card>
155 </Stack>
156 );
157 }
158
6 docs-show, docs-show, docs-show, docs-show 5,824 110 $0.0000
7 docs-show, docs-show, docs-show, docs-show 3,088 137 $0.0000
8 docs-show, docs-show, docs-show, docs-show 3,441 148 $0.0000
9 write_file 2,967 4,779 $0.0000
10 write_file 4,826 958 $0.0000
11 stories-find-by-component 18,224 226 $0.0000