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 23 counted, under 9 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 39 $0.0000 1 write_file 1,146 3,034 $0.0000 2 stop 4,206 24 $0.0000
cdb5d9e77633
Output cap The provider's default 12 docNumber?: string;
13 peP?: string;
14 }
15
16 interface State {
17 errors: FormErrors;
18 submitted: boolean;
19 }
20
21 export default function IdentityVerificationPage() {
22 const [state, setState] = React.useState<State>({ errors: {}, submitted: false });
23
24 const { customer, countries, documentTypes } = data;
25
26 const handleSubmit = (e: React.FormEvent) => {
27 e.preventDefault();
28 const formData = new FormData(e.currentTarget as HTMLFormElement);
29 const dob = formData.get("dob") as string | null;
30 const nationality = formData.get("nationality") as string | null;
31 const countryOfResidence = formData.get("countryOfResidence") as string | null;
32 const tin = formData.get("tin") as string | null;
33 const docType = formData.get("docType") as string | null;
34 const docNumber = formData.get("docNumber") as string | null;
35 const peP = formData.get("peP") as string | null;
36
37 const errors: FormErrors = {};
38
39 if (!dob) errors.dob = "Date of birth is required";
40 if (!nationality) errors.nationality = "Nationality is required";
41 if (!countryOfResidence) errors.countryOfResidence = "Country of residence is required";
42 if (!tin) errors.tin = "Tax identification number is required";
43 if (!docType) errors.docType = "Document type is required";
44 if (!docNumber) errors.docNumber = "Document number is required";
45 if (!peP) errors.peP = "Politically exposed person status is required";
46
47 if (Object.keys(errors).length > 0) {
48 setState({ errors, submitted: false });
49 } else {
50 setState({ errors: {}, submitted: true });
51 }
52 };
53
54 if (state.submitted) {
55 return (
56 <main className="p-8">
57 <p className={css({ marginTop: "2rem", fontSize: "1.25rem" })}>
58 The details are being reviewed.
59 </p>
60 </main>
61 );
62 }
63
64 return (
65 <main className="max-w-md mx-auto p-6">
66 <h1 className={css({ marginBottom: "1.5rem", fontSize: "2rem" })}>
67 Identity verification
68 </h1>
69
70 {/* Already known customer info */}
71 <div className="mb-4 p-3 border rounded">
72 <p className={css({ margin: "0" })}>
73 <strong>Full name:</strong> {customer.firstName} {customer.lastName}
74 </p>
75 <p className={css({ margin: "0.5rem 0 0", marginTop: "0.5rem", fontSize: "0.875rem", color: "muted" })}>
76 <strong>Email:</strong> {customer.email}
77 </p>
78 </div>
79
80 <form onSubmit={handleSubmit} className="space-y-4">
81 {/* Date of birth */}
82 <div>
83 <label className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" })} htmlFor="dob">
84 Date of birth
85 </label>
86 <input
87 id="dob"
88 type="date"
89 name="dob"
90 required
91 className={css({
92 width: "100%",
93 padding: "0.5rem",
94 border: "1px solid #ccc",
95 borderRadius: "4px",
96 })}
97 value={state.errors.dob ? "" : ""}
98 />
99 {state.errors.dob && (
100 <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" })}>
101 {state.errors.dob}
102 </p>
103 )}
104 </div>
105
106 {/* Nationality */}
107 <div>
108 <label className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" })} htmlFor="nationality">
109 Nationality
110 </label>
111 <select
112 id="nationality"
113 name="nationality"
114 required
115 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" })}
116 >
117 <option value="">Select nationality</option>
118 {countries.map((c) => (
119 <option key={c.code} value={c.code}>
120 {c.name}
121 </option>
122 ))}
123 </select>
124 {state.errors.nationality && (
125 <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" })}>
126 {state.errors.nationality}
127 </p>
128 )}
129 </div>
130
131 {/* Country of residence */}
132 <div>
133 <label className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" })} htmlFor="countryOfResidence">
134 Country of residence
135 </label>
136 <select
137 id="countryOfResidence"
138 name="countryOfResidence"
139 required
140 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" })}
141 >
142 <option value="">Select country</option>
143 {countries.map((c) => (
144 <option key={c.code} value={c.code}>
145 {c.name}
146 </option>
147 ))}
148 </select>
149 {state.errors.countryOfResidence && (
150 <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" })}>
151 {state.errors.countryOfResidence}
152 </p>
153 )}
154 </div>
155
156 {/* Tax identification number */}
157 <div>
158 <label className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" })} htmlFor="tin">
159 Tax identification number
160 </label>
161 <input
162 id="tin"
163 name="tin"
164 type="text"
165 required
166 className={css({
167 width: "100%",
168 padding: "0.5rem",
169 border: "1px solid #ccc",
170 borderRadius: "4px",
171 })}
172 />
173 {state.errors.tin && (
174 <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" })}>
175 {state.errors.tin}
176 </p>
177 )}
178 </div>
179
180 {/* Type of identity document */}
181 <div>
182 <label className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" })} htmlFor="docType">
183 Type of identity document
184 </label>
185 <select
186 id="docType"
187 name="docType"
188 required
189 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" })}
190 >
191 <option value="">Select document type</option>
192 {documentTypes.map((dt) => (
193 <option key={dt.value} value={dt.value}>
194 {dt.label}
195 </option>
196 ))}
197 </select>
198 {state.errors.docType && (
199 <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" })}>
200 {state.errors.docType}
201 </p>
202 )}
203 </div>
204
205 {/* Document number */}
206 <div>
207 <label className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" })} htmlFor="docNumber">
208 Document number
209 </label>
210 <input
211 id="docNumber"
212 name="docNumber"
213 type="text"
214 required
215 className={css({
216 width: "100%",
217 padding: "0.5rem",
218 border: "1px solid #ccc",
219 borderRadius: "4px",
220 })}
221 />
222 {state.errors.docNumber && (
223 <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" })}>
224 {state.errors.docNumber}
225 </p>
226 )}
227 </div>
228
229 {/* Politically exposed person */}
230 <div>
231 <label className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" })}>Are you a politically exposed person?</label>
232 <label className={css({ display: "inline-block", marginRight: "1.5rem", fontSize: "0.875rem" }})>
233 <input
234 type="radio"
235 name="peP"
236 value="yes"
237 required
238 className={css({ marginRight: "0.25rem" })}
239 />
240 Yes
241 </label>
242 <label className={css({ display: "inline-block", fontSize: "0.875rem" }})>
243 <input
244 type="radio"
245 name="peP"
246 value="no"
247 required
248 className={css({ marginLeft: "0.5rem", marginRight: "0" })}
249 />
250 No
251 </label>
252 {state.errors.peP && (
253 <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" })}>
254 {state.errors.peP}
255 </p>
256 )}
257 </div>
258
259 <button type="submit" className={css({
260 width: "100%",
261 padding: "0.75rem",
262 background: "#3b82f6",
263 color: "white",
264 border: "none",
265 borderRadius: "4px",
266 fontSize: "1rem",
267 cursor: "pointer",
268 })}>
269 Continue
270 </button>
271 </form>
272 </main>
273 );
274 }
Unsafe type assertion: type 'string | null' is more narrow than the original type.
typecheck/TS1005 3 quality typecheck/TS17002 3 quality typecheck/TS1003 2 quality typecheck/TS1109 2 quality typecheck/TS1382 2 quality lint/syntax-error 1 quality render/build-failed 1 completeness typecheck/TS2657 1 quality