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 3 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 10 33 $0.0000 1 read_file 57 35 $0.0000 2 get_guidelines, list_components 339 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 Text,
20 Toaster,
21 } from "@vektos/ds";
22 import { css } from "styled-system/css";
23
24 type Account = (typeof data.accounts)[number];
25
26 export default function Page() {
27 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
28 const account = data.accounts.find((a) => a.id === accountId) as Account;
29
30 const [beneficiaryName, setBeneficiaryName] = useState("");
31 const [iban, setIban] = useState("");
32 const [amount, setAmount] = useState<number | null>(null);
33 const [reference, setReference] = useState("");
34 const [submitting, setSubmitting] = useState(false);
35 const [submitted, setSubmitted] = useState<{
36 amount: number;
37 beneficiary: string;
38 } | null>(null);
39
40 const amountError =
41 amount === null
42 ? undefined
43 : amount <= 0
44 ? "Enter an amount greater than zero."
45 : amount > account.available
46 ? "Amount exceeds the available balance."
47 : undefined;
48
49 const canSubmit =
50 beneficiaryName.trim() !== "" &&
51 iban.trim() !== "" &&
52 amount !== null &&
53 amount > 0 &&
54 amount <= account.available &&
55 !submitting;
56
57 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
58 event.preventDefault();
59 if (!canSubmit || amount === null) return;
60 setSubmitting(true);
61 window.setTimeout(() => {
62 setSubmitted({ amount, beneficiary: beneficiaryName.trim() });
63 setSubmitting(false);
64 }, 300);
65 };
66
67 const handleReset = () => {
68 setSubmitted(null);
69 setAccountId(data.defaultAccountId);
70 setBeneficiaryName("");
71 setIban("");
72 setAmount(null);
73 setReference("");
74 };
75
76 if (submitted) {
77 return (
78 <div
79 className={`vektos ${css({
80 minHeight: "100vh",
81 bg: "bg.canvas",
82 color: "fg.default",
83 p: { base: "4", md: "8" },
84 })}`}
85 >
86 <Stack gap="6" maxWidth="lg" marginInline="auto" width="full">
87 <Heading level={1}>SEPA transfer</Heading>
88 <Alert tone="success" title="Transfer sent">
89 <FormatNumber
90 value={submitted.amount}
91 format="currency"
92 currency={data.currency}
93 />{" "}
94 to {submitted.beneficiary}
95 </Alert>
96 <Button variant="outline" onClick={handleReset}>
97 Send another transfer
98 </Button>
99 </Stack>
100 <Toaster />
101 </div>
102 );
103 }
104
105 return (
106 <div
107 className={`vektos ${css({
108 minHeight: "100vh",
109 bg: "bg.canvas",
110 color: "fg.default",
111 p: { base: "4", md: "8" },
112 })}`}
113 >
114 <Stack gap="6" maxWidth="lg" marginInline="auto" width="full">
115 <Heading level={1}>SEPA transfer</Heading>
116 <Card>
117 <CardHeader>
118 <CardTitle>Transfer details</CardTitle>
119 </CardHeader>
120 <CardBody>
121 <form onSubmit={handleSubmit}>
122 <Stack gap="4">
123 <FormField label="Pay from account" 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 size="sm" tone="muted">
135 Available balance:{" "}
136 <FormatNumber
137 value={account.available}
138 format="currency"
139 currency={data.currency}
140 />
141 </Text>
142
143 <FormField label="Beneficiary name" required>
144 <Input
145 value={beneficiaryName}
146 onChange={(e) => setBeneficiaryName(e.target.value)}
147 placeholder="Full name"
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 label="Amount" required error={amountError}>
160 <NumberInput
161 value={amount}
162 onValueChange={setAmount}
163 format="currency"
164 currency={data.currency}
165 fractionDigits={2}
166 min={0.01}
167 showSteppers={false}
168 placeholder="0.00"
169 />
170 </FormField>
171
172 <FormField label="Reference" helperText="Optional">
173 <Input
174 value={reference}
175 onChange={(e) => setReference(e.target.value)}
176 placeholder="Invoice number, note…"
177 />
178 </FormField>
179
180 <Stack flexDirection="row" justifyContent="flex-end" gap="2">
181 <Button type="submit" disabled={!canSubmit}>
182 {submitting ? "Sending…" : "Send transfer"}
183 </Button>
184 </Stack>
185 </Stack>
186 </form>
187 </CardBody>
188 </Card>
189 </Stack>
190 <Toaster />
191 </div>
192 );
193 }
get_component, get_component, get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component, get_component 4,809 143 $0.0000
5 get_component, get_component, get_component, list_tokens 15,172 107 $0.0000
6 list_files 3,048 69 $0.0000
7 write_file 123 3,866 $0.0000
8 write_file 12,461 1,280 $0.0000
9 write_file 1,349 1,516 $0.0000