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 2 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 30 $0.0000 1 read_file 203 31 $0.0000 2 docs-list 481 37 $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 CardDescription,
11 CardFooter,
12 CardHeader,
13 CardTitle,
14 FormField,
15 FormatNumber,
16 Heading,
17 Input,
18 NumberInput,
19 Select,
20 Stack,
21 Text,
22 } from "@vektos/ds";
23
24 type Account = (typeof data.accounts)[number];
25
26 export default function Page() {
27 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
28 const selected = data.accounts.find((a) => a.id === accountId) as Account;
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
35 const [submitted, setSubmitted] = useState<{
36 amount: number;
37 beneficiary: string;
38 } | null>(null);
39
40 const amountError =
41 amount !== null && amount > selected.available
42 ? "The amount exceeds the available balance."
43 : undefined;
44
45 const canSubmit =
46 !!selected &&
47 beneficiary.trim() !== "" &&
48 iban.trim() !== "" &&
49 amount !== null &&
50 amount > 0 &&
51 amount <= selected.available;
52
53 const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
54 e.preventDefault();
55 if (!canSubmit) return;
56 setSubmitted({ amount: amount!, beneficiary: beneficiary.trim() });
57 };
58
59 return (
60 <Stack gap="6">
61 <Heading level={1}>Send a SEPA transfer</Heading>
62 {submitted && (
63 <Alert tone="success" title="Transfer sent">
64 <Text as="span">
65 <FormatNumber
66 value={submitted.amount}
67 format="currency"
68 currency={data.currency}
69 />{" "}
70 to {submitted.beneficiary}.
71 </Text>
72 </Alert>
73 )}
74 <form onSubmit={handleSubmit}>
75 <Card>
76 <CardHeader>
77 <CardTitle>SEPA transfer</CardTitle>
78 <CardDescription>
79 Send money to a beneficiary in the SEPA area.
80 </CardDescription>
81 </CardHeader>
82 <CardBody>
83 <Stack gap="4">
84 <FormField
85 label="Pay from"
86 helperText={
87 <>
88 Available balance:{" "}
89 <FormatNumber
90 value={selected.available}
91 format="currency"
92 currency={data.currency}
93 />
94 </>
95 }
96 >
97 <Select
98 options={data.accounts.map((a) => ({
99 label: a.name,
100 value: a.id,
101 }))}
102 value={accountId}
103 onValueChange={setAccountId}
104 />
105 </FormField>
106 <FormField label="Beneficiary name">
107 <Input
108 value={beneficiary}
109 onChange={(e) => setBeneficiary(e.target.value)}
110 placeholder="Beneficiary name"
111 />
112 </FormField>
113 <FormField label="Beneficiary IBAN">
114 <Input
115 value={iban}
116 onChange={(e) => setIban(e.target.value)}
117 placeholder="IT00 ..."
118 />
119 </FormField>
120 <FormField label="Amount" error={amountError}>
121 <NumberInput
122 format="currency"
123 currency={data.currency}
124 fractionDigits={2}
125 min={0.01}
126 showSteppers={false}
127 value={amount}
128 onValueChange={setAmount}
129 />
130 </FormField>
131 <FormField label="Reference">
132 <Input
133 value={reference}
134 onChange={(e) => setReference(e.target.value)}
135 placeholder="Optional reference"
136 />
137 </FormField>
138 </Stack>
139 </CardBody>
140 <CardFooter>
141 <Button disabled={!canSubmit}>Send transfer</Button>
142 </CardFooter>
143 </Card>
144 </form>
145 </Stack>
146 );
147 }
148
docs-show, docs-show, docs-show
4 docs-show-story 2,715 137 $0.0000
5 docs-show-story 288 67 $0.0000
6 docs-show, docs-show, docs-show 216 78 $0.0000
7 docs-show, docs-show, docs-show, docs-show 2,649 92 $0.0000
9 docs-show, docs-show 444 74 $0.0000
10 write_file 1,864 4,115 $0.0000
11 list_files 4,147 58 $0.0000
13 list_files 18,225 29 $0.0000
14 write_file 96 1,467 $0.0000
15 write_file 1,523 1,057 $0.0000