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 48 counted, under 12 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 1,800 74 $0.0000 1 write_file 4,185 2,237 $0.0000 2 stop 6,449 45 $0.0000
Design system
cdb5d9e77633
Output cap The provider's default 11 errors: {
12 reason?: string;
13 whatHappened?: string;
14 contactedMerchant?: string;
15 };
16 submitted: boolean;
17 };
18
19 export default function Page() {
20 const [state, setState] = React.useState<FormState>({
21 reason: undefined,
22 whatHappened: "",
23 contactedMerchant: false,
24 errors: {},
25 submitted: false,
26 });
27
28 const { transaction, reasons } = data;
29
30 const handleChange = (
31 e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
32 ) => {
33 const { name, value, type, checked } = e.target;
34 if (name === "reason") {
35 setState((s) => ({ ...s, reason: value as string, errors: { ...s.errors, reason: undefined } }));
36 } else if (name === "whatHappened") {
37 setState((s) => ({
38 ...s,
39 whatHappened: value as string,
40 errors: { ...s.errors, whatHappened: undefined },
41 }));
42 } else if (name === "contactedMerchant") {
43 setState((s) => ({ ...s, contactedMerchant: checked, errors: { ...s.errors, contactedMerchant: undefined } }));
44 }
45 };
46
47 const validate = (): boolean => {
48 const errors: FormState["errors"] = {};
49 let valid = true;
50
51 // Reason required
52 if (!state.reason) {
53 errors.reason = "Select a reason";
54 valid = false;
55 }
56
57 // What happened at least 30 chars
58 if (state.whatHappened.length < 30) {
59 errors.whatHappened = "At least 30 characters required";
60 valid = false;
61 } else {
62 delete errors.whatHappened;
63 }
64
65 // Checkbox must be checked
66 if (!state.contactedMerchant) {
67 errors.contactedMerchant = "You must confirm you contacted the merchant";
68 valid = false;
69 } else {
70 delete errors.contactedMerchant;
71 }
72
73 setState((s) => ({ ...s, errors }));
74 return valid;
75 };
76
77 const handleSubmit = (e: React.FormEvent) => {
78 e.preventDefault();
79 if (validate()) {
80 setState({ reason: undefined, whatHappened: "", contactedMerchant: false, errors: {}, submitted: true });
81 }
82 };
83
84 if (state.submitted) {
85 return (
86 <div className={css({ padding: 2, textAlign: "center", marginTop: 2 })}>
87 <h2>Dispute submitted</h2>
88 <p>
89 Your dispute is now open. The bank will reply within{" "}<strong>{data.replyDays}</strong>{" " +
90 (data.replyDays === 1 ? "working day" : "working days")}.
91 </p>
92 </div>
93 );
94 }
95
96 return (
97 <div className={css({ maxWidth: 640, margin: "2rem auto", padding: 2 })}>
98 <h1>Dispute a card payment</h1>
99
100 {/* Show payment details */}
101 <section className={css({ borderBottom: "1px solid #eaeaea", paddingBottom: 1, marginBottom: 1 })}>
102 <h2>Payment details</h2>
103 <p>
104 <strong>Merchant:</strong> {transaction.merchant}
105 </p>
106 <p>
107 <strong>Date:</strong> {new Date(transaction.date).toLocaleDateString()}
108 </p>
109 <p>
110 <strong>Amount:</strong> {transaction.amount} {transaction.currency}
111 </p>
112 <p>
113 <strong>Card:</strong> {transaction.card}
114 </p>
115 </section>
116
117 {/* Deadline notice */}
118 <p className={css({ color: "var(--color-error)", marginBottom: 1 })}>
119 A dispute must be opened within{" "}{data.deadlineDays}{" " + (data.deadlineDays === 1 ? "day" : "days")}{" "}of the payment.
120 </p>
121
122 {/* Form */}
123 <form onSubmit={handleSubmit} className={css({ mt: 1 })}>
124 {/* Reason */}
125 <div className={css({ mb: 1 })}>
126 <label htmlFor="reason" className={css({ display: "block", marginBottom: 0.5 })}>Reason <span className={css({ color: "var(--color-error)" })}>*</span></label>
127 <select
128 id="reason"
129 name="reason"
130 value={state.reason}
131 onChange={handleChange}
132 required
133 >
134 <option value="">--Select a reason--</option>
135 {reasons.map((r) => (
136 <option key={r.value} value={r.value}>
137 {r.label}
138 </option>
139 ))}
140 </select>
141 {state.errors.reason && (
142 <p className={css({ color: "var(--color-error)", fontSize: 0.875 })}>{state.errors.reason}</p>
143 )}
144 </div>
145
146 {/* What happened */}
147 <div className={css({ mb: 1 })}>
148 <label htmlFor="whatHappened" className={css({ display: "block", marginBottom: 0.5 })}>What happened <span className={css({ color: "var(--color-error)" })}>*</span></label>
149 <textarea
150 id="whatHappened"
151 name="whatHappened"
152 rows={3}
153 value={state.whatHappened}
154 onChange={handleChange}
155 minLength={30}
156 required
157 placeholder="Describe what happened..."
158 ></textarea>
159 {state.errors.whatHappened && (
160 <p className={css({ color: "var(--color-error)", fontSize: 0.875 })}>{state.errors.whatHappened}</p>
161 )}
162 </div>
163
164 {/* Contacted merchant checkbox */}
165 <div className={css({ mb: 1, display: "flex", alignItems: "center" })}>
166 <label
167 htmlFor="contactedMerchant"
168 className={css({ flexShrink: 0, marginRight: 0.5, lineHeight: 1 })}
169 >
170 <input
171 type="checkbox"
172 id="contactedMerchant"
173 name="contactedMerchant"
174 checked={state.contactedMerchant}
175 onChange={handleChange}
176 required
177 />
178 I contacted the merchant first and could not solve it
179 </label>
180 {state.errors.contactedMerchant && (
181 <p className={css({ color: "var(--color-error)", fontSize: 0.875, marginLeft: 1 })}>{state.errors.contactedMerchant}</p>
182 )}
183 </div>
184
185 <button type="submit" className={css({ mt: 1, padding: 0.75, background: "primary", color: "onPrimary" })}>
186 Submit dispute
187 </button>
188 </form>
189 </div>
190 );
191 }
page.tsx:101:86
Not counted
No overload matches this call.
lint/@pandacss(no-physical-properties) 14 quality page.tsx:86:62 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:101:33 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:101:68 Use the logical property "paddingBlockEnd" instead of the physical "paddingBottom". page.tsx:101:86 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:118:56 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:123:54 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:125:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:126:70 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:147:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:148:76 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:165:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:168:45 Use the logical property "marginInlineEnd" instead of the physical "marginRight". page.tsx:181:79 Use the logical property "marginInlineStart" instead of the physical "marginLeft". page.tsx:185:48 Use the logical property "marginBlockStart" instead of the physical "marginTop". Every run that broke lint/@pandacss(no-physical-properties) typecheck/TS2345 3 quality page.tsx:35:16 Argument of type '(s: FormState) => { whatHappened: string; contactedMerchant: boolean; submitted: boolean; reason: string; errors: { whatHappened?: string; contactedMerchant?: string; reason: undefined; }; }' is not assignable to parameter of type 'SetStateAction<FormState>'. page.tsx:37:16 Argument of type '(s: FormState) => { reason: string | undefined; contactedMerchant: boolean; submitted: boolean; whatHappened: string; errors: { reason?: string; contactedMerchant?: string; whatHappened: undefined; }; }' is not assignable to parameter of type 'SetStateAction<FormState>'. page.tsx:43:16 Argument of type '(s: FormState) => { reason: string | undefined; whatHappened: string; submitted: boolean; contactedMerchant: any; errors: { reason?: string; whatHappened?: string; contactedMerchant: undefined; }; }' is not assignable to parameter of type 'SetStateAction<FormState>'. Every run that broke typecheck/TS2345 raw-values/raw-length 1 design-system render/runtime-error 1 completeness