Runs / card-dispute 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 42 counted, under 9 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 199 25 $0.0000 1 read_file, list_files 238 46 $0.0000 2 list_files 312 54 $0.0000 3
Output cap The provider's default 3 import { useState, type FormEvent } from "react";
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type Errors = {
8 reason?: string;
9 description?: string;
10 contacted?: string;
11 };
12
13 export default function DisputeCardPaymentPage() {
14 const { transaction, deadlineDays, replyDays, reasons } = data;
15
16 const [reason, setReason] = useState("");
17 const [description, setDescription] = useState("");
18 const [contacted, setContacted] = useState(false);
19 const [errors, setErrors] = useState<Errors>({});
20 const [submitted, setSubmitted] = useState(false);
21
22 function validate(): Errors {
23 const next: Errors = {};
24 if (!reason) {
25 next.reason = "Reason is required.";
26 }
27 if (description.trim().length < 30) {
28 next.description = "Description must be at least 30 characters.";
29 }
30 if (!contacted) {
31 next.contacted = "You must confirm you contacted the merchant first.";
32 }
33 return next;
34 }
35
36 function handleSubmit(e: FormEvent<HTMLFormElement>) {
37 e.preventDefault();
38 const next = validate();
39 setErrors(next);
40 if (Object.keys(next).length === 0) {
41 setSubmitted(true);
42 }
43 }
44
45 return (
46 <main
47 className={css({
48 maxW: "640px",
49 mx: "auto",
50 p: "6",
51 fontFamily: "sans",
52 })}
53 >
54 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", mb: "4" })}>
55 Dispute a card payment
56 </h1>
57
58 <section
59 className={css({
60 border: "1px solid",
61 borderColor: "gray.200",
62 borderRadius: "md",
63 p: "4",
64 mb: "4",
65 })}
66 aria-label="Payment details"
67 >
68 <p className={css({ mb: "1" })}>
69 <strong>Merchant:</strong> {transaction.merchant}
70 </p>
71 <p className={css({ mb: "1" })}>
72 <strong>Date:</strong> {transaction.date}
73 </p>
74 <p className={css({ mb: "1" })}>
75 <strong>Amount:</strong> {transaction.amount} {transaction.currency}
76 </p>
77 <p>
78 <strong>Card:</strong> {transaction.card}
79 </p>
80 </section>
81
82 <p className={css({ mb: "4", color: "gray.700" })}>
83 A dispute must be opened within {deadlineDays} days of the payment.
84 </p>
85
86 {submitted ? (
87 <div
88 role="status"
89 className={css({
90 border: "1px solid",
91 borderColor: "green.300",
92 borderRadius: "md",
93 p: "4",
94 bg: "green.50",
95 })}
96 >
97 <h2 className={css({ fontSize: "lg", fontWeight: "semibold", mb: "2" })}>
98 Your dispute is open
99 </h2>
100 <p>
101 The bank will reply within {replyDays} working days.
102 </p>
103 </div>
104 ) : (
105 <form onSubmit={handleSubmit} noValidate>
106 <div className={css({ mb: "4" })}>
107 <label
108 htmlFor="reason"
109 className={css({ display: "block", mb: "1", fontWeight: "medium" })}
110 >
111 Reason
112 </label>
113 <select
114 id="reason"
115 value={reason}
116 onChange={(e) => setReason(e.target.value)}
117 className={css({
118 w: "full",
119 p: "2",
120 border: "1px solid",
121 borderColor: errors.reason ? "red.500" : "gray.300",
122 borderRadius: "md",
123 })}
124 >
125 <option value="">Select a reason</option>
126 {reasons.map((r) => (
127 <option key={r.value} value={r.value}>
128 {r.label}
129 </option>
130 ))}
131 </select>
132 {errors.reason && (
133 <p
134 role="alert"
135 className={css({ color: "red.600", mt: "1", fontSize: "sm" })}
136 >
137 {errors.reason}
138 </p>
139 )}
140 </div>
141
142 <div className={css({ mb: "4" })}>
143 <label
144 htmlFor="description"
145 className={css({ display: "block", mb: "1", fontWeight: "medium" })}
146 >
147 What happened
148 </label>
149 <textarea
150 id="description"
151 value={description}
152 onChange={(e) => setDescription(e.target.value)}
153 rows={5}
154 className={css({
155 w: "full",
156 p: "2",
157 border: "1px solid",
158 borderColor: errors.description ? "red.500" : "gray.300",
159 borderRadius: "md",
160 })}
161 />
162 {errors.description && (
163 <p
164 role="alert"
165 className={css({ color: "red.600", mt: "1", fontSize: "sm" })}
166 >
167 {errors.description}
168 </p>
169 )}
170 </div>
171
172 <div className={css({ mb: "4" })}>
173 <label className={css({ display: "flex", alignItems: "center", gap: "2" })}>
174 <input
175 type="checkbox"
176 checked={contacted}
177 onChange={(e) => setContacted(e.target.checked)}
178 />
179 I contacted the merchant first and could not solve it
180 </label>
181 {errors.contacted && (
182 <p
183 role="alert"
184 className={css({ color: "red.600", mt: "1", fontSize: "sm" })}
185 >
186 {errors.contacted}
187 </p>
188 )}
189 </div>
190
191 <button
192 type="submit"
193 className={css({
194 bg: "blue.600",
195 color: "white",
196 px: "4",
197 py: "2",
198 borderRadius: "md",
199 fontWeight: "medium",
200 })}
201 >
202 Submit dispute
203 </button>
204 </form>
205 )}
206 </main>
207 );
208 }
209
Use the logical property "marginBlockEnd" instead of the physical "marginBottom".
page.tsx:109:50 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:135:52 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:142:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:145:50 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:165:52 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:172:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:184:52 Use the logical property "marginBlockStart" instead of the physical "marginTop". token-roles/palette 12 design-system page.tsx:61:24 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:82:43 · gray.700 `gray.700` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:91:26 · green.300 `green.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:94:17 · green.50 `green.50` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:121:46 · red.500 `red.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:121:58 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:135:41 · red.600 `red.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:158:51 · red.500 `red.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:158:63 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:165:41 · red.600 `red.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:184:41 · red.600 `red.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:194:19 · blue.600 `blue.600` is a palette shade: it ignores the theme. Use a semantic color token. Every run that broke token-roles/palette raw-values/raw-length 5 design-system a11y/color-contrast 2 quality page.tsx:1:1 · <button type="submit" class="bg_blue.600 c_white px_4 py_2 bdr_md fw_medium">Submit dispute</button> Elements must meet minimum color contrast ratio thresholds (1 element, light theme) page.tsx:1:1 · <p class="mb_4 c_gray.700">A dispute must be opened within 120 days of the payment.</p> Elements must meet minimum color contrast ratio thresholds (1 element, dark theme) Every run that broke a11y/color-contrast lint/jsx-a11y(prefer-tag-over-role) 1 quality raw-values/raw-color 1 design-system typecheck/TS2769 0 quality 7 write_file 252 2,787 $0.0000
8 write_file 2,872 1,704 $0.0000