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, read_file, list_components, list_files 1,812 157 $0.0003 1 get_component, get_component, get_component, get_component, get_component 4,638 229 $0.0006 2 list_tokens 8,029 214 $0.0009
e02ef3974528
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 const fieldNames = [
20 "dateOfBirth",
21 "nationality",
22 "countryOfResidence",
23 "taxId",
24 "documentType",
25 "documentNumber",
26 "politicallyExposed",
27 ] as const;
28
29 type FieldName = (typeof fieldNames)[number];
30
31 type FormValues = Record<FieldName, string>;
32
33 const emptyValues: FormValues = {
34 dateOfBirth: "",
35 nationality: "",
36 countryOfResidence: "",
37 taxId: "",
38 documentType: "",
39 documentNumber: "",
40 politicallyExposed: "",
41 };
42
43 const countryOptions = data.countries.map((country) => ({
44 label: country.name,
45 value: country.code,
46 }));
47
48 const documentOptions = data.documentTypes.map((type) => ({
49 label: type.label,
50 value: type.value,
51 }));
52
53 const pepOptions = [
54 { label: "Yes", value: "yes" },
55 { label: "No", value: "no" },
56 ];
57
58 const requiredMessage = "This field is required.";
59
60 const pageClass = css({ bg: "bg.canvas", p: "6" });
61 const columnClass = css({ maxWidth: "lg", mx: "auto" });
62
63 export default function IdentityVerificationPage() {
64 const [values, setValues] = useState<FormValues>(emptyValues);
65 const [errors, setErrors] = useState<Partial<Record<FieldName, string>>>({});
66 const [submitted, setSubmitted] = useState(false);
67
68 const setValue = (name: FieldName, value: string) => {
69 setValues((current) => ({ ...current, [name]: value }));
70 if (errors[name]) {
71 setErrors((current) => {
72 const next = { ...current };
73 delete next[name];
74 return next;
75 });
76 }
77 };
78
79 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
80 event.preventDefault();
81 const nextErrors: Partial<Record<FieldName, string>> = {};
82 for (const name of fieldNames) {
83 if (values[name].trim() === "") {
84 nextErrors[name] = requiredMessage;
85 }
86 }
87 setErrors(nextErrors);
88 if (Object.keys(nextErrors).length === 0) {
89 setSubmitted(true);
90 }
91 };
92
93 if (submitted) {
94 return (
95 <main className={`vektos ${pageClass}`}>
96 <div className={columnClass}>
97 <Card>
98 <CardHeader>
99 <CardTitle>Identity verification</CardTitle>
100 <CardDescription>Your details are being reviewed.</CardDescription>
101 </CardHeader>
102 <CardBody>
103 <output className={css({ color: "fg.default", fontSize: "md" })}>
104 Thank you, {data.customer.firstName}. We are reviewing the details you
105 provided. We will let you know once your identity has been verified.
106 </output>
107 </CardBody>
108 </Card>
109 </div>
110 </main>
111 );
112 }
113
114 return (
115 <main className={`vektos ${pageClass}`}>
116 <div className={columnClass}>
117 <Card>
118 <CardHeader>
119 <CardTitle>Identity verification</CardTitle>
120 <CardDescription>
121 Confirm your identity to finish opening your account.
122 </CardDescription>
123 </CardHeader>
124 <CardBody>
125 <form
126 noValidate
127 onSubmit={handleSubmit}
128 className={css({ display: "flex", flexDirection: "column", gap: "4" })}
129 >
130 <FormField label="Full name">
131 <Input
132 disabled
133 value={`${data.customer.firstName} ${data.customer.lastName}`}
134 readOnly
135 />
136 </FormField>
137
138 <FormField label="Email">
139 <Input disabled value={data.customer.email} readOnly />
140 </FormField>
141
142 <FormField label="Date of birth" error={errors.dateOfBirth}>
143 <Input
144 type="date"
145 value={values.dateOfBirth}
146 onChange={(event) => setValue("dateOfBirth", event.target.value)}
147 />
148 </FormField>
149
150 <FormField label="Nationality" error={errors.nationality}>
151 <Select
152 options={countryOptions}
153 placeholder="Choose a nationality"
154 value={values.nationality}
155 onValueChange={(value) => setValue("nationality", value)}
156 />
157 </FormField>
158
159 <FormField label="Country of residence" error={errors.countryOfResidence}>
160 <Select
161 options={countryOptions}
162 placeholder="Choose a country"
163 value={values.countryOfResidence}
164 onValueChange={(value) => setValue("countryOfResidence", value)}
165 />
166 </FormField>
167
168 <FormField label="Tax identification number" error={errors.taxId}>
169 <Input
170 value={values.taxId}
171 onChange={(event) => setValue("taxId", event.target.value)}
172 />
173 </FormField>
174
175 <FormField label="Type of identity document" error={errors.documentType}>
176 <Select
177 options={documentOptions}
178 placeholder="Choose a document type"
179 value={values.documentType}
180 onValueChange={(value) => setValue("documentType", value)}
181 />
182 </FormField>
183
184 <FormField label="Document number" error={errors.documentNumber}>
185 <Input
186 value={values.documentNumber}
187 onChange={(event) => setValue("documentNumber", event.target.value)}
188 />
189 </FormField>
190
191 <FormField
192 label="Are you a politically exposed person?"
193 error={errors.politicallyExposed}
194 >
195 <Select
196 options={pepOptions}
197 placeholder="Choose yes or no"
198 value={values.politicallyExposed}
199 onValueChange={(value) => setValue("politicallyExposed", value)}
200 />
201 </FormField>
202
203 <CardFooter>
204 <Button type="submit">Continue</Button>
205 </CardFooter>
206 </form>
207 </CardBody>
208 </Card>
209 </div>
210 </main>
211 );
212 }
213
3 write_file 9,964 2,984 $0.0025
4 check_code 12,969 2,266 $0.0024
5 write_file 15,460 2,497 $0.0028
6 check_code 17,978 2,240 $0.0029