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 3 counted, under 4 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, read_file 1,157 66 $0.0004 1 list_components, list_tokens 1,731 61 $0.0006 2 get_component, get_component 1,468 70 $0.0005 3
e02ef3974528
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 const countryOptions = data.countries.map((country) => ({
21 value: country.code,
22 label: country.name,
23 }));
24
25 const documentTypeOptions = data.documentTypes.map((documentType) => ({
26 value: documentType.value,
27 label: documentType.label,
28 }));
29
30 const pepOptions = [
31 { value: "yes", label: "Yes" },
32 { value: "no", label: "No" },
33 ];
34
35 type FieldName =
36 | "dateOfBirth"
37 | "nationality"
38 | "countryOfResidence"
39 | "taxId"
40 | "documentType"
41 | "documentNumber"
42 | "pep";
43
44 type Values = Record<FieldName, string>;
45
46 type Errors = Partial<Record<FieldName, string>>;
47
48 const emptyValues: Values = {
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 your date of birth.",
60 nationality: "Choose your nationality.",
61 countryOfResidence: "Choose your country of residence.",
62 taxId: "Enter your tax identification number.",
63 documentType: "Choose the type of your identity document.",
64 documentNumber: "Enter the number of your identity document.",
65 pep: "Select yes or no.",
66 };
67
68 const fullName = `${data.customer.firstName} ${data.customer.lastName}`;
69
70 const fieldStack = css({ display: "grid", gap: "4" });
71 const reviewStack = css({ display: "grid", gap: "3", justifyItems: "start" });
72
73 export default function Page() {
74 const [values, setValues] = useState<Values>(emptyValues);
75 const [errors, setErrors] = useState<Errors>({});
76 const [submitted, setSubmitted] = useState(false);
77
78 function update(name: FieldName, value: string) {
79 setValues((previous) => ({ ...previous, [name]: value }));
80 setErrors((previous) => {
81 if (previous[name] === undefined || value.trim() !== "") {
82 return previous;
83 }
84 const next = { ...previous };
85 delete next[name];
86 return next;
87 });
88 }
89
90 function handleSubmit(event: FormEvent<HTMLFormElement>) {
91 event.preventDefault();
92
93 const nextErrors: Errors = {};
94 (Object.keys(values) as FieldName[]).forEach((name) => {
95 if (values[name].trim() === "") {
96 nextErrors[name] = requiredMessages[name];
97 }
98 });
99
100 setErrors(nextErrors);
101
102 if (Object.keys(nextErrors).length === 0) {
103 setSubmitted(true);
104 }
105 }
106
107 const hasErrors = Object.keys(errors).length > 0;
108
109 return (
110 <main
111 className={`vektos ${css({
112 minHeight: "100vh",
113 bg: "bg.canvas",
114 px: "4",
115 py: "8",
116 })}`}
117 >
118 <div className={css({ maxWidth: "lg", width: "full", marginInline: "auto" })}>
119 {submitted ? (
120 <Card>
121 <CardHeader>
122 <CardTitle asChild>
123 <h1>Identity verification</h1>
124 </CardTitle>
125 <CardDescription>Step 2 of 3 · Account opening</CardDescription>
126 </CardHeader>
127 <CardBody>
128 <div role="status" className={reviewStack}>
129 <Badge tone="warning">Under review</Badge>
130 <p
131 className={css({
132 fontSize: "lg",
133 fontWeight: "semibold",
134 color: "fg.default",
135 })}
136 >
137 Thanks, we are reviewing your details.
138 </p>
139 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
140 We are checking the identity details of {fullName} against the identity
141 document provided. You will receive an email at {data.customer.email} as
142 soon as the review is complete. Nothing else is needed from you right now.
143 </p>
144 </div>
145 </CardBody>
146 </Card>
147 ) : (
148 <form noValidate aria-label="Identity verification" onSubmit={handleSubmit}>
149 <Card>
150 <CardHeader>
151 <CardTitle asChild>
152 <h1>Identity verification</h1>
153 </CardTitle>
154 <CardDescription>
155 Step 2 of 3 · Account opening. All fields are required.
156 </CardDescription>
157 </CardHeader>
158 <CardBody>
159 <div className={css({ display: "grid", gap: "6" })}>
160 <div
161 className={css({
162 bg: "bg.subtle",
163 rounded: "md",
164 px: "4",
165 py: "4",
166 display: "grid",
167 gap: "3",
168 })}
169 >
170 <dl
171 className={css({
172 display: "grid",
173 gap: "3",
174 margin: "0",
175 })}
176 >
177 <div>
178 <dt
179 className={css({
180 fontSize: "xs",
181 color: "fg.muted",
182 })}
183 >
184 Full name
185 </dt>
186 <dd
187 className={css({
188 margin: "0",
189 fontSize: "sm",
190 color: "fg.default",
191 })}
192 >
193 {fullName}
194 </dd>
195 </div>
196 <div>
197 <dt
198 className={css({
199 fontSize: "xs",
200 color: "fg.muted",
201 })}
202 >
203 Email address
204 </dt>
205 <dd
206 className={css({
207 margin: "0",
208 fontSize: "sm",
209 color: "fg.default",
210 })}
211 >
212 {data.customer.email}
213 </dd>
214 </div>
215 </dl>
216 <p className={css({ fontSize: "xs", color: "fg.muted" })}>
217 These details come from your application and cannot be changed here.
218 </p>
219 </div>
220
221 {hasErrors ? (
222 <p
223 role="alert"
224 className={css({
225 bg: "danger.subtle",
226 color: "danger.text",
227 rounded: "md",
228 px: "4",
229 py: "3",
230 fontSize: "sm",
231 })}
232 >
233 Some details are missing. Fill in the highlighted fields to continue.
234 </p>
235 ) : null}
236
237 <div className={fieldStack}>
238 <FormField
239 label="Date of birth"
240 helperText="As printed on your identity document."
241 error={errors.dateOfBirth}
242 >
243 <Input type="date" required value={values.dateOfBirth} onChange={(event) => update("dateOfBirth", event.target.value)} />
244 </FormField>
245
246 <FormField
247 label="Nationality"
248 error={errors.nationality}
249 >
250 <Select
251 aria-required="true"
252 options={countryOptions}
253 placeholder="Choose a nationality"
254 value={values.nationality}
255 onValueChange={(value) => update("nationality", value)}
256 />
257 </FormField>
258
259 <FormField
260 label="Country of residence"
261 helperText="Where you live for tax purposes."
262 error={errors.countryOfResidence}
263 >
264 <Select
265 aria-required="true"
266 options={countryOptions}
267 placeholder="Choose a country"
268 value={values.countryOfResidence}
269 onValueChange={(value) => update("countryOfResidence", value)}
270 />
271 </FormField>
272
273 <FormField
274 label="Tax identification number"
275 helperText="Your national tax number, without spaces or dots."
276 error={errors.taxId}
277 >
278 <Input
279 required
280 autoComplete="off"
281 value={values.taxId}
282 onChange={(event) => update("taxId", event.target.value)}
283 />
284 </FormField>
285
286 <FormField
287 label="Type of identity document"
288 error={errors.documentType}
289 >
290 <Select
291 aria-required="true"
292 options={documentTypeOptions}
293 placeholder="Choose a document type"
294 value={values.documentType}
295 onValueChange={(value) => update("documentType", value)}
296 />
297 </FormField>
298
299 <FormField
300 label="Document number"
301 helperText="Exactly as shown on the document, including letters."
302 error={errors.documentNumber}
303 >
304 <Input
305 required
306 autoComplete="off"
307 value={values.documentNumber}
308 onChange={(event) => update("documentNumber", event.target.value)}
309 />
310 </FormField>
311
312 <FormField
313 label="Politically exposed person"
314 helperText="A person who holds, or has held, a prominent public position."
315 error={errors.pep}
316 >
317 <Select
318 aria-required="true"
319 options={pepOptions}
320 placeholder="Choose yes or no"
321 value={values.pep}
322 onValueChange={(value) => update("pep", value)}
323 />
324 </FormField>
325 </div>
326 </div>
327 </CardBody>
328 <CardFooter>
329 <Button type="submit">Submit for review</Button>
330 </CardFooter>
331 </Card>
332 </form>
333 )}
334 </div>
335 </main>
336 );
337 }
338
typecheck/TS2769 0 quality get_component, get_component
4 get_component, list_tokens 651 70 $0.0003
5 list_tokens, list_files 5,815 78 $0.0018
6 list_tokens, list_tokens 1,382 88 $0.0006
7 get_component 385 3,589 $0.0045
8 write_file 11,324 2,712 $0.0067