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 None. The run followed every rule that was checked.
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_components, list_files, list_tokens 801 153 $0.0032 1 read_file, get_component, get_component, get_component, get_component, get_component, get_component, list_tokens, list_tokens, list_tokens 2,628 331 $0.0088 2 list_tokens 3,800 404 $0.0124
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 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 fieldNames: FieldName[] = [
44 "dateOfBirth",
45 "nationality",
46 "countryOfResidence",
47 "taxIdentificationNumber",
48 "documentType",
49 "documentNumber",
50 "politicallyExposedPerson",
51 ];
52
53 const errorMessages: Record<FieldName, string> = {
54 dateOfBirth: "Enter your date of birth.",
55 nationality: "Select your nationality.",
56 countryOfResidence: "Select your country of residence.",
57 taxIdentificationNumber: "Enter your tax identification number.",
58 documentType: "Select an identity document type.",
59 documentNumber: "Enter your document number.",
60 politicallyExposedPerson: "Select yes or no.",
61 };
62
63 const countryOptions = data.countries.map((country) => ({
64 value: country.code,
65 label: country.name,
66 }));
67
68 const politicallyExposedOptions = [
69 { value: "yes", label: "Yes" },
70 { value: "no", label: "No" },
71 ];
72
73 export default function IdentityVerificationPage() {
74 const [values, setValues] = useState<FormValues>(initialValues);
75 const [errors, setErrors] = useState<FormErrors>({});
76 const [submitted, setSubmitted] = useState(false);
77
78 const fullName = `${data.customer.firstName} ${data.customer.lastName}`;
79
80 function updateField(field: FieldName, value: string) {
81 setValues((current) => ({ ...current, [field]: value }));
82 setErrors((current) => {
83 if (!current[field]) return current;
84 const next = { ...current };
85 delete next[field];
86 return next;
87 });
88 }
89
90 function handleSubmit(event: FormEvent<HTMLFormElement>) {
91 event.preventDefault();
92
93 const nextErrors: FormErrors = {};
94 fieldNames.forEach((field) => {
95 if (!values[field].trim()) {
96 nextErrors[field] = errorMessages[field];
97 }
98 });
99
100 setErrors(nextErrors);
101 if (Object.keys(nextErrors).length === 0) {
102 setSubmitted(true);
103 }
104 }
105
106 return (
107 <main
108 className={`vektos ${css({
109 bg: "bg.canvas",
110 color: "fg.default",
111 px: "4",
112 py: "8",
113 })}`}
114 >
115 <div className={css({ width: "full", maxWidth: "lg", mx: "auto" })}>
116 <header className={css({ marginBlockEnd: "6" })}>
117 <p
118 className={css({
119 color: "fg.muted",
120 fontSize: "sm",
121 marginBlockEnd: "1",
122 })}
123 >
124 Account opening
125 </p>
126 <h1
127 className={css({
128 fontSize: "lg",
129 fontWeight: "semibold",
130 lineHeight: "tight",
131 })}
132 >
133 Identity verification
134 </h1>
135 <p
136 className={css({
137 color: "fg.muted",
138 fontSize: "sm",
139 lineHeight: "normal",
140 marginBlockStart: "2",
141 })}
142 >
143 Confirm your account details and provide your identity information.
144 </p>
145 </header>
146
147 {submitted ? (
148 <Card>
149 <CardBody
150 aria-live="polite"
151 className={css({
152 display: "flex",
153 flexDirection: "column",
154 alignItems: "flex-start",
155 gap: "3",
156 })}
157 >
158 <Badge tone="warning">Under review</Badge>
159 <h2 className={css({ fontSize: "lg", fontWeight: "semibold" })}>
160 Your details are being reviewed.
161 </h2>
162 <p className={css({ color: "fg.muted", lineHeight: "normal" })}>
163 We have received your information. We will let you know when the
164 review is complete.
165 </p>
166 </CardBody>
167 </Card>
168 ) : (
169 <Card>
170 <form onSubmit={handleSubmit} noValidate>
171 <CardHeader>
172 <CardTitle asChild>
173 <h2>Your information</h2>
174 </CardTitle>
175 <CardDescription>
176 Complete every field below to submit your details for review.
177 </CardDescription>
178 </CardHeader>
179
180 <CardBody
181 className={css({
182 display: "flex",
183 flexDirection: "column",
184 gap: "6",
185 })}
186 >
187 <section
188 aria-labelledby="account-details-heading"
189 className={css({
190 bg: "bg.subtle",
191 p: "4",
192 rounded: "md",
193 })}
194 >
195 <h3
196 id="account-details-heading"
197 className={css({ fontSize: "sm", fontWeight: "semibold" })}
198 >
199 Account details
200 </h3>
201 <p
202 className={css({
203 color: "fg.muted",
204 fontSize: "sm",
205 marginBlockStart: "1",
206 marginBlockEnd: "4",
207 })}
208 >
209 These details are linked to your application and cannot be
210 edited here.
211 </p>
212 <div
213 className={css({
214 display: "flex",
215 flexDirection: "column",
216 gap: "4",
217 })}
218 >
219 <FormField label="Full name">
220 <Input
221 name="fullName"
222 autoComplete="name"
223 value={fullName}
224 readOnly
225 />
226 </FormField>
227 <FormField label="Email address">
228 <Input
229 type="email"
230 name="email"
231 autoComplete="email"
232 value={data.customer.email}
233 readOnly
234 />
235 </FormField>
236 </div>
237 </section>
238
239 <section aria-labelledby="identity-details-heading">
240 <h3
241 id="identity-details-heading"
242 className={css({ fontSize: "sm", fontWeight: "semibold" })}
243 >
244 Identity details
245 </h3>
246 <p
247 className={css({
248 color: "fg.muted",
249 fontSize: "sm",
250 marginBlockStart: "1",
251 marginBlockEnd: "4",
252 })}
253 >
254 All fields are required.
255 </p>
256 <div
257 className={css({
258 display: "flex",
259 flexDirection: "column",
260 gap: "4",
261 })}
262 >
263 <FormField
264 label="Date of birth"
265 error={errors.dateOfBirth}
266 >
267 <Input
268 type="date"
269 name="dateOfBirth"
270 autoComplete="bday"
271 value={values.dateOfBirth}
272 onChange={(event) =>
273 updateField("dateOfBirth", event.target.value)
274 }
275 required
276 />
277 </FormField>
278
279 <FormField
280 label="Nationality"
281 error={errors.nationality}
282 >
283 <Select
284 name="nationality"
285 options={countryOptions}
286 placeholder="Select your nationality"
287 value={values.nationality}
288 onValueChange={(value) =>
289 updateField("nationality", value)
290 }
291 aria-required="true"
292 />
293 </FormField>
294
295 <FormField
296 label="Country of residence"
297 error={errors.countryOfResidence}
298 >
299 <Select
300 name="countryOfResidence"
301 options={countryOptions}
302 placeholder="Select your country of residence"
303 value={values.countryOfResidence}
304 onValueChange={(value) =>
305 updateField("countryOfResidence", value)
306 }
307 aria-required="true"
308 />
309 </FormField>
310
311 <FormField
312 label="Tax identification number"
313 helperText="Enter the number issued by your tax authority."
314 error={errors.taxIdentificationNumber}
315 >
316 <Input
317 name="taxIdentificationNumber"
318 autoComplete="off"
319 value={values.taxIdentificationNumber}
320 onChange={(event) =>
321 updateField(
322 "taxIdentificationNumber",
323 event.target.value,
324 )
325 }
326 required
327 />
328 </FormField>
329
330 <FormField
331 label="Type of identity document"
332 error={errors.documentType}
333 >
334 <Select
335 name="documentType"
336 options={data.documentTypes}
337 placeholder="Select a document type"
338 value={values.documentType}
339 onValueChange={(value) =>
340 updateField("documentType", value)
341 }
342 aria-required="true"
343 />
344 </FormField>
345
346 <FormField
347 label="Document number"
348 error={errors.documentNumber}
349 >
350 <Input
351 name="documentNumber"
352 autoComplete="off"
353 value={values.documentNumber}
354 onChange={(event) =>
355 updateField("documentNumber", event.target.value)
356 }
357 required
358 />
359 </FormField>
360
361 <FormField
362 label="Are you a politically exposed person?"
363 helperText="A politically exposed person holds, or has held, a prominent public position."
364 error={errors.politicallyExposedPerson}
365 >
366 <Select
367 name="politicallyExposedPerson"
368 options={politicallyExposedOptions}
369 placeholder="Select yes or no"
370 value={values.politicallyExposedPerson}
371 onValueChange={(value) =>
372 updateField("politicallyExposedPerson", value)
373 }
374 aria-required="true"
375 />
376 </FormField>
377 </div>
378 </section>
379 </CardBody>
380
381 <CardFooter>
382 <Button type="submit">Submit for review</Button>
383 </CardFooter>
384 </form>
385 </Card>
386 )}
387 </div>
388 </main>
389 );
390 }
391
3 write_file 1,809 5,369 $0.0588
4 check_code 5,425 2,292 $0.0356
5 write_file 2,670 2,893 $0.0372
6 check_code 2,978 2,389 $0.0333