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 50 counted, under 8 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 read_file 873 36 $0.0000 1 write_file 1,124 1,898 $0.0000 2 stop 3,049 24 $0.0000
Output cap The provider's default 2
3 import { css } from "styled-system/css";
4 import data from "./fixture.json";
5 import { useState } from "react";
6
7 type Reason = { value: string; label: string };
8 const { transaction, deadlineDays, replyDays, reasons } = data;
9
10 export default function Page() {
11 const [reason, setReason] = useState<Reason | null>(null);
12 const [whatHappened, setWhatHappened] = useState("");
13 const [contactedMerchant, setContactedMerchant] = useState(false);
14 const [errors, setErrors] = useState<{ reason?: string; whatHappened?: string; contactedMerchant?: string }>({});
15 const [submitted, setSubmitted] = useState(false);
16
17 const handleSubmit = (e: React.FormEvent) => {
18 e.preventDefault();
19 const newErrors: { reason?: string; whatHappened?: string; contactedMerchant?: string } = {};
20 // Reason required
21 if (!reason) {
22 newErrors.reason = "Select a reason";
23 }
24 // What happened at least 30 chars
25 if (whatHappened.trim().length < 30) {
26 newErrors.whatHappened = "At least 30 characters";
27 }
28 // Checked merchant contact
29 if (!contactedMerchant) {
30 newErrors.contactedMerchant = "You must indicate you contacted the merchant";
31 }
32 setErrors(newErrors);
33 // If no errors, submit
34 if (Object.keys(newErrors).length === 0) {
35 setSubmitted(true);
36 }
37 };
38
39 if (submitted) {
40 return (
41 <div style={{ padding: "2rem", maxWidth: "600px", margin: "0 auto" }}>
42 <h2>Dispute submitted</h2>
43 <p>
44 Your dispute is now open. The bank will reply within{" "}
45 </p>
46 <strong>{replyDays} working days</strong>
47 <p>Thank you for your request.</p>
48 </div>
49 );
50 }
51
52 return (
53 <div style={{ padding: "2rem", maxWidth: "600px", margin: "0 auto" }}>
54 <h1>Dispute a card payment</h1>
55
56 {/* Payment details */}
57 <div style={{ borderBottom: "1px solid #e2e8f0", paddingBottom: "1rem", marginBottom: "1rem" }}>
58 <p>
59 <strong>Merchant:</strong> {transaction.merchant}
60 </p>
61 <p>
62 <strong>Date:</strong> {new Date(transaction.date).toLocaleDateString()}
63 </p>
64 <p>
65 <strong>Amount:</strong> {transaction.amount} {transaction.currency}
66 </p>
67 <p>
68 <strong>Card:</strong> {transaction.card}
69 </p>
70 </div>
71
72 {/* Deadline notice */}
73 <p style={{ fontSize: "0.9rem", color: "#5a6b7c" }}>
74 A dispute must be opened within{" "}<strong>{deadlineDays}</strong>{" days of the payment."}
75 </p>
76
77 {/* Form */}
78 <form onSubmit={handleSubmit} style={{ marginTop: "1.5rem" }}>
79 {/* Reason */}
80 <div style={{ marginBottom: "1rem" }}>
81 <label style={{ display: "block", marginBottom: "0.5rem" }}>Reason <span style={{ color: "#e53e3e", fontWeight: "bold" }}>*</span></label>
82 <select
83 value={reason ? reason.value : ""}
84 onChange={(e) => setReason(reasons.find(r => r.value === e.target.value) ?? null)}
85 style={{ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" }}
86 >
87 <option value="">-- Select a reason --</option>
88 {reasons.map((r) => (
89 <option key={r.value} value={r.value}>
90 {r.label}
91 </option>
92 ))}
93 </select>
94 {errors.reason && (
95 <p style={{ color: "#e53e3e", fontSize: "0.8rem", marginTop: "0.2rem" }}>{errors.reason}</p>
96 )}
97 </div>
98
99 {/* What happened */}
100 <div style={{ marginBottom: "1rem" }}>
101 <label style={{ display: "block", marginBottom: "0.5rem" }}>What happened <span style={{ color: "#e53e3e", fontWeight: "bold" }}>*</span></label>
102 <textarea
103 value={whatHappened}
104 onChange={(e) => setWhatHappened(e.target.value)}
105 rows={4}
106 style={{ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px", fontFamily: "inherit" }}
107 ></textarea>
108 {errors.whatHappened && (
109 <p style={{ color: "#e53e3e", fontSize: "0.8rem", marginTop: "0.2rem" }}>{errors.whatHappened}</p>
110 )}
111 </div>
112
113 {/* Contacted merchant */}
114 <div style={{ marginBottom: "1rem" }}>
115 <label
116 style={{
117 display: "flex",
118 alignItems: "center",
119 marginBottom: "0.5rem",
120 gap: "0.5rem",
121 }}
122 >
123 <input
124 type="checkbox"
125 checked={contactedMerchant}
126 onChange={(e) => setContactedMerchant(e.target.checked)}
127 style={{ transform: "scale(1.2)", margin: 0 }}
128 />
129 I contacted the merchant first and could not solve it
130 </label>
131 {errors.contactedMerchant && (
132 <p style={{ color: "#e53e3e", fontSize: "0.8rem", marginTop: "0.2rem" }}>{errors.contactedMerchant}</p>
133 )}
134 </div>
135
136 <button type="submit" style={{ padding: "0.75rem 1.5rem", backgroundColor: "#2563eb", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" }}>
137 Submit dispute
138 </button>
139 </form>
140 </div>
141 );
142 }
`1.5rem` is a raw length. Use a token.
page.tsx:136:49 · 0.75rem 1.5rem `0.75rem 1.5rem` is a raw length. Use a token. a11y/label 2 quality page.tsx:1:1 · <textarea rows="4" style="width: 100%; padding: 0.5rem; border: 1px solid rgb(204, 204, 204); border-radius: 4px; font-f Form elements must have labels (1 element, light theme) page.tsx:1:1 · <textarea rows="4" style="width: 100%; padding: 0.5rem; border: 1px solid rgb(204, 204, 204); border-radius: 4px; font-f Form elements must have labels (1 element, dark theme) Every run that broke a11y/label a11y/select-name 2 quality page.tsx:1:1 · <select style="width: 100%; padding: 0.5rem; border: 1px solid rgb(204, 204, 204); border-radius: 4px;"> Select element must have an accessible name (1 element, dark theme) page.tsx:1:1 · <select style="width: 100%; padding: 0.5rem; border: 1px solid rgb(204, 204, 204); border-radius: 4px;"> Select element must have an accessible name (1 element, light theme) Every run that broke a11y/select-name lint/jsx-a11y(label-has-associated-control) 2 quality a11y/color-contrast 1 quality page.tsx:1:1 · <p style="font-size: 0.9rem; color: rgb(90, 107, 124);">A dispute must be opened within <strong>120</strong> days of the Elements must meet minimum color contrast ratio thresholds (2 elements, dark theme) Every run that broke a11y/color-contrast lint/eslint(no-unused-vars) 1 quality