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 1 counted, under 1 rule. “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 51 $0.0000 1 read_file 1,455 38 $0.0000 2 list_components 1,748 44 $0.0000 3
cdb5d9e77633
Output cap The provider's default 3
4
5 import data from "./fixture.json";
6
7 import {
8 Card,
9 CardHeader,
10 CardTitle,
11 CardBody,
12 FormField,
13 Input,
14 NumberInput,
15 Select,
16 Button,
17 } from "@vektos/ds";
18
19 export default function Page() {
20 const [selectedId, setSelectedId] = useState(data.defaultAccountId);
21 const [beneficiaryName, setBeneficiaryName] = useState("");
22 const [beneficiaryIban, setBeneficiaryIban] = useState("");
23 const [amount, setAmount] = useState(0);
24 const [reference, setReference] = useState("");
25 const [submitted, setSubmitted] = useState(false);
26 const [error, setError] = useState("");
27
28 const account = data.accounts.find((a) => a.id === selectedId);
29 const balance = account ? account.available : 0;
30
31 const handleSubmit = (e: React.FormEvent) => {
32 e.preventDefault();
33 setError("");
34 if (amount > balance) {
35 setError("Amount exceeds available balance");
36 return;
37 }
38 // simulate successful transfer
39 setSubmitted(true);
40 };
41
42 return (
43 <Card>
44 <CardHeader>
45 <CardTitle>SEPA Transfer</CardTitle>
46 </CardHeader>
47 <CardBody>
48 {!submitted ? (
49 <form onSubmit={handleSubmit}>
50 <FormField label="From account" required>
51 <Select
52 placeholder="Select account"
53 options={data.accounts.map((a) => ({ label: a.name, value: a.id }))}
54 value={selectedId}
55 onValueChange={setSelectedId}
56 aria-label="From account"
57 />
58 </FormField>
59
60 <FormField label="Beneficiary name" required>
61 <Input
62 placeholder="e.g. John Doe"
63 value={beneficiaryName}
64 onChange={(e) => setBeneficiaryName(e.target.value)}
65 aria-label="Beneficiary name"
66 />
67 </FormField>
68
69 <FormField label="Beneficiary IBAN" required>
70 <Input
71 placeholder="e.g. IT60 X054 2811 1010 0000 0123 456"
72 value={beneficiaryIban}
73 onChange={(e) => setBeneficiaryIban(e.target.value)}
74 aria-label="Beneficiary IBAN"
75 />
76 </FormField>
77
78 <FormField
79 label={`Amount (available: ${balance.toFixed(2)} EUR)`}
80 error={error ? error : undefined}
81 >
82 <NumberInput
83 format="currency"
84 currency="EUR"
85 fractionDigits={2}
86 min={0.01}
87 max={balance}
88 showSteppers={false}
89 value={amount}
90 onValueChange={(val) => {
91 setAmount(val ?? 0);
92 if (val !== null && val <= balance) {
93 setError("");
94 }
95 }}
96 aria-label="Amount"
97 />
98 </FormField>
99
100 {reference && (
101 <FormField label="Reference (optional)">
102 <Input
103 placeholder="Optional reference"
104 value={reference}
105 onChange={(e) => setReference(e.target.value)}
106 aria-label="Reference"
107 />
108 </FormField>
109 )}
110
111 <Button type="submit" disabled={amount > balance || !selectedId || submitted}>
112 {submitted ? "Sent" : "Submit"}
113 </Button>
114 </form>
115 ) : (
116 <p className="mt-4">
117 Transfer of <strong>{amount} EUR</strong> to <strong>{beneficiaryName}</strong> submitted successfully.
118 </p>
119 )}
120 </CardBody>
121 </Card>
122 );
123 }
4 get_component 5,620 68 $0.0000
5 get_component 1,972 30 $0.0000
6 get_component 3,110 31 $0.0000
7 write_file 1,726 2,265 $0.0000
8 check_code 6,114 888 $0.0000