Runs / kyc-form Batch Runs from different design-system versions should not be compared.
The page A screenshot in each theme, as the benchmark took it.
page.tsx As the agent left it; marked lines broke a rule.
Violations 12 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 get_guidelines, list_files, list_components, read_file 975 139 $0.0033 1 get_component, get_component, get_component, get_component, get_component, list_tokens 2,138 208 $0.0065 2 write_file 4,041 6,050 $0.0692
Output cap The provider's default 4 import {
5 Button,
6 Card,
7 CardBody,
8 CardDescription,
9 CardFooter,
10 CardHeader,
11 CardTitle,
12 FormField,
13 Input,
14 Select,
15 } from "@vektos/ds";
16 import { css } from "styled-system/css";
17 import data from "./fixture.json";
18
19 type FormValues = {
20 dateOfBirth: string;
21 nationality: string;
22 countryOfResidence: string;
23 taxIdentificationNumber: string;
24 documentType: string;
25 documentNumber: string;
26 politicallyExposedPerson: string;
27 };
28
29 type FieldName = keyof FormValues;
30 type FormErrors = Partial<Record<FieldName, string>>;
31
32 const initialValues: FormValues = {
33 dateOfBirth: "",
34 nationality: "",
35 countryOfResidence: "",
36 taxIdentificationNumber: "",
37 documentType: "",
38 documentNumber: "",
39 politicallyExposedPerson: "",
40 };
41
42 const errorMessages: Record<FieldName, string> = {
43 dateOfBirth: "Enter your date of birth.",
44 nationality: "Select your nationality.",
45 countryOfResidence: "Select your country of residence.",
46 taxIdentificationNumber: "Enter your tax identification number.",
47 documentType: "Select your identity document type.",
48 documentNumber: "Enter your document number.",
49 politicallyExposedPerson: "Select yes or no.",
50 };
51
52 const countryOptions = data.countries.map((country) => ({
53 value: country.code,
54 label: country.name,
55 }));
56
57 const pepOptions = [
58 { value: "yes", label: "Yes" },
59 { value: "no", label: "No" },
60 ];
61
62 const fieldGrid = css({
63 display: "grid",
64 gridTemplateColumns: { base: "1fr", md: "repeat(2, minmax(0, 1fr))" },
65 gap: "4",
66 });
67
68 const sectionStack = css({
69 display: "grid",
70 gap: "4",
71 });
72
73 export default function IdentityVerificationPage() {
74 const [values, setValues] = useState<FormValues>(initialValues);
75 const [errors, setErrors] = useState<FormErrors>({});
76 const [isReviewing, setIsReviewing] = useState(false);
77
78 const fullName = `${data.customer.firstName} ${data.customer.lastName}`;
79
80 function updateField(name: FieldName, value: string) {
81 setValues((current) => ({ ...current, [name]: value }));
82
83 if (value.trim()) {
84 setErrors((current) => {
85 if (!current[name]) return current;
86 const next = { ...current };
87 delete next[name];
88 return next;
89 });
90 }
91 }
92
93 function handleSubmit(event: FormEvent<HTMLFormElement>) {
94 event.preventDefault();
95
96 const nextErrors: FormErrors = {};
97 (Object.keys(values) as FieldName[]).forEach((name) => {
98 if (!values[name].trim()) {
99 nextErrors[name] = errorMessages[name];
100 }
101 });
102
103 setErrors(nextErrors);
104
105 if (Object.keys(nextErrors).length === 0) {
106 setIsReviewing(true);
107 }
108 }
109
110 return (
111 <main
112 className={`vektos ${css({
113 width: "full",
114 bg: "bg.canvas",
115 color: "fg.default",
116 px: "4",
117 py: "8",
118 })}`}
119 >
120 <div className={css({ width: "full", maxWidth: "lg", mx: "auto" })}>
121 <p
122 className={css({
123 mb: "2",
124 fontSize: "sm",
125 fontWeight: "medium",
126 color: "fg.muted",
127 })}
128 >
129 Account opening
130 </p>
131
132 {isReviewing ? (
133 <Card>
134 <CardHeader>
135 <CardTitle asChild>
136 <h1>Identity verification</h1>
137 </CardTitle>
138 </CardHeader>
139 <CardBody>
140 <div
141 role="status"
142 aria-live="polite"
143 className={css({
144 display: "flex",
145 alignItems: "flex-start",
146 gap: "4",
147 p: "6",
148 rounded: "md",
149 bg: "success.subtle",
150 color: "success.text",
151 })}
152 >
153 <span
154 aria-hidden="true"
155 className={css({ fontSize: "lg", lineHeight: "tight" })}
156 >
157 ✓
158 </span>
159 <div>
160 <h2
161 className={css({
162 fontSize: "lg",
163 fontWeight: "semibold",
164 lineHeight: "tight",
165 })}
166 >
167 We’re reviewing your details
168 </h2>
169 <p className={css({ mt: "2", fontSize: "sm" })}>
170 Thanks, {data.customer.firstName}. Your identity details have
171 been submitted and are being reviewed.
172 </p>
173 </div>
174 </div>
175 </CardBody>
176 </Card>
177 ) : (
178 <Card>
179 <form onSubmit={handleSubmit} noValidate>
180 <CardHeader>
181 <CardTitle asChild>
182 <h1>Identity verification</h1>
183 </CardTitle>
184 <CardDescription>
185 Provide your details exactly as they appear on your official
186 documents. All fields are required.
187 </CardDescription>
188 </CardHeader>
189
190 <CardBody>
191 <div className={css({ display: "grid", gap: "6" })}>
192 <section
193 aria-labelledby="customer-details-heading"
194 className={css({
195 display: "grid",
196 gap: "4",
197 p: "4",
198 rounded: "md",
199 bg: "bg.subtle",
200 })}
201 >
202 <div>
203 <h2
204 id="customer-details-heading"
205 className={css({
206 fontSize: "sm",
207 fontWeight: "semibold",
208 })}
209 >
210 Customer details
211 </h2>
212 <p
213 className={css({
214 mt: "1",
215 fontSize: "sm",
216 color: "fg.muted",
217 })}
218 >
219 These details can’t be edited here.
220 </p>
221 </div>
222 <dl className={fieldGrid}>
223 <div>
224 <dt
225 className={css({
226 fontSize: "xs",
227 color: "fg.muted",
228 })}
229 >
230 Full name
231 </dt>
232 <dd
233 className={css({
234 m: "0",
235 mt: "1",
236 fontSize: "sm",
237 fontWeight: "medium",
238 })}
239 >
240 {fullName}
241 </dd>
242 </div>
243 <div>
244 <dt
245 className={css({
246 fontSize: "xs",
247 color: "fg.muted",
248 })}
249 >
250 Email address
251 </dt>
252 <dd
253 className={css({
254 m: "0",
255 mt: "1",
256 fontSize: "sm",
257 fontWeight: "medium",
258 overflowWrap: "anywhere",
259 })}
260 >
261 {data.customer.email}
262 </dd>
263 </div>
264 </dl>
265 </section>
266
267 <section
268 aria-labelledby="personal-details-heading"
269 className={sectionStack}
270 >
271 <h2
272 id="personal-details-heading"
273 className={css({
274 fontSize: "md",
275 fontWeight: "semibold",
276 })}
277 >
278 Personal and tax details
279 </h2>
280 <div className={fieldGrid}>
281 <FormField
282 label="Date of birth"
283 required
284 error={errors.dateOfBirth}
285 >
286 <Input
287 type="date"
288 name="dateOfBirth"
289 autoComplete="bday"
290 value={values.dateOfBirth}
291 onChange={(event) =>
292 updateField("dateOfBirth", event.target.value)
293 }
294 required
295 />
296 </FormField>
297
298 <FormField
299 label="Nationality"
300 required
301 error={errors.nationality}
302 >
303 <Select
304 name="nationality"
305 options={countryOptions}
306 placeholder="Select a country"
307 value={values.nationality}
308 onValueChange={(value) =>
309 updateField("nationality", value)
310 }
311 required
312 />
313 </FormField>
314
315 <FormField
316 label="Country of residence"
317 required
318 error={errors.countryOfResidence}
319 >
320 <Select
321 name="countryOfResidence"
322 options={countryOptions}
323 placeholder="Select a country"
324 value={values.countryOfResidence}
325 onValueChange={(value) =>
326 updateField("countryOfResidence", value)
327 }
328 required
329 />
330 </FormField>
331
332 <FormField
333 label="Tax identification number"
334 helperText="Issued by your national tax authority."
335 required
336 error={errors.taxIdentificationNumber}
337 >
338 <Input
339 name="taxIdentificationNumber"
340 autoComplete="off"
341 value={values.taxIdentificationNumber}
342 onChange={(event) =>
343 updateField(
344 "taxIdentificationNumber",
345 event.target.value,
346 )
347 }
348 required
349 />
350 </FormField>
351 </div>
352 </section>
353
354 <section
355 aria-labelledby="document-details-heading"
356 className={sectionStack}
357 >
358 <h2
359 id="document-details-heading"
360 className={css({
361 fontSize: "md",
362 fontWeight: "semibold",
363 })}
364 >
365 Identity document
366 </h2>
367 <div className={fieldGrid}>
368 <FormField
369 label="Type of identity document"
370 required
371 error={errors.documentType}
372 >
373 <Select
374 name="documentType"
375 options={data.documentTypes}
376 placeholder="Select a document type"
377 value={values.documentType}
378 onValueChange={(value) =>
379 updateField("documentType", value)
380 }
381 required
382 />
383 </FormField>
384
385 <FormField
386 label="Document number"
387 helperText="Enter it exactly as shown on your document."
388 required
389 error={errors.documentNumber}
390 >
391 <Input
392 name="documentNumber"
393 autoComplete="off"
394 autoCapitalize="characters"
395 value={values.documentNumber}
396 onChange={(event) =>
397 updateField("documentNumber", event.target.value)
398 }
399 required
400 />
401 </FormField>
402 </div>
403 </section>
404
405 <FormField
406 label="Are you a politically exposed person?"
407 helperText="This includes anyone who holds, or has held, a prominent public position."
408 required
409 error={errors.politicallyExposedPerson}
410 >
411 <Select
412 name="politicallyExposedPerson"
413 options={pepOptions}
414 placeholder="Select yes or no"
415 value={values.politicallyExposedPerson}
416 onValueChange={(value) =>
417 updateField("politicallyExposedPerson", value)
418 }
419 required
420 />
421 </FormField>
422 </div>
423 </CardBody>
424
425 <CardFooter>
426 <Button type="submit" variant="solid" size="md">
427 Submit for review
428 </Button>
429 </CardFooter>
430 </form>
431 </Card>
432 )}
433 </div>
434 </main>
435 );
436 }
437
Type '{ name: string; options: { value: string; label: string; }[]; placeholder: string; value: string; onValueChange: (value: string) => void; required: true; }' is not assignable to type 'IntrinsicAttributes & SelectProps'.
page.tsx:328:27 Type '{ name: string; options: { value: string; label: string; }[]; placeholder: string; value: string; onValueChange: (value: string) => void; required: true; }' is not assignable to type 'IntrinsicAttributes & SelectProps'. page.tsx:381:27 Type '{ name: string; options: { value: string; label: string; }[]; placeholder: string; value: string; onValueChange: (value: string) => void; required: true; }' is not assignable to type 'IntrinsicAttributes & SelectProps'. page.tsx:419:23 Type '{ name: string; options: { value: string; label: string; }[]; placeholder: string; value: string; onValueChange: (value: string) => void; required: true; }' is not assignable to type 'IntrinsicAttributes & SelectProps'. lint/jsx-a11y(prefer-tag-over-role) 1 quality typecheck/TS2769 1 quality