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 1,367 37 $0.0000 1 read_file 1,424 37 $0.0000 2 list_components 1,716 50 $0.0000 3
cdb5d9e77633
Output cap The provider's default 3
4 import data from "./fixture.json";
5
6 import {
7 Select,
8 FormField,
9 Input,
10 NumberInput,
11 Button,
12 Alert,
13 FormatNumber,
14 Stack,
15 Text,
16 } from "@vektos/ds";
17
18 export default function Page() {
19 const accounts = data.accounts;
20 const defaultAccountId = data.defaultAccountId;
21
22 // state
23 const [selectedAccountId, setSelectedAccountId] = useState<string | null>(
24 defaultAccountId
25 );
26 const [beneficiaryName, setBeneficiaryName] = useState("");
27 const [beneficiaryIban, setBeneficiaryIban] = useState("");
28 const [amount, setAmount] = useState<number | null>(null);
29 const [reference, setReference] = useState("");
30 const [error, setError] = useState<string | null>(null);
31 const [submitted, setSubmitted] = useState(false);
32 const [confirmation, setConfirmation] = useState<{
33 amount: number;
34 beneficiary: string;
35 } | null>(null);
36
37 // derived
38 const selectedAccount = accounts.find((a) => a.id === selectedAccountId)!;
39 const balance = selectedAccount.available;
40
41 // handle account change
42 const handleAccountChange = (value: string) => {
43 setSelectedAccountId(value);
44 setError(null);
45 };
46
47 // handle amount change, validate vs balance
48 const handleAmountChange = (val: number | null) => {
49 setAmount(val ?? 0);
50 if (val && val > balance) {
51 setError(`Amount exceeds available balance of ${balance} EUR`);
52 } else {
53 setError(null);
54 }
55 };
56
57 const handleSubmit = (e: React.FormEvent) => {
58 e.preventDefault();
59 if (error) return;
60 // submit success
61 setSubmitted(true);
62 setConfirmation({
63 amount: amount!,
64 beneficiary: beneficiaryName,
65 });
66 // reset form
67 setBeneficiaryName("");
68 setBeneficiaryIban("");
69 setAmount(null);
70 setReference("");
71 setError(null);
72 };
73
74 return (
75 <Stack gap={4} maxWidth="90%">
76 {submitted && confirmation ? (
77 <Alert tone="success">
78 <FormatNumber
79 value={confirmation.amount}
80 format="currency"
81 currency="EUR"
82 />
83 <Text>
84 transferred to{" "}{confirmation.beneficiary}{" "}submitted successfully.
85 </Text>
86 </Alert>
87 ) : (
88 <form onSubmit={handleSubmit}>
89 {/* Account selector */}
90 <FormField
91 label="From account"
92 error={error}
93 helperText="Select the account to pay from"
94 >
95 <Select
96 placeholder="Select an account"
97 size="md"
98 options={accounts.map((ac) => ({
99 label: `${ac.name} (${ac.available} EUR)`,
100 value: ac.id,
101 }))}
102 value={selectedAccountId!}
103 onValueChange={handleAccountChange}
104 disabled={false}
105 />
106 </FormField>
107
108 {/* Balance display */}
109 <Text>
110 Available balance:{" "}
111 <FormatNumber
112 value={balance}
113 format="currency"
114 currency="EUR"
115 />{" "}
116 EUR
117 </Text>
118
119 {/* Beneficiary name */}
120 <FormField label="Beneficiary name">
121 <Input
122 placeholder="e.g. John Doe"
123 value={beneficiaryName}
124 onChange={(e) => setBeneficiaryName(e.target.value)}
125 />
126 </FormField>
127
128 {/* Beneficiary IBAN */}
129 <FormField label="Beneficiary IBAN">
130 <Input
131 placeholder="e.g. IT60 X054 2811 1010 0000 0123 456"
132 value={beneficiaryIban}
133 onChange={(e) => setBeneficiaryIban(e.target.value)}
134 />
135 </FormField>
136
137 {/* Amount */}
138 <FormField
139 label="Amount (EUR)"
140 error={error}
141 helperText="Must not exceed available balance"
142 >
143 <NumberInput
144 format="currency"
145 currency="EUR"
146 min={0.01}
147 step={0.01}
148 showSteppers={false}
149 value={amount ?? 0}
150 onValueChange={handleAmountChange}
151 />
152 </FormField>
153
154 {/* Reference (optional)}}
155 <FormField label="Reference (optional)">
156 <Input
157 placeholder="Optional reference"
158 value={reference}
159 onChange={(e) => setReference(e.target.value)}
160 />
161 </FormField>
162
163 {/* Submit button */}
164 <Button type="submit" disabled={!!error}>
165 Submit transfer
166 </Button>
167 </form>
168 )}
169 </Stack>
170 );
171 }
4 get_component 6,283 47 $0.0000
5 get_component 723 31 $0.0000
6 get_component 1,230 30 $0.0000
7 get_component 2,368 36 $0.0000
8 get_component 1,119 81 $0.0000
9 check_code 2,300 3,043 $0.0000
10 write_file 3,335 1,303 $0.0000
11 check_code 473 1,124 $0.0000