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 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 758 30 $0.0000 1 read_file, get_guidelines 610 44 $0.0000 2 list_components, list_tokens 3,610 40 $0.0000 3
cdb5d9e77633
Output cap 20,000 tokens a step 12 DataList,
13 DatePicker,
14 FormField,
15 Heading,
16 Input,
17 RadioGroup,
18 Select,
19 Stack,
20 Text,
21 } from "@vektos/ds";
22
23 type Errors = {
24 dob?: string;
25 nationality?: string;
26 residence?: string;
27 taxId?: string;
28 docType?: string;
29 docNumber?: string;
30 pep?: string;
31 };
32
33 export default function IdentityVerificationPage() {
34 const { customer, countries, documentTypes } = data;
35
36 const [dob, setDob] = useState<string | null>(null);
37 const [nationality, setNationality] = useState("");
38 const [residence, setResidence] = useState("");
39 const [taxId, setTaxId] = useState("");
40 const [docType, setDocType] = useState("");
41 const [docNumber, setDocNumber] = useState("");
42 const [pep, setPep] = useState("");
43
44 const [errors, setErrors] = useState<Errors>({});
45 const [submitted, setSubmitted] = useState(false);
46
47 const countryOptions = countries.map((country) => ({
48 label: country.name,
49 value: country.code,
50 }));
51
52 const documentOptions = documentTypes.map((type) => ({
53 label: type.label,
54 value: type.value,
55 }));
56
57 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
58 event.preventDefault();
59
60 const next: Errors = {};
61 if (!dob) {
62 next.dob = "Enter your date of birth.";
63 }
64 if (!nationality) {
65 next.nationality = "Select your nationality.";
66 }
67 if (!residence) {
68 next.residence = "Select your country of residence.";
69 }
70 if (!taxId.trim()) {
71 next.taxId = "Enter your tax identification number.";
72 }
73 if (!docType) {
74 next.docType = "Select a type of identity document.";
75 }
76 if (!docNumber.trim()) {
77 next.docNumber = "Enter your document number.";
78 }
79 if (!pep) {
80 next.pep = "Select whether you are a politically exposed person.";
81 }
82
83 setErrors(next);
84 if (Object.keys(next).length === 0) {
85 setSubmitted(true);
86 }
87 }
88
89 if (submitted) {
90 return (
91 <Stack gap="6" maxWidth="lg" marginBlock="8">
92 <Heading level={1}>Identity verification</Heading>
93 <Alert tone="neutral" title="Details being reviewed">
94 Your details are being reviewed.
95 </Alert>
96 </Stack>
97 );
98 }
99
100 return (
101 <Stack gap="6" maxWidth="lg" marginBlock="8">
102 <Stack gap="1">
103 <Heading level={1}>Identity verification</Heading>
104 <Text tone="muted" size="sm">
105 Confirm your identity to continue opening your account.
106 </Text>
107 </Stack>
108
109 <Card>
110 <CardHeader>
111 <CardTitle>Customer details</CardTitle>
112 </CardHeader>
113 <CardBody>
114 <DataList
115 items={[
116 {
117 label: "Full name",
118 value: `${customer.firstName} ${customer.lastName}`,
119 },
120 { label: "Email", value: customer.email },
121 ]}
122 />
123 </CardBody>
124 </Card>
125
126 <Card>
127 <CardHeader>
128 <CardTitle>Identity details</CardTitle>
129 </CardHeader>
130 <CardBody>
131 <form onSubmit={handleSubmit}>
132 <Stack gap="4">
133 <FormField label="Date of birth" required error={errors.dob}>
134 <DatePicker value={dob} onValueChange={setDob} />
135 </FormField>
136
137 <FormField label="Nationality" required error={errors.nationality}>
138 <Select
139 placeholder="Select nationality"
140 options={countryOptions}
141 value={nationality}
142 onValueChange={setNationality}
143 />
144 </FormField>
145
146 <FormField
147 label="Country of residence"
148 required
149 error={errors.residence}
150 >
151 <Select
152 placeholder="Select country of residence"
153 options={countryOptions}
154 value={residence}
155 onValueChange={setResidence}
156 />
157 </FormField>
158
159 <FormField
160 label="Tax identification number"
161 required
162 error={errors.taxId}
163 >
164 <Input
165 value={taxId}
166 onChange={(event) => setTaxId(event.target.value)}
167 />
168 </FormField>
169
170 <FormField
171 label="Type of identity document"
172 required
173 error={errors.docType}
174 >
175 <Select
176 placeholder="Select document type"
177 options={documentOptions}
178 value={docType}
179 onValueChange={setDocType}
180 />
181 </FormField>
182
183 <FormField
184 label="Document number"
185 required
186 error={errors.docNumber}
187 >
188 <Input
189 value={docNumber}
190 onChange={(event) => setDocNumber(event.target.value)}
191 />
192 </FormField>
193
194 <RadioGroup
195 label="Are you a politically exposed person?"
196 required
197 value={pep}
198 onValueChange={setPep}
199 options={[
200 { label: "Yes", value: "yes" },
201 { label: "No", value: "no" },
202 ]}
203 orientation="horizontal"
204 error={errors.pep}
205 />
206
207 <Button type="submit" variant="solid">
208 Submit
209 </Button>
210 </Stack>
211 </form>
212 </CardBody>
213 </Card>
214 </Stack>
215 );
216 }
217 ```
218
219 Run check_code.<|end|><|start|>startup to=check_code<|channel|>analysis <|constrain|>xml<|message|><rfl:parameter name="code">
220 "use client";
221
222 import { useState } from "react";
223 import data from "./fixture.json";
224 import {
225 Alert,
226 Button,
227 Card,
228 CardBody,
229 CardHeader,
230 CardTitle,
231 DataList,
232 DatePicker,
233 FormField,
234 Heading,
235 Input,
236 RadioGroup,
237 Select,
238 Stack,
239 Text,
240 } from "@vektos/ds";
241
242 type Errors = {
243 dob?: string;
244 nationality?: string;
245 residence?: string;
246 taxId?: string;
247 docType?: string;
248 docNumber?: string;
249 pep?: string;
250 };
251
252 export default function IdentityVerificationPage() {
253 const { customer, countries, documentTypes } = data;
254
255 const [dob, setDob] = useState<string | null>(null);
256 const [nationality, setNationality] = useState("");
257 const [residence, setResidence] = useState("");
258 const [taxId, setTaxId] = useState("");
259 const [docType, setDocType] = useState("");
260 const [docNumber, setDocNumber] = useState("");
261 const [pep, setPep] = useState("");
262
263 const [errors, setErrors] = useState<Errors>({});
264 const [submitted, setSubmitted] = useState(false);
265
266 const countryOptions = countries.map((country) => ({
267 label: country.name,
268 value: country.code,
269 }));
270
271 const documentOptions = documentTypes.map((type) => ({
272 label: type.label,
273 value: type.value,
274 }));
275
276 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
277 event.preventDefault();
278
279 const next: Errors = {};
280 if (!dob) {
281 next.dob = "Enter your date of birth.";
282 }
283 if (!nationality) {
284 next.nationality = "Select your nationality.";
285 }
286 if (!residence) {
287 next.residence = "Select your country of residence.";
288 }
289 if (!taxId.trim()) {
290 next.taxId = "Enter your tax identification number.";
291 }
292 if (!docType) {
293 next.docType = "Select a type of identity document.";
294 }
295 if (!docNumber.trim()) {
296 next.docNumber = "Enter your document number.";
297 }
298 if (!pep) {
299 next.pep = "Select whether you are a politically exposed person.";
300 }
301
302 setErrors(next);
303 if (Object.keys(next).length === 0) {
304 setSubmitted(true);
305 }
306 }
307
308 if (submitted) {
309 return (
310 <Stack gap="6" maxWidth="lg" marginBlock="8">
311 <Heading level={1}>Identity verification</Heading>
312 <Alert tone="neutral" title="Details being reviewed">
313 Your details are being reviewed.
314 </Alert>
315 </Stack>
316 );
317 }
318
319 return (
320 <Stack gap="6" maxWidth="lg" marginBlock="8">
321 <Stack gap="1">
322 <Heading level={1}>Identity verification</Heading>
323 <Text tone="muted" size="sm">
324 Confirm your identity to continue opening your account.
325 </Text>
326 </Stack>
327
328 <Card>
329 <CardHeader>
330 <CardTitle>Customer details</CardTitle>
331 </CardHeader>
332 <CardBody>
333 <DataList
334 items={[
335 {
336 label: "Full name",
337 value: `${customer.firstName} ${customer.lastName}`,
338 },
339 { label: "Email", value: customer.email },
340 ]}
341 />
342 </CardBody>
343 </Card>
344
345 <Card>
346 <CardHeader>
347 <CardTitle>Identity details</CardTitle>
348 </CardHeader>
349 <CardBody>
350 <form onSubmit={handleSubmit}>
351 <Stack gap="4">
352 <FormField label="Date of birth" required error={errors.dob}>
353 <DatePicker value={dob} onValueChange={setDob} />
354 </FormField>
355
356 <FormField label="Nationality" required error={errors.nationality}>
357 <Select
358 placeholder="Select nationality"
359 options={countryOptions}
360 value={nationality}
361 onValueChange={setNationality}
362 />
363 </FormField>
364
365 <FormField
366 label="Country of residence"
367 required
368 error={errors.residence}
369 >
370 <Select
371 placeholder="Select country of residence"
372 options={countryOptions}
373 value={residence}
374 onValueChange={setResidence}
375 />
376 </FormField>
377
378 <FormField
379 label="Tax identification number"
380 required
381 error={errors.taxId}
382 >
383 <Input
384 value={taxId}
385 onChange={(event) => setTaxId(event.target.value)}
386 />
387 </FormField>
388
389 <FormField
390 label="Type of identity document"
391 required
392 error={errors.docType}
393 >
394 <Select
395 placeholder="Select document type"
396 options={documentOptions}
397 value={docType}
398 onValueChange={setDocType}
399 />
400 </FormField>
401
402 <FormField
403 label="Document number"
404 required
405 error={errors.docNumber}
406 >
407 <Input
408 value={docNumber}
409 onChange={(event) => setDocNumber(event.target.value)}
410 />
411 </FormField>
412
413 <RadioGroup
414 label="Are you a politically exposed person?"
415 required
416 value={pep}
417 onValueChange={setPep}
418 options={[
419 { label: "Yes", value: "yes" },
420 { label: "No", value: "no" },
421 ]}
422 orientation="horizontal"
423 error={errors.pep}
424 />
425
426 <Button type="submit" variant="solid">
427 Submit
428 </Button>
429 </Stack>
430 </form>
431 </CardBody>
432 </Card>
433 </Stack>
434 );
435 }
typecheck/TS1160 1 quality get_component, get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component 10,044 202 $0.0000
5 get_component, get_component 4,386 212 $0.0000
6 list_files 1,837 121 $0.0000
10 read_file 847 1,581 $0.0000
11 read_file 1,691 39 $0.0000
12 get_component 95 615 $0.0000
13 write_file 1,418 3,753 $0.0000
14 check_code 6,860 1,250 $0.0000