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 6 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 get_guidelines, list_files 1,291 50 $0.0004 1 read_file, list_components 1,346 69 $0.0005 2 get_component, get_component 833 70 $0.0004 3
e02ef3974528
Output cap The provider's default 4 import type { FormEvent } from "react";
5 import {
6 Badge,
7 Button,
8 Card,
9 CardBody,
10 CardDescription,
11 CardFooter,
12 CardHeader,
13 CardTitle,
14 FormField,
15 Input,
16 Select,
17 } from "@vektos/ds";
18 import { css } from "styled-system/css";
19 import data from "./fixture.json";
20
21 const countryOptions = data.countries.map((country) => ({
22 label: country.name,
23 value: country.code,
24 }));
25
26 const documentTypeOptions = data.documentTypes.map((documentType) => ({
27 label: documentType.label,
28 value: documentType.value,
29 }));
30
31 const pepOptions = [
32 { label: "Yes, the customer is a politically exposed person", value: "yes" },
33 { label: "No, the customer is not a politically exposed person", value: "no" },
34 ];
35
36 type FieldName =
37 | "dateOfBirth"
38 | "nationality"
39 | "countryOfResidence"
40 | "taxId"
41 | "documentType"
42 | "documentNumber"
43 | "pep";
44
45 type FormValues = Record<FieldName, string>;
46 type FormErrors = Partial<Record<FieldName, string>>;
47
48 const initialValues: FormValues = {
49 dateOfBirth: "",
50 nationality: "",
51 countryOfResidence: "",
52 taxId: "",
53 documentType: "",
54 documentNumber: "",
55 pep: "",
56 };
57
58 const requiredMessages: Record<FieldName, string> = {
59 dateOfBirth: "Enter the customer's date of birth.",
60 nationality: "Select a nationality.",
61 countryOfResidence: "Select a country of residence.",
62 taxId: "Enter a tax identification number.",
63 documentType: "Select the type of identity document.",
64 documentNumber: "Enter the document number.",
65 pep: "Select whether the customer is a politically exposed person.",
66 };
67
68 const fieldNames = Object.keys(requiredMessages) as FieldName[];
69
70 const fullName = `${data.customer.firstName} ${data.customer.lastName}`;
71
72 export default function Page() {
73 const [values, setValues] = useState<FormValues>(initialValues);
74 const [errors, setErrors] = useState<FormErrors>({});
75 const [submitted, setSubmitted] = useState(false);
76
77 const setField = (field: FieldName) => (value: string) => {
78 setValues((current) => ({ ...current, [field]: value }));
79 setErrors((current) => ({ ...current, [field]: undefined }));
80 };
81
82 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
83 event.preventDefault();
84
85 const nextErrors: FormErrors = {};
86 for (const field of fieldNames) {
87 if (values[field].trim() === "") {
88 nextErrors[field] = requiredMessages[field];
89 }
90 }
91
92 setErrors(nextErrors);
93
94 if (Object.keys(nextErrors).length === 0) {
95 setSubmitted(true);
96 }
97 };
98
99 return (
100 <div
101 className={`vektos ${css({
102 minHeight: "full",
103 bg: "bg.canvas",
104 color: "fg.default",
105 px: "4",
106 py: "8",
107 })}`}
108 >
109 <div
110 className={css({
111 maxWidth: "lg",
112 marginInline: "auto",
113 display: "flex",
114 flexDirection: "column",
115 gap: "6",
116 })}
117 >
118 <div className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
119 <h1 className={css({ fontSize: "lg", fontWeight: "semibold" })}>Open your account</h1>
120 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
121 We need a few identity details before we can finish setting up the account.
122 </p>
123 </div>
124
125 <Card>
126 <CardHeader>
127 <CardTitle>Your details</CardTitle>
128 <CardDescription>These come from your application and cannot be changed here.</CardDescription>
129 </CardHeader>
130 <CardBody>
131 <div className={css({ display: "flex", flexDirection: "column", gap: "4" })}>
132 <FormField label="Full name">
133 <Input defaultValue={fullName} disabled />
134 </FormField>
135 <FormField label="Email address">
136 <Input defaultValue={data.customer.email} disabled />
137 </FormField>
138 </div>
139 </CardBody>
140 </Card>
141
142 {submitted ? (
143 <Card>
144 <CardHeader>
145 <CardTitle>Details under review</CardTitle>
146 <CardDescription>No further action is needed from you right now.</CardDescription>
147 </CardHeader>
148 <CardBody>
149 <div
150 role="status"
151 className={css({ display: "flex", flexDirection: "column", gap: "3", alignItems: "flex-start" })}
152 >
153 <Badge tone="warning">Under review</Badge>
154 <p className={css({ color: "fg.muted" })}>
155 The identity details for {fullName} are being reviewed. We will email{" "}
156 {data.customer.email} as soon as the check is complete.
157 </p>
158 </div>
159 </CardBody>
160 </Card>
161 ) : (
162 <Card>
163 <CardHeader>
164 <CardTitle>Identity verification</CardTitle>
165 <CardDescription>All fields are required.</CardDescription>
166 </CardHeader>
167 <form noValidate onSubmit={handleSubmit}>
168 <CardBody>
169 <div className={css({ display: "flex", flexDirection: "column", gap: "4" })}>
170 <FormField label="Date of birth" error={errors.dateOfBirth}>
171 <Input
172 type="date"
173 value={values.dateOfBirth}
174 onChange={(event) => setField("dateOfBirth")(event.target.value)}
175 />
176 </FormField>
177
178 <FormField label="Nationality" error={errors.nationality}>
179 <Select
180 options={countryOptions}
181 placeholder="Select a nationality"
182 value={values.nationality === "" ? undefined : values.nationality}
183 onValueChange={setField("nationality")}
184 />
185 </FormField>
186
187 <FormField label="Country of residence" error={errors.countryOfResidence}>
188 <Select
189 options={countryOptions}
190 placeholder="Select a country of residence"
191 value={values.countryOfResidence === "" ? undefined : values.countryOfResidence}
192 onValueChange={setField("countryOfResidence")}
193 />
194 </FormField>
195
196 <FormField
197 label="Tax identification number"
198 helperText="The tax number issued in the country of residence."
199 error={errors.taxId}
200 >
201 <Input
202 value={values.taxId}
203 onChange={(event) => setField("taxId")(event.target.value)}
204 autoComplete="off"
205 />
206 </FormField>
207
208 <FormField label="Type of identity document" error={errors.documentType}>
209 <Select
210 options={documentTypeOptions}
211 placeholder="Select a document type"
212 value={values.documentType === "" ? undefined : values.documentType}
213 onValueChange={setField("documentType")}
214 />
215 </FormField>
216
217 <FormField label="Document number" error={errors.documentNumber}>
218 <Input
219 value={values.documentNumber}
220 onChange={(event) => setField("documentNumber")(event.target.value)}
221 autoComplete="off"
222 />
223 </FormField>
224
225 <FormField label="Politically exposed person" error={errors.pep}>
226 <Select
227 options={pepOptions}
228 placeholder="Select yes or no"
229 value={values.pep === "" ? undefined : values.pep}
230 onValueChange={setField("pep")}
231 />
232 </FormField>
233 </div>
234 </CardBody>
235 <CardFooter>
236 <Button type="submit">Submit for review</Button>
237 </CardFooter>
238 </form>
239 </Card>
240 )}
241 </div>
242 </div>
243 );
244 }
245
lint/jsx-a11y(prefer-tag-over-role) 1 quality get_component, get_component
4 list_tokens, list_tokens 2,383 133 $0.0009
5 list_tokens, list_tokens 1,132 72 $0.0005
6 list_tokens, get_component 7,032 100 $0.0022
7 list_tokens 740 3,910 $0.0050
8 write_file 11,630 1,857 $0.0057
9 check_code 6,852 1,851 $0.0043