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 10 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 1,092 66 $0.0028 1 list_files, list_components, list_tokens, read_file, read_file 2,087 135 $0.0056 2 get_component, get_component, get_component, get_component, get_component, get_component 2,319 317 $0.0083
Output cap The provider's default 4 import {
5 Badge,
6 Button,
7 Card,
8 CardBody,
9 CardDescription,
10 CardFooter,
11 CardHeader,
12 CardTitle,
13 FormField,
14 Input,
15 Select,
16 } from "@vektos/ds";
17 import { css } from "styled-system/css";
18 import data from "./fixture.json";
19
20 type FormValues = {
21 dateOfBirth: string;
22 nationality: string;
23 countryOfResidence: string;
24 taxIdentificationNumber: string;
25 documentType: string;
26 documentNumber: string;
27 politicallyExposedPerson: string;
28 };
29
30 type FieldName = keyof FormValues;
31 type FormErrors = Partial<Record<FieldName, string>>;
32
33 const initialValues: FormValues = {
34 dateOfBirth: "",
35 nationality: "",
36 countryOfResidence: "",
37 taxIdentificationNumber: "",
38 documentType: "",
39 documentNumber: "",
40 politicallyExposedPerson: "",
41 };
42
43 const errorMessages: Record<FieldName, string> = {
44 dateOfBirth: "Enter your date of birth.",
45 nationality: "Select your nationality.",
46 countryOfResidence: "Select your country of residence.",
47 taxIdentificationNumber: "Enter your tax identification number.",
48 documentType: "Select your identity document type.",
49 documentNumber: "Enter your identity document number.",
50 politicallyExposedPerson: "Select yes or no.",
51 };
52
53 const countryOptions = data.countries.map((country) => ({
54 value: country.code,
55 label: country.name,
56 }));
57
58 const politicallyExposedOptions = [
59 { value: "yes", label: "Yes" },
60 { value: "no", label: "No" },
61 ];
62
63 const fieldGrid = css({
64 display: "grid",
65 gridTemplateColumns: {
66 base: "1fr",
67 sm: "repeat(2, minmax(0, 1fr))",
68 },
69 gap: "4",
70 });
71
72 const sectionStack = css({
73 display: "flex",
74 flexDirection: "column",
75 gap: "4",
76 });
77
78 const sectionHeading = css({
79 color: "fg.default",
80 fontSize: "md",
81 fontWeight: "semibold",
82 lineHeight: "tight",
83 });
84
85 const supportingText = css({
86 color: "fg.muted",
87 fontSize: "sm",
88 lineHeight: "normal",
89 });
90
91 export default function IdentityVerificationPage() {
92 const [values, setValues] = useState<FormValues>(initialValues);
93 const [errors, setErrors] = useState<FormErrors>({});
94 const [submitted, setSubmitted] = useState(false);
95
96 const fullName = `${data.customer.firstName} ${data.customer.lastName}`;
97
98 function updateField(field: FieldName, value: string) {
99 setValues((current) => ({ ...current, [field]: value }));
100 setErrors((current) => {
101 if (!current[field]) return current;
102 const next = { ...current };
103 delete next[field];
104 return next;
105 });
106 }
107
108 function handleSubmit(event: FormEvent<HTMLFormElement>) {
109 event.preventDefault();
110
111 const nextErrors: FormErrors = {};
112 for (const field of Object.keys(values) as FieldName[]) {
113 if (!values[field].trim()) {
114 nextErrors[field] = errorMessages[field];
115 }
116 }
117
118 setErrors(nextErrors);
119 if (Object.keys(nextErrors).length === 0) {
120 setSubmitted(true);
121 }
122 }
123
124 return (
125 <div
126 className={`vektos ${css({
127 minHeight: "full",
128 bg: "bg.canvas",
129 color: "fg.default",
130 px: "4",
131 py: "8",
132 })}`}
133 >
134 <main className={css({ width: "full", maxWidth: "lg", mx: "auto" })}>
135 <p
136 className={css({
137 mb: "4",
138 color: "accent.default",
139 fontSize: "sm",
140 fontWeight: "semibold",
141 })}
142 >
143 Account opening
144 </p>
145
146 <Card>
147 <CardHeader>
148 <CardTitle asChild>
149 <h1>Identity verification</h1>
150 </CardTitle>
151 <CardDescription>
152 Provide your personal and identity document details. All identity
153 fields are required.
154 </CardDescription>
155 </CardHeader>
156
157 {submitted ? (
158 <CardBody>
159 <div
160 role="status"
161 aria-live="polite"
162 className={css({
163 display: "flex",
164 flexDirection: "column",
165 alignItems: "flex-start",
166 gap: "4",
167 py: "6",
168 })}
169 >
170 <Badge tone="warning">Under review</Badge>
171 <div className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
172 <h2 className={sectionHeading}>Your details are being reviewed</h2>
173 <p className={supportingText}>
174 Thanks, {data.customer.firstName}. We’ve received your information
175 and will let you know when the review is complete.
176 </p>
177 </div>
178 </div>
179 </CardBody>
180 ) : (
181 <form noValidate onSubmit={handleSubmit}>
182 <CardBody
183 className={css({ display: "flex", flexDirection: "column", gap: "6" })}
184 >
185 <section className={sectionStack} aria-labelledby="account-details-heading">
186 <div className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
187 <h2 id="account-details-heading" className={sectionHeading}>
188 Account details
189 </h2>
190 <p className={supportingText}>
191 Your name and email come from your registration and cannot be
192 edited here.
193 </p>
194 </div>
195
196 <div className={fieldGrid}>
197 <FormField label="Full name">
198 <Input
199 name="fullName"
200 autoComplete="name"
201 value={fullName}
202 readOnly
203 />
204 </FormField>
205 <FormField label="Email address">
206 <Input
207 type="email"
208 name="email"
209 autoComplete="email"
210 value={data.customer.email}
211 readOnly
212 />
213 </FormField>
214 </div>
215 </section>
216
217 <section
218 className={`${sectionStack} ${css({
219 borderTopWidth: "thin",
220 borderTopStyle: "solid",
221 borderTopColor: "border.default",
222 pt: "6",
223 })}`}
224 aria-labelledby="identity-details-heading"
225 >
226 <h2 id="identity-details-heading" className={sectionHeading}>
227 Identity details
228 </h2>
229
230 <div className={fieldGrid}>
231 <FormField label="Date of birth" error={errors.dateOfBirth}>
232 <Input
233 type="date"
234 name="dateOfBirth"
235 autoComplete="bday"
236 value={values.dateOfBirth}
237 onChange={(event) => updateField("dateOfBirth", event.target.value)}
238 required
239 />
240 </FormField>
241
242 <FormField label="Nationality" error={errors.nationality}>
243 <Select
244 name="nationality"
245 options={countryOptions}
246 placeholder="Select your nationality"
247 value={values.nationality}
248 onValueChange={(value) => updateField("nationality", value)}
249 required
250 />
251 </FormField>
252
253 <FormField
254 label="Country of residence"
255 error={errors.countryOfResidence}
256 >
257 <Select
258 name="countryOfResidence"
259 options={countryOptions}
260 placeholder="Select your country of residence"
261 value={values.countryOfResidence}
262 onValueChange={(value) =>
263 updateField("countryOfResidence", value)
264 }
265 required
266 />
267 </FormField>
268
269 <FormField
270 label="Tax identification number"
271 helperText="Enter the number issued by your tax authority."
272 error={errors.taxIdentificationNumber}
273 >
274 <Input
275 name="taxIdentificationNumber"
276 autoComplete="off"
277 spellCheck={false}
278 placeholder="Enter your tax identification number"
279 value={values.taxIdentificationNumber}
280 onChange={(event) =>
281 updateField("taxIdentificationNumber", event.target.value)
282 }
283 required
284 />
285 </FormField>
286
287 <FormField label="Identity document type" error={errors.documentType}>
288 <Select
289 name="documentType"
290 options={data.documentTypes}
291 placeholder="Select a document type"
292 value={values.documentType}
293 onValueChange={(value) => updateField("documentType", value)}
294 required
295 />
296 </FormField>
297
298 <FormField label="Document number" error={errors.documentNumber}>
299 <Input
300 name="documentNumber"
301 autoComplete="off"
302 spellCheck={false}
303 placeholder="Enter your document number"
304 value={values.documentNumber}
305 onChange={(event) =>
306 updateField("documentNumber", event.target.value)
307 }
308 required
309 />
310 </FormField>
311 </div>
312
313 <FormField
314 label="Are you a politically exposed person?"
315 helperText="A politically exposed person holds, or has held, a prominent public position."
316 error={errors.politicallyExposedPerson}
317 >
318 <Select
319 name="politicallyExposedPerson"
320 options={politicallyExposedOptions}
321 placeholder="Select yes or no"
322 value={values.politicallyExposedPerson}
323 onValueChange={(value) =>
324 updateField("politicallyExposedPerson", value)
325 }
326 required
327 />
328 </FormField>
329 </section>
330 </CardBody>
331
332 <CardFooter>
333 <Button type="submit">Submit details</Button>
334 </CardFooter>
335 </form>
336 )}
337 </Card>
338 </main>
339 </div>
340 );
341 }
342
lint/jsx-a11y(prefer-tag-over-role) 1 quality typecheck/TS2769 1 quality 3 write_file 3,175 7,608 $0.0834
4 check_code 7,686 2,212 $0.0391