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 6 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 list_files 840 29 $0.0000 1 read_file 889 34 $0.0000 2 write_file 1,190 2,405 $0.0000 3
cdb5d9e77633
Output cap The provider's default 11
12 fontWeight: 500,
13 });
14 const StyledInput = css({
15 width: "100%",
16 padding: 8,
17 border: "1px solid #ccc",
18 borderRadius: 4,
19 boxSizing: "border-box",
20 });
21 const StyledSelect = css({
22 width: "100%",
23 padding: 8,
24 border: "1px solid #ccc",
25 borderRadius: 4,
26 boxSizing: "border-box",
27 appearance: "none",
28 backgroundImage: "url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='%23333'%20d='M2%205l%206%206%206-1.41%201.41L12%206l-4.58%204.59L2%205z'/%3E%3C/svg%3E)",
29 backgroundRepeat: "no-repeat",
30 backgroundPosition: "right 8px top 50%",
31 });
32 const StyledButton = css({
33 width: "100%",
34 padding: 12,
35 marginTop: 16,
36 backgroundColor: "primary",
37 color: "white",
38 border: "none",
39 borderRadius: 4,
40 fontSize: 16,
41 cursor: "pointer",
42 });
43 const StyledMessage = css({
44 marginTop: 24,
45 fontSize: 18,
46 color: "green",
47 });
48
49 export default function IdentityVerificationPage() {
50 const [fields, setFields] = useState<{
51 dateOfBirth?: string;
52 nationality?: string;
53 countryOfResidence?: string;
54 taxId?: string;
55 documentType?: string;
56 documentNumber?: string;
57 politicallyExposed?: boolean;
58 }>({});
59
60 const [errors, setErrors] = useState<Record<string, string>>({});
61 const [submitted, setSubmitted] = useState(false);
62
63 // Show known name and email
64 const { firstName, lastName, email } = data.customer;
65
66 const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
67 const { name, value } = e.target;
68 setFields((prev) => ({
69 ...prev,
70 [name]: name === "politicallyExposed" ? value === "yes" : value,
71 }));
72 // clear error for this field if previously set
73 if (errors[name]) {
74 setErrors((prev) => ({ ...prev, [name]: "" }));
75 }
76 };
77
78 const handleSubmit = (e: React.FormEvent) => {
79 e.preventDefault();
80 const newErrors: Record<string, string> = {};
81 const requiredFields = [
82 "dateOfBirth",
83 "nationality",
84 "countryOfResidence",
85 "taxId",
86 "documentType",
87 "documentNumber",
88 "politicallyExposed",
89 ];
90 requiredFields.forEach((f) => {
91 const value = fields[f as keyof typeof fields];
92 if (!value && !(typeof value === "boolean" && value === false)) {
93 newErrors[f] = "This field is required";
94 }
95 });
96 if (Object.keys(newErrors).length > 0) {
97 setErrors(newErrors);
98 return;
99 }
100 // all good
101 setSubmitted(true);
102 };
103
104 if (submitted) {
105 return (
106 <StyledDiv>
107 <StyledMessage>Details are being reviewed.</StyledMessage>
108 </StyledDiv>
109 );
110 }
111
112 return (
113 <div>
114 <h1>Identity verification</h1>
115
116 {/* Known info */}
117 <p>
118 <strong>Name:</strong> {firstName} {lastName}{" "}{" "}<br />
119 <strong>Email:</strong> {email}
120 </p>
121
122 <form onSubmit={handleSubmit}>
123 {/* Date of birth */}
124 <StyledLabel htmlFor="dateOfBirth">Date of birth</StyledLabel>
125 <input
126 id="dateOfBirth"
127 name="dateOfBirth"
128 type="date"
129 required
130 value.fields.dateOfBirth
131 onChange={handleChange}
132 className={StyledInput}
133 placeholder="YYYY-MM-DD"
134 />
135 {errors.dateOfBirth && (
136 <p style={{ color: "red", marginTop: 4 }}>{errors.dateOfBirth}</p>
137 )}
138
139 {/* Nationality */}
140 <StyledLabel htmlFor="nationality">Nationality</StyledLabel>
141 <select
142 id="nationality"
143 name="nationality"
144 required
145 value={fields.nationality ?? ""}
146 onChange={handleChange}
147 className={StyledSelect}
148 >
149 <option value="">Select nationality</option>
150 {data.countries.map((c) => (
151 <option key={c.code} value={c.name}>
152 {c.name}
153 </option>
154 ))}
155 </select>
156 {errors.nationality && (
157 <p style={{ color: "red", marginTop: 4 }}>{errors.nationality}</p>
158 )}
159
160 {/* Country of residence */}
161 <StyledLabel htmlFor="countryOfResidence">Country of residence</StyledLabel>
162 <select
163 id="countryOfResidence"
164 name="countryOfResidence"
165 required
166 value={fields.countryOfResidence ?? ""}
167 onChange={handleChange}
168 className={StyledSelect}
169 >
170 <option value="">Select country</option>
171 {data.countries.map((c) => (
172 <option key={c.code} value={c.name}>
173 {c.name}
174 </option>
175 ))}
176 </select>
177 {errors.countryOfResidence && (
178 <p style={{ color: "red", marginTop: 4 }}>{errors.countryOfResidence}</p>
179 )}
180
181 {/* Tax identification number */}
182 <StyledLabel htmlFor="taxId">Tax identification number</StyledLabel>
183 <input
184 id="taxId"
185 name="taxId"
186 type="text"
187 required
188 value={fields.taxId ?? ""}
189 onChange={handleChange}
190 className={StyledInput}
191 placeholder="TIN"
192 />
193 {errors.taxId && (
194 <p style={{ color: "red", marginTop: 4 }}>{errors.taxId}</p>
195 )}
196
197 {/* Type of identity document */}
198 <StyledLabel htmlFor="documentType">Type of identity document</StyledLabel>
199 <select
200 id="documentType"
201 name="documentType"
202 required
203 value={fields.documentType ?? ""}
204 onChange={handleChange}
205 className={StyledSelect}
206 >
207 <option value="">Select document type</option>
208 {data.documentTypes.map((d) => (
209 <option key={d.value} value={d.value}>
210 {d.label}
211 </option>
212 ))}
213 </select>
214 {errors.documentType && (
215 <p style={{ color: "red", marginTop: 4 }}>{errors.documentType}</p>
216 )}
217
218 {/* Document number */}
219 <StyledLabel htmlFor="documentNumber">Document number</StyledLabel>
220 <input
221 id="documentNumber"
222 name="documentNumber"
223 type="text"
224 required
225 value={fields.documentNumber ?? ""}
226 onChange={handleChange}
227 className={StyledInput}
228 placeholder="Document number"
229 />
230 {errors.documentNumber && (
231 <p style={{ color: "red", marginTop: 4 }}>{errors.documentNumber}</p>
232 )}
233
234 {/* Politically exposed person */}
235 <StyledLabel>Politically exposed person</StyledLabel>
236 <label>
237 <input
238 type="radio"
239 name="politicallyExposed"
240 value="yes"
241 checked={fields.politicallyExposed === true}
242 onChange={handleChange}
243 />
244 Yes
245 </label>
246 <label>
247 <input
248 type="radio"
249 name="politicallyExposed"
250 value="no"
251 checked={fields.politicallyExposed !== true}
252 onChange={handleChange}
253 />
254 No
255 </label>
256 {errors.politicallyExposed && (
257 <p style={{ color: "red", marginTop: 4 }}>{errors.politicallyExposed}</p>
258 )}
259
260 <button type="submit" className={StyledButton}>
261 Continue
262 </button>
263 </form>
264 </div>
265 );
266 }
render/build-failed 1 completeness typecheck/TS1003 1 quality typecheck/TS1382 1 quality