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 4 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 read_file 1,440 195 $0.0000 1 list_tokens 1,850 1,415 $0.0000 2 write_file 4,290 1,344 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5
6 export default function DisputePage() {
7 const [reason, setReason] = useState<string | null>(null);
8 const [whatHappened, setWhatHappened] = useState<string>("");
9 const [contactedMerchant, setContactedMerchant] = useState<boolean>(false);
10 const [submitted, setSubmitted] = useState<boolean>(false);
11 const [errors, setErrors] = useState<{
12 reason?: string;
13 whatHappened?: string;
14 contactedMerchant?: string;
15 }>({});
16
17 const reasons = data.reasons.map(r => ({
18 value: r.value,
19 label: r.label,
20 }));
21
22 const handleSubmit = (e: React.FormEvent) => {
23 e.preventDefault();
24 const newErrors: {
25 reason?: string;
26 whatHappened?: string;
27 contactedMerchant?: string;
28 } = {};
29
30 if (!reason) newErrors.reason = "Select a reason";
31 else delete newErrors.reason;
32
33 if (whatHappened.length < 30)
34 newErrors.whatHappened = "At least 30 characters required";
35 else delete newErrors.whatHappened;
36
37 if (!contactedMerchant)
38 newErrors.contactedMerchant = "Check the box";
39
40 setErrors(newErrors);
41 if (Object.keys(newErrors).length === 0) {
42 setSubmitted(true);
43 }
44 };
45
46 if (submitted) {
47 return (
48 <div>
49 <p>
50 Your dispute is open. The bank will reply within{" "}{data.replyDays}
51 working days.
52 </p>
53 </div>
54 );
55 }
56
57 return (
58 <form onSubmit={handleSubmit}>
59 <h1>Dispute a card payment</h1>
60
61 {/* Payment details */}
62 <div>
63 <p>Merchant: {data.transaction.merchant}</p>
64 <p>Date: {new Date(data.transaction.date).toLocaleDateString()}</p>
65 <p>
66 Amount:{" "}{data.transaction.amount} {data.transaction.currency}
67 </p>
68 <p>Card: {data.transaction.card}</p>
69 </div>
70
71 {/* Deadline info */}
72 <p>
73 A dispute must be opened within{" "}<strong>{data.deadlineDays}</strong>{" "}days
74 of the payment.
75 </p>
76
77 {/* Reason field */}
78 <div>
79 <label htmlFor="reason">Reason <span>*</span></label>
80 <select
81 id="reason"
82 value={reason ?? ""}
83 onChange={e =>
84 setReason(e.target.value === "" ? null : e.target.value)
85 }
86 required
87 >
88 <option value="">--Select a reason--</option>
89 {reasons.map(r => (
90 <option key={r.value} value={r.value}>
91 {r.label}
92 </option>
93 ))}
94 </select>
95 {errors.reason && <p>{errors.reason}</p>}
96 </div>
97
98 {/* What happened field */}
99 <div>
100 <label htmlFor="whatHappened">What happened</label>
101 <textarea
102 id="whatHappened"
103 value={whatHappened}
104 onChange={e => setWhatHappened(e.target.value)}
105 rows={3}
106 minLength={30}
107 required
108 ></textarea>
109 {errors.whatHappened && <p>{errors.whatHappened}</p>}
110 </div>
111
112 {/* I contacted the merchant checkbox */}
113 <div>
114 <label>
115 <input
116 type="checkbox"
117 checked={contactedMerchant}
118 onChange={e =>
119 setContactedMerchant(e.target.checked)
120 }
121 required
122 />
123 I contacted the merchant first and could not solve it
124 </label>
125 {errors.contactedMerchant && <p>{errors.contactedMerchant}</p>}
126 </div>
127
128 <button type="submit">Submit dispute</button>
129 </form>
130 );
131 }