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 9 counted, under 6 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 840 67 $0.0000 1 write_file 1,174 2,977 $0.0000 2 stop 4,179 32 $0.0000
cdb5d9e77633
Output cap 20,000 tokens a step 11
12 countryOfResidence: string;
13 taxId: string;
14 docType: string;
15 docNumber: string;
16 pep: "yes" | "no";
17 }
18
19 export default function Page() {
20 const customer = data.customer;
21 const countries: Country[] = data.countries.map((c) => ({
22 code: c.code,
23 name: c.name,
24 }));
25 const docTypes: DocType[] = data.documentTypes.map((d) => ({
26 value: d.value,
27 label: d.label,
28 }));
29
30 const [form, setForm] = React.useState<FormValues>({
31 dateOfBirth: "",
32 nationality: "",
33 countryOfResidence: "",
34 taxId: "",
35 docType: "",
36 docNumber: "",
37 pep: "yes",
38 });
39
40 const [errors, setErrors] = React.useState<Record<string, boolean>>({});
41 const [submitted, setSubmitted] = React.useState(false);
42
43 const handleChange = (
44 e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement |
45 HTMLInputElement>
46 ) => {
47 const { name, value } = e.target;
48 setForm((prev) => ({ ...prev, [name]: value }));
49 // clear error if previously errored
50 setErrors((prev) => ({ ...prev, [name]: false }));
51 };
52
53 const handlePEPChange = (value: string) => {
54 setForm((prev) => ({ ...prev, pep: value }));
55 setErrors((prev) => ({ ...prev, pep: false }));
56 };
57
58 const validate = (): boolean => {
59 const newErrors: Record<string, boolean> = {};
60 let valid = true;
61 if (!form.dateOfBirth) { newErrors.dateOfBirth = true; valid = false; }
62 if (!form.nationality) { newErrors.nationality = true; valid = false; }
63 if (!form.countryOfResidence) { newErrors.countryOfResidence = true; valid = false; }
64 if (!form.taxId) { newErrors.taxId = true; valid = false; }
65 if (!form.docType) { newErrors.docType = true; valid = false; }
66 if (!form.docNumber) { newErrors.docNumber = true; valid = false; }
67 if (form.pep === "") { newErrors.pep = true; valid = false; }
68 setErrors(newErrors);
69 return valid;
70 };
71
72 const onSubmit = (e: React.FormEvent) => {
73 e.preventDefault();
74 if (validate()) {
75 setSubmitted(true);
76 }
77 };
78
79 if (submitted) {
80 return (
81 <div className={css({ padding: 2, textAlign: "center" })}>
82 <p>Details are being reviewed.</p>
83 </div>
84 );
85 }
86
87 return (
88 <main className={css({ maxWidth: 400, margin: "2rem auto", padding: 2 })}>
89 <h2 className={css({ marginBottom: 1 })}>Identity verification</h2>
90
91 {/* Show known customer info */}
92 <div className={css({ marginBottom: 1, fontSize: 14, color: " muted" })}>
93 <p>Name: {customer.firstName} {customer.lastName}</p>
94 <p>Email: {customer.email}</p>
95 </div>
96
97 <form onSubmit={onSubmit} className={css({ marginTop: 1 })}>
98 {/* Date of birth */}
99 <div className={css({ mb: 1 })}>
100 <label className={css({ display: "block", marginBottom: 4 })}>Date of birth</label>
101 <input
102 type="date"
103 name="dateOfBirth"
104 value={form.dateOfBirth}
105 onChange={handleChange}
106 className={css({ width: "100%", padding: 8, border: "1px solid #ccc", borderRadius: 4 })}
107 disabled={false}
108 />
109 {errors.dateOfBirth && (
110 <p className={css({ color: "red", fontSize: 12, marginTop: 4 })}>This field is required.</p>
111 )}
112 </div>
113
114 {/* Nationality */}
115 <div className={css({ mb: 1 })}>
116 <label className={css({ display: "block", marginBottom: 4 })}>Nationality</label>
117 <select
118 name="nationality"
119 value={form.nationality}
120 onChange={handleChange}
121 className={css({ width: "100%", padding: 8, border: "1px solid #ccc", borderRadius: 4 })}
122 >
123 <option value="">Select nationality</option>
124 {countries.map((c) => (
125 <option key={c.code} value={c.name}>
126 {c.name}
127 </option>
128 ))}
129 </select>
130 {errors.nationality && (
131 <p className={css({ color: "red", fontSize: 12, marginTop: 4 })}>This field is required.</p>
132 )}
133 </div>
134
135 {/* Country of residence */}
136 <div className={css({ mb: 1 })}>
137 <label className={css({ display: "block", marginBottom: 4 })}>Country of residence</label>
138 <select
139 name="countryOfResidence"
140 value={form.countryOfResidence}
141 onChange={handleChange}
142 className={css({ width: "100%", padding: 8, border: "1px solid #ccc", borderRadius: 4 })}
143 >
144 <option value="">Select country</option>
145 {countries.map((c) => (
146 <option key={c.code} value={c.name}>
147 {c.name}
148 </option>
149 ))}
150 </select>
151 {errors.countryOfResidence && (
152 <p className={css({ color: "red", fontSize: 12, marginTop: 4 })}>This field is required.</p>
153 )}
154 </div>
155
156 {/* Tax identification number */}
157 <div className={css({ mb: 1 })}>
158 <label className={css({ display: "block", marginBottom: 4 })}>Tax identification number</label>
159 <input
160 type="text"
161 name="taxId"
162 value={form.taxId}
163 onChange={handleChange}
164 className={css({ width: "100%", padding: 8, border: "1px solid #ccc", borderRadius: 4 })}
165 />
166 {errors.taxId && (
167 <p className={css({ color: "red", fontSize: 12, marginTop: 4 })}>This field is required.</p>
168 )}
169 </div>
170
171 {/* Type of identity document */}
172 <div className={css({ mb: 1 })}>
173 <label className={css({ display: "block", marginBottom: 4 })}>Identity document type</label>
174 <select
175 name="docType"
176 value={form.docType}
177 onChange={handleChange}
178 className={css({ width: "100%", padding: 8, border: "1px solid #ccc", borderRadius: 4 })}
179 >
180 <option value="">Select document type</option>
181 {docTypes.map((d) => (
182 <option key={d.value} value={d.value}>
183 {d.label}
184 </option>
185 ))}
186 </select>
187 {errors.docType && (
188 <p className={css({ color: "red", fontSize: 12, marginTop: 4 })}>This field is required.</p>
189 )}
190 </div>
191
192 {/* Document number */}
193 <div className={css({ mb: 1 })}>
194 <label className={css({ display: "block", marginBottom: 4 })}>Document number</label>
195 <input
196 type="text"
197 name="docNumber"
198 value={form.docNumber}
199 onChange={handleChange}
200 className={css({ width: "100%", padding: 8, border: "1px solid #ccc", borderRadius: 4 })}
201 />
202 {errors.docNumber && (
203 <p className={css({ color: "red", fontSize: 12, marginTop: 4 })}>This field is required.</p>
204 )}
205 </div>
206
207 {/* Politically exposed person */}
208 <div className={css({ mb: 1 })}>
209 <label className={css({ display: "block", marginBottom: 4 })}>Are you a politically exposed person?</label>
210 <div className={css({ display: "flex", gap: 1 })}> // simplified gap
211 <label
212 style={{display: 'flex', gap: 4}}
213 >
214 <input
215 type="radio"
216 name="pep"
217 value="yes"
218 checked={form.pep === "yes"}
219 onChange={() => handlePEPChange("yes")}
220 className={css({ transform: "scale(1.2)" }})
221 />
222 Yes
223 </label>
224 <label>
225 <input
226 type="radio"
227 name="pep"
228 value="no"
229 checked={form.pep === "no"}
230 onChange={() => handlePEPChange("no")}
231 className={css({ transform: "scale(1.2)" }})
232 />
233 No
234 </label>
235 </div>
236 {errors.pep && (
237 <p className={css({ color: "red", fontSize: 12, marginTop: 4 })}>This field is required.</p>
238 )}
239 </div>
240
241 <button type="submit" className={css({ width: "100%", padding: 10, marginTop: 1, background: "#0066ff", color: "#fff", border: "none", borderRadius: 4 })}>
242 Continue
243 </button>
244 </form>
245 </main>
246 );
247 }
lint/syntax-error 1 quality lint/typescript(no-duplicate-type-constituents) 1 quality render/build-failed 1 completeness