Runs / card-dispute Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 35 counted, under 10 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 31 $0.0000 1 read_file, read_file 372 47 $0.0000 2 list_files 326 23 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12
13 export default function DisputePaymentPage() {
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 const amount = new Intl.NumberFormat("en-US", {
23 style: "currency",
24 currency: transaction.currency,
25 }).format(transaction.amount);
26
27 function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
28 e.preventDefault();
29 const nextErrors: Errors = {};
30 if (!reason) {
31 nextErrors.reason = "Please select a reason.";
32 }
33 if (description.trim().length < 30) {
34 nextErrors.description = "Please describe what happened in at least 30 characters.";
35 }
36 if (!contacted) {
37 nextErrors.contacted = "You must confirm you contacted the merchant first.";
38 }
39 setErrors(nextErrors);
40 if (Object.keys(nextErrors).length === 0) {
41 setSubmitted(true);
42 }
43 }
44
45 if (submitted) {
46 return (
47 <main
48 className={css({
49 maxW: "640px",
50 mx: "auto",
51 p: "6",
52 })}
53 >
54 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", mb: "4" })}>
55 Dispute opened
56 </h1>
57 <p className={css({ mb: "2" })}>Your dispute is now open.</p>
58 <p>The bank will reply within {replyDays} working days.</p>
59 </main>
60 );
61 }
62
63 return (
64 <main
65 className={css({
66 maxW: "640px",
67 mx: "auto",
68 p: "6",
69 })}
70 >
71 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", mb: "4" })}>
72 Dispute a card payment
73 </h1>
74
75 <section
76 className={css({
77 mb: "6",
78 p: "4",
79 borderWidth: "1px",
80 borderRadius: "md",
81 })}
82 aria-label="Payment details"
83 >
84 <p className={css({ fontWeight: "semibold", mb: "2" })}>
85 {transaction.merchant}
86 </p>
87 <dl className={css({ display: "grid", gap: "1" })}>
88 <div className={css({ display: "flex", gap: "2" })}>
89 <dt>Date</dt>
90 <dd>{transaction.date}</dd>
91 </div>
92 <div className={css({ display: "flex", gap: "2" })}>
93 <dt>Amount</dt>
94 <dd>
95 {amount} {transaction.currency}
96 </dd>
97 </div>
98 <div className={css({ display: "flex", gap: "2" })}>
99 <dt>Card</dt>
100 <dd>{transaction.card}</dd>
101 </div>
102 </dl>
103 </section>
104
105 <p className={css({ mb: "6" })}>
106 A dispute must be opened within {deadlineDays} days of the payment.
107 </p>
108
109 <form onSubmit={handleSubmit} noValidate>
110 <div className={css({ mb: "4" })}>
111 <label htmlFor="reason" className={css({ display: "block", mb: "1", fontWeight: "medium" })}>
112 Reason
113 </label>
114 <select
115 id="reason"
116 value={reason}
117 onChange={(e) => setReason(e.target.value)}
118 className={css({ w: "full", p: "2", borderWidth: "1px", borderRadius: "md" })}
119 aria-invalid={!!errors.reason}
120 aria-describedby={errors.reason ? "reason-error" : undefined}
121 >
122 <option value="">Select a reason</option>
123 {reasons.map((r) => (
124 <option key={r.value} value={r.value}>
125 {r.label}
126 </option>
127 ))}
128 </select>
129 {errors.reason && (
130 <p id="reason-error" className={css({ color: "red.600", mt: "1", fontSize: "sm" })}>
131 {errors.reason}
132 </p>
133 )}
134 </div>
135
136 <div className={css({ mb: "4" })}>
137 <label htmlFor="description" className={css({ display: "block", mb: "1", fontWeight: "medium" })}>
138 What happened
139 </label>
140 <textarea
141 id="description"
142 value={description}
143 onChange={(e) => setDescription(e.target.value)}
144 rows={4}
145 className={css({ w: "full", p: "2", borderWidth: "1px", borderRadius: "md" })}
146 aria-invalid={!!errors.description}
147 aria-describedby={errors.description ? "description-error" : undefined}
148 />
149 {errors.description && (
150 <p id="description-error" className={css({ color: "red.600", mt: "1", fontSize: "sm" })}>
151 {errors.description}
152 </p>
153 )}
154 </div>
155
156 <div className={css({ mb: "6" })}>
157 <label className={css({ display: "flex", gap: "2", alignItems: "center" })}>
158 <input
159 type="checkbox"
160 checked={contacted}
161 onChange={(e) => setContacted(e.target.checked)}
162 aria-invalid={!!errors.contacted}
163 aria-describedby={errors.contacted ? "contacted-error" : undefined}
164 />
165 I contacted the merchant first and could not solve it
166 </label>
167 {errors.contacted && (
168 <p id="contacted-error" className={css({ color: "red.600", mt: "1", fontSize: "sm" })}>
169 {errors.contacted}
170 </p>
171 )}
172 </div>
173
174 <button
175 type="submit"
176 className={css({
177 px: "4",
178 py: "2",
179 borderRadius: "md",
180 bg: "blue.600",
181 color: "white",
182 fontWeight: "medium",
183 })}
184 >
185 Submit
186 </button>
187 </form>
188 </main>
189 );
190 }
191 EOF
Use the logical property "marginBlockEnd" instead of the physical "marginBottom".
page.tsx:130:69 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:136:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:137:75 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:150:74 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:156:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:168:72 Use the logical property "marginBlockStart" instead of the physical "marginTop". raw-values/raw-length 5 design-system token-names/unknown-token 4 design-system page.tsx:54:40 · 2xl `fontSize: "2xl"`: `2xl` is not a fontSizes token. Use one of: xs, sm, md, lg, xl. page.tsx:54:59 · bold `fontWeight: "bold"`: `bold` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:71:38 · 2xl `fontSize: "2xl"`: `2xl` is not a fontSizes token. Use one of: xs, sm, md, lg, xl. page.tsx:71:57 · bold `fontWeight: "bold"`: `bold` is not a fontWeights token. Use one of: normal, medium, semibold. Every run that broke token-names/unknown-token lint/eslint(no-unused-expressions) 1 quality raw-values/raw-color 1 design-system render/runtime-error 1 completeness typecheck/TS2304 1 quality typecheck/TS2769 0 quality 13 write_file 213 5,065 $0.0000
14 read_file 5,111 270 $0.0000
15 write_file 3,786 1,507 $0.0000