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 3 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 159 28 $0.0000 1 read_file 73 34 $0.0000 2 docs-list 290 34 $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 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 import { css } from "styled-system/css";
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 [beneficiary, setBeneficiary] = useState("");
30 const [iban, setIban] = 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 accountName: string;
38 } | null>(null);
39
40 const balance = account.available;
41 const amountError =
42 amount !== null && amount > balance
43 ? "Amount exceeds the available balance."
44 : undefined;
45
46 const canSubmit =
47 beneficiary.trim() !== "" &&
48 iban.trim() !== "" &&
49 amount !== null &&
50 amount > 0 &&
51 !amountError;
52
53 function handleSubmit(event: FormEvent<HTMLFormElement>) {
54 event.preventDefault();
55 if (!canSubmit || amount === null) return;
56 setSubmitted({
57 amount,
58 beneficiary: beneficiary.trim(),
59 accountName: account.name,
60 });
61 }
62
63 if (submitted) {
64 return (
65 <main
66 className={css({
67 maxWidth: "640px",
68 margin: "0 auto",
69 padding: "6",
70 })}
71 >
72 <Stack gap="4">
73 <Heading level={1}>SEPA transfer</Heading>
74 <Alert tone="success" title="Transfer submitted">
75 <FormatNumber
76 value={submitted.amount}
77 format="currency"
78 currency={data.currency}
79 />{" "}
80 to {submitted.beneficiary}.
81 </Alert>
82 <Card>
83 <CardBody>
84 <Text tone="muted" size="sm">
85 From {submitted.accountName}
86 </Text>
87 </CardBody>
88 </Card>
89 <Button
90 variant="outline"
91 onClick={() => {
92 setSubmitted(null);
93 setBeneficiary("");
94 setIban("");
95 setAmount(null);
96 setReference("");
97 }}
98 >
99 Send another transfer
100 </Button>
101 </Stack>
102 </main>
103 );
104 }
105
106 return (
107 <main
108 className={css({
109 maxWidth: "640px",
110 margin: "0 auto",
111 padding: "6",
112 })}
113 >
114 <Stack gap="4">
115 <Heading level={1}>SEPA transfer</Heading>
116 <Card>
117 <form onSubmit={handleSubmit}>
118 <CardHeader>
119 <CardTitle>Payment details</CardTitle>
120 </CardHeader>
121 <CardBody>
122 <Stack gap="4">
123 <FormField label="Pay from" required>
124 <Select
125 value={accountId}
126 onValueChange={setAccountId}
127 options={data.accounts.map((a) => ({
128 label: a.name,
129 value: a.id,
130 }))}
131 />
132 </FormField>
133
134 <Text tone="muted" size="sm">
135 Available balance:{" "}
136 <FormatNumber
137 value={balance}
138 format="currency"
139 currency={data.currency}
140 />
141 </Text>
142
143 <FormField label="Beneficiary name" required>
144 <Input
145 value={beneficiary}
146 onChange={(e) => setBeneficiary(e.target.value)}
147 placeholder="Name of the beneficiary"
148 />
149 </FormField>
150
151 <FormField label="Beneficiary IBAN" required>
152 <Input
153 value={iban}
154 onChange={(e) => setIban(e.target.value)}
155 placeholder="IT00 X000 0000 0000 0000 0000 000"
156 />
157 </FormField>
158
159 <FormField
160 label="Amount"
161 required
162 helperText="In the invoice currency, without the symbol."
163 error={amountError}
164 >
165 <NumberInput
166 value={amount}
167 onValueChange={setAmount}
168 format="currency"
169 currency={data.currency}
170 fractionDigits={2}
171 min={0.01}
172 showSteppers={false}
173 />
174 </FormField>
175
176 <FormField label="Reference">
177 <Input
178 value={reference}
179 onChange={(e) => setReference(e.target.value)}
180 placeholder="Optional reference"
181 />
182 </FormField>
183 </Stack>
184 </CardBody>
185 <CardFooter>
186 <Button variant="solid" disabled={!canSubmit} type="submit">
187 Send transfer
188 </Button>
189 </CardFooter>
190 </form>
191 </Card>
192 </Stack>
193 </main>
194 );
195 }
196
4 docs-show, docs-show, docs-show 1,611 86 $0.0000
5 docs-show, docs-show, docs-show 1,954 74 $0.0000
6 docs-show, docs-show 9,983 70 $0.0000
7 docs-show, docs-show 1,223 50 $0.0000
12 list_files 96 1,657 $0.0000
13 read_file 1,703 69 $0.0000
14 docs-show-story 137 110 $0.0000
15 write_file 215 1,836 $0.0000
16 write_file 1,883 1,423 $0.0000
17 stories-changed 1,474 78 $0.0000
18 write_file 8,112 1,283 $0.0000