Runs / kyc-form Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 10 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 1,767 46 $0.0000 1 write_file 2,080 2,897 $0.0000 2 stop 5,006 32 $0.0000
cdb5d9e77633
Output cap The provider's default 11
12 dateOfBirth: string;
13 nationality: string;
14 countryOfResidence: string;
15 taxId: string;
16 documentType: string;
17 documentNumber: string;
18 pep: "yes" | "no";
19 }
20
21 export default function Page() {
22 const [form, setForm] = useState<FormValues>({
23 dateOfBirth: "",
24 nationality: "",
25 countryOfResidence: "",
26 taxId: "",
27 documentType: "",
28 documentNumber: "",
29 pep: "yes",
30 });
31 const [errors, setErrors] = useState<Record<string, string>>({});
32 const [submitted, setSubmitted] = useState<boolean>(false);
33
34 const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
35 const { name, value } = e.target;
36 setForm((prev) => ({ ...prev, [name]: value as any }));
37 };
38
39 const handleSubmit = (e: React.FormEvent) => {
40 e.preventDefault();
41 const newErrors: Record<string, string> = {};
42 const { dateOfBirth, nationality, countryOfResidence, taxId, documentType, documentNumber, pep } = form;
43
44 if (!dateOfBirth) newErrors.dateOfBirth = "Required";
45 if (!nationality) newErrors.nationality = "Required";
46 if (!countryOfResidence) newErrors.countryOfResidence = "Required";
47 if (!taxId) newErrors.taxId = "Required";
48 if (!documentType) newErrors.documentType = "Required";
49 if (!documentNumber) newErrors.documentNumber = "Required";
50 if (!pep) newErrors.pep = "Required";
51
52 if (Object.keys(newErrors).length) {
53 setErrors(newErrors);
54 return;
55 }
56 // all filled
57 setSubmitted(true);
58 };
59
60 if (submitted) {
61 return (
62 <div>
63 <p className={css({ marginTop: "2rem", fontSize: "1.25rem" })}>
64 Your details are being reviewed.
65 </p>
66 </div>
67 );
68 }
69
70 return (
71 <main className={css({ maxWidth: "480px", margin: "2rem auto", fontFamily: "sans-serif" })}>
72 <h1 className={css({ marginBottom: "1.5rem" })}>Identity verification</h1>
73
74 {/* Known customer info */}
75 <section className={css({ marginBottom: "2rem" })}>
76 <h2 className={css({ marginBottom: "0.5rem" })}>Customer information</h2>
77 <p className={css}>Name: {firstName} {lastName}</p>
78 <p className={css}>Email: {email}</p>
79 </section>
80
81 <form onSubmit={handleSubmit} noValidate>
82 {/* Date of birth */}
83 <div>
84 <label htmlFor="dateOfBirth" className={css({ display: "block", marginBottom: "0.3rem", fontSize: "0.875rem" })}>
85 Date of birth
86 </label>
87 <input
88 id="dateOfBirth"
89 name="dateOfBirth"
90 type="date"
91 value={form.dateOfBirth}
92 onChange={handleChange}
93 required
94 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" })}
95 aria-invalid={!!errors.dateOfBirth}
96 aria-describedby={errors.dateOfBirth ? "dateError" : undefined}
97 />
98 {errors.dateOfBirth && (
99 <p id="dateError" className={css({ marginTop: "0.25rem", color: "red", fontSize: "0.75rem" })}>
100 {errors.dateOfBirth}
101 </p>
102 )}
103 </div>
104
105 {/* Nationality */}
106 <div>
107 <label htmlFor="nationality" className={css({ display: "block", marginBottom: "0.3rem", fontSize: "0.875rem" })}>
108 Nationality
109 </label>
110 <select
111 id="nationality"
112 name="nationality"
113 value={form.nationality}
114 onChange={handleChange}
115 required
116 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" })}
117 aria-invalid={!!errors.nationality}
118 aria-describedby={errors.nationality ? "nationalityError" : undefined}
119 >
120 <option value="" disabled>
121 Select nationality
122 </option>
123 {countries.map((c) => (
124 <option key={c.code} value={c.code}>
125 {c.name}
126 </option>
127 ))}
128 </select>
129 {errors.nationality && (
130 <p id="nationalityError" className={css({ marginTop: "0.25rem", color: "red", fontSize: "0.75rem" })}>
131 {errors.nationality}
132 </p>
133 )}
134 </div>
135
136 {/* Country of residence */}
137 <div>
138 <label htmlFor="countryOfResidence" className={css({ display: "block", marginBottom: "0.3rem", fontSize: "0.875rem" })}>
139 Country of residence
140 </label>
141 <select
142 id="countryOfResidence"
143 name="countryOfResidence"
144 value={form.countryOfResidence}
145 onChange={handleChange}
146 required
147 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" })}
148 aria-invalid={!!errors.countryOfResidence}
149 aria-describedby={errors.countryOfResidence ? "residenceError" : undefined}
150 >
151 <option value="" disabled>
152 Select country
153 </option>
154 {countries.map((c) => (
155 <option key={c.code} value={c.code}>
156 {c.name}
157 </option>
158 ))}
159 </select>
160 {errors.countryOfResidence && (
161 <p id="residenceError" className={css({ marginTop: "0.25rem", color: "red", fontSize: "0.75rem" })}>
162 {errors.countryOfResidence}
163 </p>
164 )}
165 </div>
166
167 {/* Tax identification number */}
168 <div>
169 <label htmlFor="taxId" className={css({ display: "block", marginBottom: "0.3rem", fontSize: "0.875rem" })}>
170 Tax identification number
171 </label>
172 <input
173 id="taxId"
174 name="taxId"
175 type="text"
176 value={form.taxId}
177 onChange={handleChange}
178 required
179 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" })}
180 aria-invalid={!!errors.taxId}
181 aria-describedby={errors.taxId ? "taxError" : undefined}
182 />
183 {errors.taxId && (
184 <p id="taxError" className={css({ marginTop: "0.25rem", color: "red", fontSize: "0.75rem" })}>
185 {errors.taxId}
186 </p>
187 )}
188 </div>
189
190 {/* Type of identity document */}
191 <div>
192 <label htmlFor="documentType" className={css({ display: "block", marginBottom: "0.3rem", fontSize: "0.875rem" })}>
193 Identity document type
194 </label>
195 <select
196 id="documentType"
197 name="documentType"
198 value={form.documentType}
199 onChange={handleChange}
200 required
201 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" })}
202 aria-invalid={!!errors.documentType}
203 aria-describedby={errors.documentType ? "docTypeError" : undefined}
204 >
205 <option value="" disabled>
206 Select document type
207 </option>
208 {documentTypes.map((dt) => (
209 <option key={dt.value} value={dt.value}>
210 {dt.label}
211 </option>
212 ))}
213 </select>
214 {errors.documentType && (
215 <p id="docTypeError" className={css({ marginTop: "0.25rem", color: "red", fontSize: "0.75rem" })}>
216 {errors.documentType}
217 </p>
218 )}
219 </div>
220
221 {/* Document number */}
222 <div>
223 <label htmlFor="documentNumber" className={css({ display: "block", marginBottom: "0.3rem", fontSize: "0.875rem" })}>
224 Document number
225 </label>
226 <input
227 id="documentNumber"
228 name="documentNumber"
229 type="text"
230 value={form.documentNumber}
231 onChange={handleChange}
232 required
233 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" })}
234 aria-invalid={!!errors.documentNumber}
235 aria-describedby={errors.documentNumber ? "docNumberError" : undefined}
236 />
237 {errors.documentNumber && (
238 <p id="docNumberError" className={css({ marginTop: "0.25rem", color: "red", fontSize: "0.75rem" })}>
239 {errors.documentNumber}
240 </p>
241 )}
242 </div>
243
244 {/* Politically exposed person */}
245 <div>
246 <label>
247 <input
248 type="radio"
249 name="pep"
250 value="yes"
251 checked={form.pep === "yes"}
252 onChange={handleChange}
253 required
254 className={css({ marginRight: "0.5rem", transform: "scale(1.2)" })}
255 />
256 Yes
257 </label>
258 <label>
259 <input
260 type="radio"
261 name="pep"
262 value="no"
263 checked={form.pep === "no"}
264 onChange={handleChange}
265 required
266 className={css({ marginRight: "0.5rem", transform: "scale(1.2)" })}
267 />
268 No
269 </label>
270 {errors.pep && (
271 <p className={css({ marginTop: "0.5rem", color: "red", fontSize: "0.875rem" })}>
272 {errors.pep}
273 </p>
274 )}
275 </div>
276
277 <button type="submit" className={css({ marginTop: "1.5rem", padding: "0.75rem 1.5rem", fontSize: "1rem" )}}>
278 Continue
279 </button>
280 </form>
281 </main>
282 );
283 }
Expected `,` or `}` but found `)`
lint/typescript(no-unsafe-type-assertion) 1 quality render/build-failed 1 completeness typecheck/TS1003 1 quality typecheck/TS1109 1 quality typecheck/TS1382 1 quality