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 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 1,384 32 $0.0000 1 read_file 1,436 35 $0.0000 2 list_components 1,726 75 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 FormField,
7 Input,
8 Select,
9 Button,
10 Stack,
11 Text,
12 Alert,
13 NumberInput,
14 FormatNumber,
15 IconButton,
16 CloseButton,
17 } from "@vektos/ds";
18
19 type Account = {
20 id: string;
21 name: string;
22 iban: string;
23 available: number;
24 };
25
26 const accounts: Account[] = data.accounts;
27
28 export default function Page() {
29 const [selectedId, setSelectedId] = React.useState<string | null>(data.defaultAccountId);
30 const [beneficiaryName, setBeneficiaryName] = React.useState("");
31 const [beneficiaryIban, setBeneficiaryIban] = React.useState("");
32 const [amount, setAmount] = React.useState<number | null>(null);
33 const [reference, setReference] = React.useState("");
34 const [submitted, setSubmitted] = React.useState(false);
35 const [error, setError] = React.useState<string | null>(null);
36
37 const selectedAccount = accounts.find((a) => a.id === selectedId) || accounts[0];
38 const availableBalance = selectedAccount.available;
39
40 // options for the account select
41 const optionList = accounts.map((acc) => ({
42 label: acc.name,
43 value: acc.id,
44 }));
45
46 const onSubmit = (e: React.FormEvent) => {
47 e.preventDefault();
48 if (amount == null || amount > availableBalance) {
49 setError("Amount exceeds available balance");
50 setSubmitted(false);
51 return;
52 }
53 setError(null);
54 setSubmitted(true);
55 // reset after 3 s
56 setTimeout(() => setSubmitted(false), 3000);
57 };
58
59 return (
60 <form onSubmit={onSubmit}>
61 <main>
62 <h1>SEPA Transfer</h1>
63
64 {/* From account */}
65 <FormField label="From account">
66 <Select
67 value={selectedId ?? ""}
68 onValueChange={setSelectedId}
69 placeholder="Select an account"
70 disabled
71 options={optionList}
72 />
73 </FormField>
74
75 {/* Available balance */}
76 <Text>Available balance:{" "}
77 <FormatNumber
78 value={availableBalance}
79 format="currency"
80 currency={data.currency}
81 />{" "}
82 {selectedAccount.name}</Text>
83
84 {/* Beneficiary name */}
85 <FormField label="Beneficiary name">
86 <Input
87 value={beneficiaryName}
88 onChange={(e) => setBeneficiaryName(e.target.value)}
89 placeholder="e.g. Acme Corp"
90 />
91 </FormField>
92
93 {/* Beneficiary IBAN */}
94 <FormField label="Beneficiary IBAN">
95 <Input
96 value={beneficiaryIban}
97 onChange={(e) => setBeneficiaryIban(e.target.value)}
98 placeholder="e.g. IT60 X054 2811 1010 0000 0123 456"
99 />
100 </FormField>
101
102 {/* Amount */}
103 <FormField label="Amount (EUR)" invalid={!!error}>
104 <NumberInput
105 value={amount}
106 onValueChange={(v) => {
107 setAmount(v ?? null);
108 setError(v != null && v > availableBalance ? "Amount exceeds available balance" : null);
109 }}
110 format="currency"
111 currency={data.currency}
112 fractionDigits={2}
113 min={0}
114 showSteppers={false}
115 placeholder="0.00"
116 />
117 {error && (
118 <Text tone="danger">
119 {error}
120 </Text>
121 )}
122 </FormField>
123
124 {/* Optional reference */}
125 <FormField label="Reference (optional)">
126 <Input
127 value={reference}
128 onChange={(e) => setReference(e.target.value)}
129 placeholder="Optional reference"
130 />
131 </FormField>
132
133 {/* Submit button */}
134 <Button
135 disabled={!amount || amount > availableBalance || submitted}
136 >
137 {submitted ? "Sent!" : "Transfer"}
138 </Button>
139
140 {/* Confirmation after successful submit */}
141 {submitted && (
142 <Alert tone="success">
143 <Stack>
144 <Text>
145 €{" "}
146 {amount != null ? amount.toFixed(2) : "0.00"}
147 {" transferred to "}
148 {beneficiaryName}
149 </Text>
150 <IconButton
151 aria-label="close confirmation"
152 variant="ghost"
153 onClick={() => setSubmitted(false)}
154 >
155 <CloseButton />
156 </IconButton>
157 </Stack>
158 </Alert>
159 )}
160 </main>
161 </form>
162 );
163 }
4 check_code 5,949 1,098 $0.0000
5 get_component 4,344 167 $0.0000
6 get_component 1,063 59 $0.0000
7 get_component 2,230 51 $0.0000
8 get_component 3,092 70 $0.0000
9 get_component 2,298 53 $0.0000
10 list_tokens 1,355 362 $0.0000
11 write_file 1,918 2,945 $0.0000
12 check_code 4,890 1,159 $0.0000
13 write_file 2,477 2,469 $0.0000
14 check_code 2,877 1,098 $0.0000
15 write_file 4,243 1,825 $0.0000
16 check_code 1,903 1,103 $0.0000
17 write_file 1,074 1,615 $0.0000
18 check_code 620 1,088 $0.0000
19 write_file 1,843 1,868 $0.0000