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 88 counted, under 11 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 51 $0.0000 1 write_file 1,158 3,133 $0.0000 2 stop 4,317 38 $0.0000
cdb5d9e77633
Output cap The provider's default 12 value: string;
13 label: string;
14 }
15
16 export default function IdentityVerificationPage() {
17 const {
18 firstName,
19 lastName,
20 email,
21 } = data.customer;
22
23 const [dob, setDob] = useState("");
24 const [nationality, setNationality] = useState<Country | null>(null);
25 const [countryOfResidence, setCountryOfResidence] = useState<Country | null>(null);
26 const [taxId, setTaxId] = useState("");
27 const [docType, setDocType] = useState<string | null>(null);
28 const [docNumber, setDocNumber] = useState("");
29 const [isPEP, setIsPEP] = useState<boolean | null>(null);
30
31 const [errors, setErrors] = useState<Record<string, string>>({});
32 const [showReview, setShowReview] = useState(false);
33
34 const countries: Country[] = data.countries.map((c) => ({ code: c.code, name: c.name }));
35 const docTypes: DocType[] = data.documentTypes.map((d) => ({ value: d.value, label: d.label }));
36
37 const handleSubmit = (e: React.FormEvent) => {
38 e.preventDefault();
39 const newErrors: Record<string, string> = {};
40
41 if (!dob) newErrors.dob = "Date of birth is required";
42 if (!nationality) newErrors.nationality = "Nationality is required";
43 if (!countryOfResidence) newErrors.countryOfResidence = "Country of residence is required";
44 if (!taxId) newErrors.taxId = "Tax identification number is required";
45 if (!docType) newErrors.docType = "Identity document type is required";
46 if (!docNumber) newErrors.docNumber = "Document number is required";
47 if (isPEP === null) newErrors.isPEP = "Please indicate if you are a politically exposed person";
48
49 if (Object.keys(newErrors).length > 0) {
50 setErrors(newErrors);
51 return;
52 }
53
54 // All fields filled
55 setShowReview(true);
56 };
57
58 if (showReview) {
59 return (
60 <div className={css({ marginTop: "2rem", fontSize: "1.25rem" })}>
61 <p>Details are being reviewed.</p>
62 </div>
63 );
64 }
65
66 return (
67 <div className={css({ maxWidth: "600px", margin: "2rem auto", fontFamily: "sans-serif" })}>
68 <h1>Identity verification</h1>
69
70 {/* Known customer info - read‑only */}
71 <div className={css({ marginBottom: "1.5rem" })}>
72 <p>
73 <strong>Name:</strong> {firstName} {lastName}
74 </p>
75 <p>
76 <strong>Email:</strong> {email}
77 </p>
78 </div>
79
80 <form onSubmit={handleSubmit} className={css({ marginTop: "1.5rem" })}>
81 {/* Date of birth */}
82 <div>
83 <label htmlFor="dob" className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" )}}>
84 Date of birth
85 </label>
86 <input
87 id="dob"
88 type="date"
89 value={dob}
90 onChange={(e) => setDob(e.target.value)}
91 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" )}}
92 {...errors.dob && { style: { borderColor: "red", color: "red" }}}
93 required
94 />
95 {errors.dob && <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" )}>}{errors.dob}{</p>}
96 </div>
97
98 {/* Nationality */}
99 <div>
100 <label htmlFor="nationality" className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" )}}>
101 Nationality
102 </label>
103 <select
104 value={nationality?.code || ""}
105 onChange={(e) => setNationality(countries.find((c) => c.code === e.target.value) || null)}
106 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" )}}
107 required
108 >
109 <option value="">Select nationality</option>
110 {countries.map((c) => (
111 <option key={c.code} value={c.code}>
112 {c.name}
113 </option>
114 ))}
115 </select>
116 {errors.nationality && (
117 <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" )}>}{errors.nationality}{</p>}
118 )}
119 </div>
120
121 {/* Country of residence */}
122 <div>
123 <label htmlFor="countryResidence" className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" )}}>
124 Country of residence
125 </label>
126 <select
127 value={countryOfResidence?.code || ""}
128 onChange={(e) => setCountryOfResidence(countries.find((c) => c.code === e.target.value) || null)}
129 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" )}}
130 required
131 >
132 <option value="">Select country</option>
133 {countries.map((c) => (
134 <option key={c.code} value={c.code}>
135 {c.name}
136 </option>
137 ))}
138 </select>
139 {errors.countryOfResidence && (
140 <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" )}>}{errors.countryOfResidence}{</p>}
141 )}
142 </div>
143
144 {/* Tax identification number */}
145 <div>
146 <label htmlFor="taxId" className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" )}}>
147 Tax identification number
148 </label>
149 <input
150 id="taxId"
151 type="text"
152 value={taxId}
153 onChange={(e) => setTaxId(e.target.value)}
154 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" )}}
155 required
156 {...errors.taxId && { style: { borderColor: "red", color: "red" }}}
157 />
158 {errors.taxId && <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" )}>}{errors.taxId}{</p>}
159 </div>
160
161 {/* Type of identity document */}
162 <div>
163 <label htmlFor="docType" className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" )}}>
164 Type of identity document
165 </label>
166 <select
167 value={docType || ""}
168 onChange={(e) => setDocType(e.target.value || null)}
169 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" )}}
170 required
171 >
172 <option value="">Select document type</option>
173 {docTypes.map((d) => (
174 <option key={d.value} value={d.value}>
175 {d.label}
176 </option>
177 ))}
178 </select>
179 {errors.docType && (
180 <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" )}>}{errors.docType}{</p>}
181 )}
182 </div>
183
184 {/* Document number */}
185 <div>
186 <label htmlFor="docNumber" className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" )}}>
187 Document number
188 </label>
189 <input
190 id="docNumber"
191 type="text"
192 value={docNumber}
193 onChange={(e) => setDocNumber(e.target.value)}
194 className={css({ width: "100%", padding: "0.5rem", border: "1px solid #ccc", borderRadius: "4px" )}}
195 required
196 {...errors.docNumber && { style: { borderColor: "red", color: "red" }}}
197 />
198 {errors.docNumber && <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" )}>}{errors.docNumber}{</p>}
199 </div>
200
201 {/* Politically exposed person */}
202 <div>
203 <label htmlFor="isPEP" className={css({ display: "block", marginBottom: "0.5rem", fontSize: "0.875rem" )}}>
204 Are you a politically exposed person?
205 </label>
206 <div className={css({ display: "flex", gap: "1rem" })}>
207 <label
208 key="yes"
209 className={css({ display: "flex", alignItems: "center", gap: "0.5rem" })}
210 >
211 <input
212 type="radio"
213 name="pep"
214 value="yes"
215 checked={isPEP === true}
216 onChange={() => setIsPEP(true)}
217 className={css({ transform: "scale(1.2)", width: "1.2em", height: "1.2em" })}
218 />
219 Yes
220 </label>
221 <label
222 key="no"
223 className={css({ display: "flex", alignItems: "center", gap: "0.5rem" })}
224 >
225 <input
226 type="radio"
227 name="pep"
228 value="no"
229 checked={isPEP === false}
230 onChange={() => setIsPEP(false)}
231 className={css({ transform: "scale(1.2)", width: "1.2em", height: "1.2em" })}
232 />
233 No
234 </label>
235 </div>
236 {errors.isPEP && (
237 <p className={css({ color: "red", marginTop: "0.25rem", fontSize: "0.75rem" )}>}{errors.isPEP}{</p>}
238 )}
239 </div>
240
241 <button type="submit" className={css({ marginTop: "1.5rem", padding: "0.75rem 1.5rem", fontSize: "1rem" )}}>
242 Continue
243 </button>
244 </form>
245 </div>
246 );
247 }
',' expected.
typecheck/TS1128 17 quality typecheck/TS1003 14 quality typecheck/TS1109 9 quality typecheck/TS1381 7 quality typecheck/TS2657 6 quality typecheck/TS1382 3 quality typecheck/TS17002 2 quality lint/syntax-error 1 quality render/build-failed 1 completeness