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 1 counted, under 1 rule. “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, read_file, list_components, list_files 1,773 154 $0.0003 1 get_component, get_component, get_component, get_component, get_component 4,596 229 $0.0006 2 list_tokens 7,987 697 $0.0011
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 FieldKey =
20 | "dateOfBirth"
21 | "nationality"
22 | "countryOfResidence"
23 | "taxId"
24 | "documentType"
25 | "documentNumber"
26 | "pep";
27
28 type FormValues = Record<FieldKey, string>;
29
30 const emptyValues: FormValues = {
31 dateOfBirth: "",
32 nationality: "",
33 countryOfResidence: "",
34 taxId: "",
35 documentType: "",
36 documentNumber: "",
37 pep: "",
38 };
39
40 const countryOptions = data.countries.map((country) => ({
41 label: country.name,
42 value: country.code,
43 }));
44
45 const documentTypeOptions = data.documentTypes.map((type) => ({
46 label: type.label,
47 value: type.value,
48 }));
49
50 const pepOptions = [
51 { label: "Yes", value: "yes" },
52 { label: "No", value: "no" },
53 ];
54
55 const errorMessages: Record<FieldKey, string> = {
56 dateOfBirth: "Enter your date of birth.",
57 nationality: "Choose your nationality.",
58 countryOfResidence: "Choose your country of residence.",
59 taxId: "Enter your tax identification number.",
60 documentType: "Choose the type of identity document.",
61 documentNumber: "Enter your document number.",
62 pep: "Tell us whether you are a politically exposed person.",
63 };
64
65 const fieldOrder: FieldKey[] = [
66 "dateOfBirth",
67 "nationality",
68 "countryOfResidence",
69 "taxId",
70 "documentType",
71 "documentNumber",
72 "pep",
73 ];
74
75 const pageClass = css({
76 minHeight: "full",
77 bg: "bg.canvas",
78 color: "fg.default",
79 display: "flex",
80 alignItems: "flex-start",
81 justifyContent: "center",
82 p: "6",
83 });
84
85 const cardClass = css({ width: "full", maxWidth: "lg", shadow: "sm" });
86
87 export default function IdentityVerificationPage() {
88 const [values, setValues] = useState<FormValues>(emptyValues);
89 const [errors, setErrors] = useState<Partial<Record<FieldKey, string>>>({});
90 const [submitted, setSubmitted] = useState(false);
91
92 const setValue = (key: FieldKey, value: string) => {
93 setValues((prev) => ({ ...prev, [key]: value }));
94 setErrors((prev) => {
95 if (!prev[key]) return prev;
96 const next = { ...prev };
97 delete next[key];
98 return next;
99 });
100 };
101
102 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
103 event.preventDefault();
104
105 const nextErrors: Partial<Record<FieldKey, string>> = {};
106 for (const key of fieldOrder) {
107 if (values[key].trim() === "") {
108 nextErrors[key] = errorMessages[key];
109 }
110 }
111
112 if (Object.keys(nextErrors).length > 0) {
113 setErrors(nextErrors);
114 return;
115 }
116
117 setErrors({});
118 setSubmitted(true);
119 };
120
121 if (submitted) {
122 return (
123 <main className={pageClass}>
124 <Card className={cardClass}>
125 <CardHeader>
126 <CardTitle>Identity verification</CardTitle>
127 <CardDescription>Your details are being reviewed.</CardDescription>
128 </CardHeader>
129 <CardBody>
130 <p className={css({ color: "fg.muted", fontSize: "sm" })}>
131 We will let you know as soon as the review is complete. You do not need to do
132 anything else for now.
133 </p>
134 </CardBody>
135 </Card>
136 </main>
137 );
138 }
139
140 const { firstName, lastName, email } = data.customer;
141
142 return (
143 <main className={pageClass}>
144 <Card className={cardClass}>
145 <CardHeader>
146 <CardTitle>Identity verification</CardTitle>
147 <CardDescription>
148 Confirm your identity to finish opening your account.
149 </CardDescription>
150 </CardHeader>
151
152 <form onSubmit={handleSubmit} noValidate>
153 <CardBody>
154 <dl
155 className={css({
156 display: "grid",
157 gridTemplateColumns: "auto 1fr",
158 gap: "2",
159 fontSize: "sm",
160 mb: "6",
161 })}
162 >
163 <dt className={css({ color: "fg.muted" })}>Full name</dt>
164 <dd className={css({ margin: "0" })}>
165 {firstName} {lastName}
166 </dd>
167 <dt className={css({ color: "fg.muted" })}>Email</dt>
168 <dd className={css({ margin: "0" })}>{email}</dd>
169 </dl>
170
171 <div className={css({ display: "flex", flexDirection: "column", gap: "4" })}>
172 <FormField label="Date of birth" error={errors.dateOfBirth}>
173 <Input
174 type="date"
175 name="dateOfBirth"
176 required
177 value={values.dateOfBirth}
178 onChange={(event) => setValue("dateOfBirth", event.target.value)}
179 />
180 </FormField>
181
182 <FormField label="Nationality" error={errors.nationality}>
183 <Select
184 name="nationality"
185 placeholder="Choose a country"
186 options={countryOptions}
187 value={values.nationality}
188 onValueChange={(value) => setValue("nationality", value)}
189 />
190 </FormField>
191
192 <FormField label="Country of residence" error={errors.countryOfResidence}>
193 <Select
194 name="countryOfResidence"
195 placeholder="Choose a country"
196 options={countryOptions}
197 value={values.countryOfResidence}
198 onValueChange={(value) => setValue("countryOfResidence", value)}
199 />
200 </FormField>
201
202 <FormField label="Tax identification number" error={errors.taxId}>
203 <Input
204 name="taxId"
205 required
206 value={values.taxId}
207 onChange={(event) => setValue("taxId", event.target.value)}
208 />
209 </FormField>
210
211 <FormField label="Type of identity document" error={errors.documentType}>
212 <Select
213 name="documentType"
214 placeholder="Choose a document type"
215 options={documentTypeOptions}
216 value={values.documentType}
217 onValueChange={(value) => setValue("documentType", value)}
218 />
219 </FormField>
220
221 <FormField label="Document number" error={errors.documentNumber}>
222 <Input
223 name="documentNumber"
224 required
225 value={values.documentNumber}
226 onChange={(event) => setValue("documentNumber", event.target.value)}
227 />
228 </FormField>
229
230 <FormField
231 label="Are you a politically exposed person?"
232 error={errors.pep}
233 >
234 <Select
235 name="pep"
236 placeholder="Choose an answer"
237 options={pepOptions}
238 value={values.pep}
239 onValueChange={(value) => setValue("pep", value)}
240 />
241 </FormField>
242 </div>
243 </CardBody>
244
245 <CardFooter>
246 <Button type="submit">Submit for verification</Button>
247 </CardFooter>
248 </form>
249 </Card>
250 </main>
251 );
252 }
253
3 write_file, check_code 10,405 3,064 $0.0026
4 check_code 13,545 3,061 $0.0029
5 write_file 16,671 2,854 $0.0031