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 15 counted, under 5 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,744 75 $0.0000 1 read_file 3,935 46 $0.0000 2 docs-list 4,236 202 $0.0000 3
cdb5d9e77633
Output cap The provider's default 3
4
5 import data from "./fixture.json";
6
7 import {
8 FormField,
9 Input,
10 Select,
11 Button,
12 } from "@vektos/ds";
13
14 export default function Page() {
15 const [selectedId, setSelectedId] = useState(data.defaultAccountId);
16 const [beneficiaryName, setBeneficiaryName] = useState("");
17 const [beneficiaryIban, setBeneficiaryIban] = useState("");
18 const [amount, setAmount] = useState("");
19 const [reference, setReference] = useState("");
20 const [error, setError] = useState<string | null>(null);
21 const [submitted, setSubmitted] = useState(false);
22 const [confirmation, setConfirmation] = useState<{
23 amount: string;
24 beneficiary: string;
25 } | null>(null);
26
27 const selectedAccount = data.accounts.find((a) => a.id === selectedId)!;
28 const balance = selectedAccount.available;
29
30 const handleAmountChange = (value: string) => {
31 const num = parseFloat(value) || 0;
32 if (num > balance) {
33 setError("Amount exceeds available balance");
34 } else {
35 setError(null);
36 }
37 };
38
39 const handleSubmit = (e: React.FormEvent) => {
40 e.preventDefault();
41 setSubmitted(true);
42 setConfirmation({
43 amount,
44 beneficiary: beneficiaryName,
45 });
46 setError(null);
47 };
48
49 if (submitted) {
50 return (
51 <div
52 style={{
53 position: "fixed",
54 top: 0,
55 left: 0,
56 width: "100%",
57 height: "100%",
58 background: "rgba(0,0,0,0.5)",
59 display: "flex",
60 alignItems: "center",
61 justifyContent: "center",
62 }}
63 >
64 <div
65 style={{
66 background: "white",
67 padding: "2rem",
68 borderRadius: "8px",
69 textAlign: "center",
70 }}
71 >
72 <p style={{ marginBottom: "1rem" }}>SEPA transfer completed</p>
73 <p>
74 Amount: {confirmation!.amount} EUR to{" "}
75 <strong>{confirmation!.beneficiary}</strong>
76 </p>
77 <button
78 onClick={() => setSubmitted(false)}
79 style={{ marginTop: "1rem", padding: "0.5rem 1rem" }}
80 >
81 Close
82 </button>
83 </div>
84 </div>
85 );
86 }
87
88 return (
89 <form
90 onSubmit={handleSubmit}
91 style={{ maxWidth: "480px", margin: "2rem auto" }}
92 >
93 <FormField label="From account" error={error}>
94 <Select
95 placeholder="Select account"
96 value={selectedId}
97 onValueChange={setSelectedId}
98 options={
99 data.accounts.map((a) => ({
100 label: a.name,
101 value: a.id,
102 }))
103 }
104 disabled={submitted}
105 />
106 <p
107 style={{
108 marginTop: "0.5rem",
109 fontSize: "0.875rem",
110 color: "#666",
111 }}
112 >
113 Available: {selectedAccount.available} {data.currency}
114 </p>
115 </FormField>
116
117 <FormField label="Beneficiary name">
118 <Input
119 placeholder="Enter beneficiary name"
120 value={beneficiaryName}
121 onChange={(e) => {
122 setBeneficiaryName(e.target.value);
123 }}
124 disabled={submitted}
125 />
126 </FormField>
127
128 <FormField label="Beneficiary IBAN">
129 <Input
130 placeholder="Enter beneficiary IBAN"
131 value={beneficiaryIban}
132 onChange={(e) => {
133 setBeneficiaryIban(e.target.value);
134 }}
135 disabled={submitted}
136 />
137 </FormField>
138
139 <FormField label="Amount" error={error}>
140 <Input
141 inputMode="decimal"
142 placeholder="0.00"
143 value={amount}
144 onChange={(e) => {
145 const val = e.target.value;
146 setAmount(val);
147 handleAmountChange(val);
148 }}
149 disabled={submitted}
150 />
151 </FormField>
152
153 <FormField label="Reference (optional)">
154 <Input
155 placeholder="Optional reference"
156 value={reference}
157 onChange={(e) => {
158 setReference(e.target.value);
159 }}
160 disabled={submitted}
161 />
162 </FormField>
163
164 <Button type="submit" disabled={error || submitted}>
165 {submitted ? "Processing..." : "Send SEPA transfer"}
166 </Button>
167 </form>
168 );
169 }
`0.5rem` is a raw length. Use a token.
a11y/color-contrast 1 quality page.tsx:1:1 · <p style="margin-top: 0.5rem; font-size: 0.875rem; color: rgb(102, 102, 102);">Available: 4821.37 EUR</p> Elements must meet minimum color contrast ratio thresholds (1 element, dark theme) Every run that broke a11y/color-contrast 5 write_file 1,628 2,206 $0.0000