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 21 counted, under 10 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 1,390 63 $0.0000 1 list_components 1,720 126 $0.0000 2 get_component 4,295 433 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 CardHeader,
13 CardTitle,
14 CardBody,
15 Heading,
16 Stack,
17 Text,
18 } from "@vektos/ds";
19 import data from "./fixture.json";
20
21 const {
22 customer: { firstName, lastName, email },
23 countries,
24 documentTypes,
25 } = data;
26
27 type FieldErrors = {
28 dob?: string;
29 nationality?: string;
30 countryOfResidence?: string;
31 taxId?: string;
32 docType?: string;
33 docNumber?: string;
34 isPEP?: string;
35 };
36
37 export default function Page() {
38 const [form, setForm] = useState({
39 dob: "",
40 nationality: "",
41 countryOfResidence: "",
42 taxId: "",
43 docType: "",
44 docNumber: "",
45 isPEP: false,
46 });
47
48 const [errors, setErrors] = useState<FieldErrors>({});
49 const [submitted, setSubmitted] = useState(false);
50
51 const handleChange = (
52 e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
53 field: keyof typeof form,
54 ) => {
55 const value = e.target.type === "checkbox" ? e.target.checked : e.target.value;
56 setForm({ ...form, [field]: value });
57 };
58
59 const handleSubmit = (e: React.FormEvent) => {
60 e.preventDefault();
61 const { dob, nationality, countryOfResidence, taxId, docType, docNumber, isPEP } = form;
62 const newErrors: FieldErrors = {};
63
64 if (!dob) newErrors.dob = "This field is required";
65 if (!nationality) newErrors.nationality = "This field is required";
66 if (!countryOfResidence) newErrors.countryOfResidence = "This field is required";
67 if (!taxId) newErrors.taxId = "This field is required";
68 if (!docType) newErrors.docType = "This field is required";
69 if (!docNumber) newErrors.docNumber = "This field is required";
70 if (!isPEP) newErrors.isPEP = "This field is required";
71
72 setErrors(newErrors);
73 if (Object.keys(newErrors).length === 0) {
74 setSubmitted(true);
75 }
76 };
77
78 // reset errors when user starts typing – simple version: clear errors on any change
79 // (we could be smarter, but this keeps the example concise)
80 const clearErrors = () => setErrors({});
81
82 return submitted ? (
83 // Review message replaces the form
84 <Card>
85 <CardHeader>
86 <CardTitle>Details are being reviewed</CardTitle>
87 </CardHeader>
88 <CardBody>
89 <Text>Your identity verification details are currently being reviewed. We will contact you shortly.</Text>
90 </CardBody>
91 </Card>
92 ) : (
93 <Card>
94 <CardHeader>
95 <Heading level={2}>Identity verification</Heading>
96 </CardHeader>
97 <CardBody>
98 <Stack gap={4}>
99 {/* Static customer info */}
100 <Stack gap={2}>
101 <Text>
102 <Strong>{firstName} {lastName}</Strong>{" "}
103 <Code>{email}</Code>
104 </Text>
105 <Text tone="muted">
106 These details cannot be edited on this step.
107 </Text>
108 </Stack>
109
110 {/* Form fields */}
111 <FormField label="Date of birth">
112 <DatePicker
113 defaultValue=""
114 placeholder="YYYY-MM-DD"
115 value={form.dob}
116 onValueChange={(v) => handleChange({ target: { type: "date", value: v ? v : "" }, field: "dob" as const })}
117 onChange={(e) => handleChange(e, "dob")}
118 min="1900-01-01"
119 max={new Date().toISOString().split("T")[0]}
120 />
121 {errors.dob && <Text error>{errors.dob}</Text>}
122 </FormField>
123
124 <FormField label="Nationality">
125 <Select
126 placeholder="Select nationality"
127 value={form.nationality}
128 onValueChange={(v) => setForm({ ...form, nationality: v })}
129 options={countries.map((c) => ({
130 label: c.name,
131 value: c.code,
132 }))}
133 />
134 {errors.nationality && <Text error>{errors.nationality}</Text>}
135 </FormField>
136
137 <FormField label="Country of residence">
138 <Select
139 placeholder="Select country of residence"
140 value={form.countryOfResidence}
141 onValueChange={(v) => setForm({ ...form, countryOfResidence: v })}
142 options={countries.map((c) => ({
143 label: c.name,
144 value: c.code,
145 }))}
146 />
147 {errors.countryOfResidence && <Text error>{errors.countryOfResidence}</Text>}
148 </FormField>
149
150 <FormField label="Tax identification number">
151 <Input
152 placeholder="e.g. 123 456 789"
153 value={form.taxId}
154 onChange={(e) => handleChange(e, "taxId")}
155 />
156 {errors.taxId && <Text error>{errors.taxId}</Text>}
157 </FormField>
158
159 <FormField label="Type of identity document">
160 <Select
161 placeholder="Select document type"
162 value={form.docType}
163 onValueChange={(v) => setForm({ ...form, docType: v })}
164 options={documentTypes.map((dt) => ({
165 label: dt.label,
166 value: dt.value,
167 }))}
168 />
169 {errors.docType && <Text error>{errors.docType}</Text>}
170 </FormField>
171
172 <FormField label="Document number">
173 <Input
174 placeholder="Enter document number"
175 value={form.docNumber}
176 onChange={(e) => handleChange(e, "docNumber")}
177 />
178 {errors.docNumber && <Text error>{errors.docNumber}</Text>}
179 </FormField>
180
181 <FormField label="Politically exposed person">
182 <Checkbox
183 checked={form.isPEP}
184 onCheckedChange={(checked) => setForm({ ...form, isPEP: checked })}
185 >
186 Yes
187 </Checkbox>{" "}
188 <Checkbox
189 checked={!form.isPEP}
190 onCheckedChange={() => setForm({ ...form, isPEP: false })}
191 >
192 No
193 </Checkbox>
194 {errors.isPEP && <Text error>{errors.isPEP}</Text>}
195 </FormField>
196
197 {/* Submit button */}
198 <Button
199 variant="solid"
200 size="md"
201 disabled={Object.keys(errors).length > 0}
202 onClick={handleSubmit}
203 >
204 Continue
205 </Button>
206 </Stack>
207 </CardBody>
208 </Card>
209 );
210 }
Type '{ error: true; children: string; }' is not assignable to type 'IntrinsicAttributes & TextProps'.
page.tsx:194:36 Type '{ error: true; children: string; }' is not assignable to type 'IntrinsicAttributes & TextProps'. lint/react(jsx-no-undef) 2 quality typecheck/TS2304 2 quality typecheck/TS2552 2 quality lint/react(purity) 1 quality render/runtime-error 1 completeness typecheck/TS2375 1 quality page.tsx:117:15 Type '{ defaultValue: string; placeholder: string; value: string; onValueChange: (v: string | null) => void; onChange: (e: any) => void; min: string; max: string | undefined; }' is not assignable to type 'IntrinsicAttributes & DatePickerProps' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties. Every run that broke typecheck/TS2375 typecheck/TS2554 1 quality typecheck/TS7006 1 quality 4 get_component 1,735 28 $0.0000
5 get_component 2,507 30 $0.0000
6 get_component 1,316 30 $0.0000
7 get_component 2,210 29 $0.0000
8 get_component 625 42 $0.0000
9 get_component 2,005 29 $0.0000
10 write_file 2,653 2,238 $0.0000
11 check_code 2,822 1,519 $0.0000