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 16 counted, under 3 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 docs-list, list_files, read_file, read_file 3,396 205 $0.0088 1 docs-show, docs-show, docs-show, docs-show, docs-show, docs-show, get-storybook-story-instructions 1,174 418 $0.0072 2 docs-show 6,137 4,931 $0.0625
Output cap The provider's default 4 import {
5 Button,
6 Card,
7 CardBody,
8 CardDescription,
9 CardHeader,
10 CardTitle,
11 FormField,
12 Input,
13 Select,
14 } from "@vektos/ds";
15 import { css } from "styled-system/css";
16 import data from "./fixture.json";
17
18 type FormValues = {
19 dateOfBirth: string;
20 nationality: string;
21 countryOfResidence: string;
22 taxIdentificationNumber: string;
23 documentType: string;
24 documentNumber: string;
25 politicallyExposedPerson: string;
26 };
27
28 type FieldName = keyof FormValues;
29 type FieldErrors = Partial<Record<FieldName, string>>;
30
31 const initialValues: FormValues = {
32 dateOfBirth: "",
33 nationality: "",
34 countryOfResidence: "",
35 taxIdentificationNumber: "",
36 documentType: "",
37 documentNumber: "",
38 politicallyExposedPerson: "",
39 };
40
41 const styles = {
42 page: css({
43 minHeight: "screen",
44 px: { base: "4", md: "6" },
45 py: { base: "8", md: "12" },
46 color: "fg.default",
47 }),
48 container: css({
49 width: "full",
50 maxWidth: "3xl",
51 mx: "auto",
52 }),
53 header: css({
54 mb: "8",
55 }),
56 eyebrow: css({
57 mb: "2",
58 color: "fg.muted",
59 fontSize: "sm",
60 fontWeight: "semibold",
61 letterSpacing: "wide",
62 textTransform: "uppercase",
63 }),
64 title: css({
65 fontSize: { base: "2xl", md: "3xl" },
66 fontWeight: "semibold",
67 letterSpacing: "tight",
68 lineHeight: "tight",
69 }),
70 description: css({
71 mt: "3",
72 maxWidth: "2xl",
73 color: "fg.muted",
74 fontSize: "md",
75 lineHeight: "relaxed",
76 }),
77 form: css({
78 display: "flex",
79 flexDirection: "column",
80 gap: "6",
81 }),
82 stack: css({
83 display: "flex",
84 flexDirection: "column",
85 gap: "6",
86 }),
87 grid: css({
88 display: "grid",
89 gridTemplateColumns: { base: "1fr", md: "repeat(2, minmax(0, 1fr))" },
90 gap: "5",
91 }),
92 fullWidth: css({
93 gridColumn: { base: "auto", md: "1 / -1" },
94 }),
95 actions: css({
96 display: "flex",
97 flexDirection: { base: "column", sm: "row" },
98 alignItems: { base: "stretch", sm: "center" },
99 justifyContent: "space-between",
100 gap: "4",
101 px: "1",
102 }),
103 requiredNote: css({
104 color: "fg.muted",
105 fontSize: "sm",
106 }),
107 reviewDetails: css({
108 color: "fg.muted",
109 lineHeight: "relaxed",
110 }),
111 };
112
113 export default function IdentityVerificationPage() {
114 const [values, setValues] = useState<FormValues>(initialValues);
115 const [errors, setErrors] = useState<FieldErrors>({});
116 const [submitted, setSubmitted] = useState(false);
117 const reviewHeadingRef = useRef<HTMLHeadingElement>(null);
118
119 const countryOptions = data.countries.map((country) => ({
120 label: country.name,
121 value: country.code,
122 }));
123
124 useEffect(() => {
125 if (submitted) {
126 reviewHeadingRef.current?.focus();
127 }
128 }, [submitted]);
129
130 function updateField(field: FieldName, value: string) {
131 setValues((current) => ({ ...current, [field]: value }));
132 setErrors((current) => {
133 if (!current[field]) return current;
134 const next = { ...current };
135 delete next[field];
136 return next;
137 });
138 }
139
140 function handleSubmit(event: FormEvent<HTMLFormElement>) {
141 event.preventDefault();
142
143 const nextErrors: FieldErrors = {};
144
145 if (!values.dateOfBirth) {
146 nextErrors.dateOfBirth = "Enter your date of birth.";
147 }
148 if (!values.nationality) {
149 nextErrors.nationality = "Select your nationality.";
150 }
151 if (!values.countryOfResidence) {
152 nextErrors.countryOfResidence = "Select your country of residence.";
153 }
154 if (!values.taxIdentificationNumber.trim()) {
155 nextErrors.taxIdentificationNumber = "Enter your tax identification number.";
156 }
157 if (!values.documentType) {
158 nextErrors.documentType = "Select your identity document type.";
159 }
160 if (!values.documentNumber.trim()) {
161 nextErrors.documentNumber = "Enter your document number.";
162 }
163 if (!values.politicallyExposedPerson) {
164 nextErrors.politicallyExposedPerson =
165 "Select whether you are a politically exposed person.";
166 }
167
168 setErrors(nextErrors);
169
170 if (Object.keys(nextErrors).length === 0) {
171 setSubmitted(true);
172 }
173 }
174
175 return (
176 <main className={`vektos ${styles.page}`}>
177 <div className={styles.container}>
178 <header className={styles.header}>
179 <p className={styles.eyebrow}>Account opening</p>
180 <h1 className={styles.title}>Verify your identity</h1>
181 <p className={styles.description}>
182 Complete the required fields below. We use this information to verify
183 your identity and meet our regulatory obligations.
184 </p>
185 </header>
186
187 {submitted ? (
188 <div role="status" aria-live="polite">
189 <Card>
190 <CardHeader>
191 <CardTitle asChild>
192 <h2 id="review-status-title" ref={reviewHeadingRef} tabIndex={-1}>
193 Your details are being reviewed
194 </h2>
195 </CardTitle>
196 <CardDescription>
197 Thanks, {data.customer.firstName}. We’ve received your identity
198 information.
199 </CardDescription>
200 </CardHeader>
201 <CardBody>
202 <p className={styles.reviewDetails}>
203 We’ll contact you at {data.customer.email} when the review is
204 complete or if we need anything else.
205 </p>
206 </CardBody>
207 </Card>
208 </div>
209 ) : (
210 <form className={styles.form} onSubmit={handleSubmit} noValidate>
211 <Card>
212 <CardHeader>
213 <CardTitle asChild>
214 <h2>Personal details</h2>
215 </CardTitle>
216 <CardDescription>
217 Your name and email are linked to this application and can’t be
218 edited here.
219 </CardDescription>
220 </CardHeader>
221 <CardBody>
222 <div className={styles.stack}>
223 <div className={styles.grid}>
224 <FormField label="Full name" disabled>
225 <Input
226 defaultValue={`${data.customer.firstName} ${data.customer.lastName}`}
227 />
228 </FormField>
229 <FormField label="Email address" disabled>
230 <Input type="email" defaultValue={data.customer.email} />
231 </FormField>
232 </div>
233
234 <div className={styles.grid}>
235 <FormField
236 label="Date of birth"
237 required
238 error={errors.dateOfBirth}
239 >
240 <Input
241 type="date"
242 name="dateOfBirth"
243 autoComplete="bday"
244 value={values.dateOfBirth}
245 onChange={(event) =>
246 updateField("dateOfBirth", event.target.value)
247 }
248 />
249 </FormField>
250
251 <FormField
252 label="Nationality"
253 required
254 error={errors.nationality}
255 >
256 <Select
257 name="nationality"
258 options={countryOptions}
259 placeholder="Select your nationality"
260 value={values.nationality}
261 onValueChange={(value) => updateField("nationality", value)}
262 />
263 </FormField>
264
265 <div className={styles.fullWidth}>
266 <FormField
267 label="Country of residence"
268 required
269 error={errors.countryOfResidence}
270 >
271 <Select
272 name="countryOfResidence"
273 options={countryOptions}
274 placeholder="Select your country of residence"
275 value={values.countryOfResidence}
276 onValueChange={(value) =>
277 updateField("countryOfResidence", value)
278 }
279 />
280 </FormField>
281 </div>
282 </div>
283 </div>
284 </CardBody>
285 </Card>
286
287 <Card>
288 <CardHeader>
289 <CardTitle asChild>
290 <h2>Tax and identity document</h2>
291 </CardTitle>
292 <CardDescription>
293 Enter these details exactly as they appear on your official
294 records.
295 </CardDescription>
296 </CardHeader>
297 <CardBody>
298 <div className={styles.grid}>
299 <div className={styles.fullWidth}>
300 <FormField
301 label="Tax identification number"
302 helperText="Enter the number issued by your tax authority."
303 required
304 error={errors.taxIdentificationNumber}
305 >
306 <Input
307 name="taxIdentificationNumber"
308 autoComplete="off"
309 autoCapitalize="characters"
310 spellCheck={false}
311 placeholder="Enter your tax identification number"
312 value={values.taxIdentificationNumber}
313 onChange={(event) =>
314 updateField("taxIdentificationNumber", event.target.value)
315 }
316 />
317 </FormField>
318 </div>
319
320 <FormField
321 label="Type of identity document"
322 required
323 error={errors.documentType}
324 >
325 <Select
326 name="documentType"
327 options={data.documentTypes}
328 placeholder="Select a document type"
329 value={values.documentType}
330 onValueChange={(value) => updateField("documentType", value)}
331 />
332 </FormField>
333
334 <FormField
335 label="Document number"
336 required
337 error={errors.documentNumber}
338 >
339 <Input
340 name="documentNumber"
341 autoComplete="off"
342 autoCapitalize="characters"
343 spellCheck={false}
344 placeholder="Enter your document number"
345 value={values.documentNumber}
346 onChange={(event) =>
347 updateField("documentNumber", event.target.value)
348 }
349 />
350 </FormField>
351 </div>
352 </CardBody>
353 </Card>
354
355 <Card>
356 <CardHeader>
357 <CardTitle asChild>
358 <h2>Regulatory declaration</h2>
359 </CardTitle>
360 <CardDescription>
361 Tell us whether you hold, or have held, a prominent public
362 position.
363 </CardDescription>
364 </CardHeader>
365 <CardBody>
366 <FormField
367 label="Are you a politically exposed person?"
368 helperText="Select yes if this applies to you, or no if it does not."
369 required
370 error={errors.politicallyExposedPerson}
371 >
372 <Select
373 name="politicallyExposedPerson"
374 options={[
375 { label: "Yes", value: "yes" },
376 { label: "No", value: "no" },
377 ]}
378 placeholder="Select yes or no"
379 value={values.politicallyExposedPerson}
380 onValueChange={(value) =>
381 updateField("politicallyExposedPerson", value)
382 }
383 />
384 </FormField>
385 </CardBody>
386 </Card>
387
388 <div className={styles.actions}>
389 <p className={styles.requiredNote}>All fields are required.</p>
390 <Button type="submit" size="md">
391 Submit for review
392 </Button>
393 </div>
394 </form>
395 )}
396 </div>
397 </main>
398 );
399 }
400
No overload matches this call.
lint/jsx-a11y(prefer-tag-over-role) 1 quality 3 docs-show-story, docs-show-story, docs-show-story 5,999 964 $0.0238
4 write_file 1,375 4,556 $0.0516
5 stories-changed 4,626 58 $0.0134
6 stories-find-by-component 126 147 $0.0062