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 5 counted, under 5 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 list_files 840 38 $0.0000 1 read_file 898 54 $0.0000 2 write_file 1,219 3,124 $0.0000 3
cdb5d9e77633
Output cap 20,000 tokens a step 11
12 countryOfResidence: string;
13 tin: string;
14 documentType: string;
15 docNumber: string;
16 pep: string; // "yes" | "no"
17 }
18
19 export default function Page() {
20 const [form, setForm] = React.useState<FormValues>({
21 dob: "",
22 nationality: "",
23 countryOfResidence: "",
24 tin: "",
25 documentType: "",
26 docNumber: "",
27 pep: "",
28 });
29 const [errors, setErrors] = React.useState<Record<string, string>>({});
30 const [reviewing, setReviewing] = React.useState(false);
31
32 const { customer, countries, documentTypes } = data;
33
34 const handleChange = (
35 e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
36 ) => {
37 const { name, value } = e.target;
38 setForm((prev) => ({ ...prev, [name]: value }));
39 };
40
41 const handleSubmit = (e: React.FormEvent) => {
42 e.preventDefault();
43 const newErrors: Record<string, string> = {};
44 if (!form.dob) newErrors.dob = "Required";
45 if (!form.nationality) newErrors.nationality = "Required";
46 if (!form.countryOfResidence) newErrors.countryOfResidence = "Required";
47 if (!form.tin) newErrors.tin = "Required";
48 if (!form.documentType) newErrors.documentType = "Required";
49 if (!form.docNumber) newErrors.docNumber = "Required";
50 if (!form.pep) newErrors.pep = "Required";
51 setErrors(newErrors);
52 if (Object.keys(newErrors).length === 0) {
53 setReviewing(true);
54 }
55 };
56
57 const formStyle = css({
58 maxWidth: 480,
59 margin: "auto",
60 padding: 24,
61 fontFamily: "system-ui, sans-serif",
62 });
63
64 if (reviewing) {
65 return (
66 <div style={formStyle}>
67 <p>The details are being reviewed.</p>
68 </div>
69 );
70 }
71
72 return (
73 <div style={formStyle}>
74 <h1>Identity verification</h1>
75 <p>
76 <strong>Full name:</strong> {customer.firstName} {customer.lastName}{" "}
77 </p>
78 <p>
79 <strong>Email:</strong> {customer.email}
80 </p>
81
82 <form onSubmit={handleSubmit}>
83 {/* DOB */}
84 <div style={{ mb: 16, display: "flex", flexDirection: "column" }}>
85 <label htmlFor="dob" style={{ mb: 4, fontWeight: 500 }}>
86 Date of birth
87 </label>
88 <input
89 id="dob"
90 name="dob"
91 type="date"
92 required
93 {...form.dob && { value: form.dob })}
94 onChange={handleChange}
95 style={{
96 padding: 8,
97 border: "1px solid #ccc",
98 borderRadius: 4,
99 }}
100 />
101 {errors.dob && (
102 <p style={{ color: "red", fontSize: 12, marginTop: 4 }}>{errors.dob}</p>
103 )}
104 </div>
105
106 {/* Nationality */}
107 <div style={{ mb: 16, display: "flex", flexDirection: "column" }}>
108 <label htmlFor="nationality" style={{ mb: 4, fontWeight: 500 }}>
109 Nationality
110 </label>
111 <select
112 id="nationality"
113 name="nationality"
114 required
115 value={form.nationality}
116 onChange={handleChange}
117 style={{
118 padding: 8,
119 border: "1px solid #ccc",
120 borderRadius: 4,
121 }}
122 >
123 <option value="">Select nationality</option>
124 {countries.map((c) => (
125 <option key={c.code} value={c.code}>
126 {c.name}
127 </option>
128 ))}
129 </select>
130 {errors.nationality && (
131 <p style={{ color: "red", fontSize: 12, marginTop: 4 }}>
132 {errors.nationality}
133 </p>
134 )}
135 </div>
136
137 {/* Country of residence */}
138 <div style={{ mb: 16, display: "flex", flexDirection: "column" }}>
139 <label htmlFor="countryOfResidence" style={{ mb: 4, fontWeight: 500 }}>
140 Country of residence
141 </label>
142 <select
143 id="countryOfResidence"
144 name="countryOfResidence"
145 required
146 value={form.countryOfResidence}
147 onChange={handleChange}
148 style={{
149 padding: 8,
150 border: "1px solid #ccc",
151 borderRadius: 4,
152 }}
153 >
154 <option value="">Select country</option>
155 {countries.map((c) => (
156 <option key={c.code} value={c.code}>
157 {c.name}
158 </option>
159 ))}
160 </select>
161 {errors.countryOfResidence && (
162 <p style={{ color: "red", fontSize: 12, marginTop: 4 }}>
163 {errors.countryOfResidence}
164 </p>
165 )}
166 </div>
167
168 {/* Tax identification number */}
169 <div style={{ mb: 16, display: "flex", flexDirection: "column" }}>
170 <label htmlFor="tin" style={{ mb: 4, fontWeight: 500 }}>
171 Tax identification number
172 </label>
173 <input
174 id="tin"
175 name="tin"
176 type="text"
177 required
178 {...form.tin && { value: form.tin }}
179 onChange={handleChange}
180 style={{
181 padding: 8,
182 border: "1px solid #ccc",
183 borderRadius: 4,
184 }}
185 />
186 {errors.tin && (
187 <p style={{ color: "red", fontSize: 12, marginTop: 4 }}>{errors.tin}</p>
188 )}
189 </div>
190
191 {/* Type of identity document */}
192 <div style={{ mb: 16, display: "flex", flexDirection: "column" }}>
193 <label htmlFor="documentType" style={{ mb: 4, fontWeight: 500 }}>
194 Type of identity document
195 </label>
196 <select
197 id="documentType"
198 name="documentType"
199 required
200 value={form.documentType}
201 onChange={handleChange}
202 style={{
203 padding: 8,
204 border: "1px solid #ccc",
205 borderRadius: 4,
206 }}
207 >
208 <option value="">Select document type</option>
209 {documentTypes.map((dt) => (
210 <option key={dt.value} value={dt.value}>
211 {dt.label}
212 </option>
213 ))}
214 </select>
215 {errors.documentType && (
216 <p style={{ color: "red", fontSize: 12, marginTop: 4 }}>
217 {errors.documentType}
218 </p>
219 )}
220 </div>
221
222 {/* Document number */}
223 <div style={{ mb: 16, display: "flex", flexDirection: "column" }}>
224 <label htmlFor="docNumber" style={{ mb: 4, fontWeight: 500 }}>
225 Document number
226 </label>
227 <input
228 id="docNumber"
229 name="docNumber"
230 type="text"
231 required
232 {...form.docNumber && { value: form.docNumber }}
233 onChange={handleChange}
234 style={{
235 padding: 8,
236 border: "1px solid #ccc",
237 borderRadius: 4,
238 }}
239 />
240 {errors.docNumber && (
241 <p style={{ color: "red", fontSize: 12, marginTop: 4 }}>
242 {errors.docNumber}
243 </p>
244 )}
245 </div>
246
247 {/* PEPs */}
248 <div style={{ mb: 24, display: "flex", flexDirection: "column" }}>
249 <label style={{ mb: 4, fontWeight: 500 }}>Are you a politically exposed person?</label>
250 <div style={{ display: "flex", gap: 16 }}>
251 <label>
252 <input
253 type="radio"
254 name="pep"
255 value="yes"
256 checked={form.pep === "yes"}
257 onChange={handleChange}
258 style={{ transform: "scale(1.2)", marginRight: 4 }}
259 />
260 Yes
261 </label>
262 <label>
263 <input
264 type="radio"
265 name="pep"
266 value="no"
267 checked={form.pep === "no" || form.pep === ""}
268 onChange={handleChange}
269 style={{ transform: "scale(1.2)" }}
270 />
271 No
272 </label>
273 </div>
274 {errors.pep && (
275 <p style={{ color: "red", fontSize: 12, marginTop: 4 }}>{errors.pep}</p>
276 )}
277 </div>
278
279 <button type="submit" style={{
280 padding: 8,
281 background: "#0066ff",
282 color: "#fff",
283 border: "none",
284 borderRadius: 4,
285 cursor: "pointer",
286 fontSize: 16,
287 }}>
288 Continue
289 </button>
290 </form>
291 </div>
292 );
293 }
typecheck/TS1382 1 quality