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 1,812 130 $0.0002 1 get_component, get_component, get_component, get_component, get_component, list_tokens 4,581 254 $0.0006 2 write_file, check_code 9,740 6,426 $0.0042
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 type FieldName =
20 | "dateOfBirth"
21 | "nationality"
22 | "countryOfResidence"
23 | "taxId"
24 | "documentType"
25 | "documentNumber"
26 | "pep";
27
28 type Values = Record<FieldName, string>;
29 type Errors = Partial<Record<FieldName, string>>;
30
31 const fieldNames: FieldName[] = [
32 "dateOfBirth",
33 "nationality",
34 "countryOfResidence",
35 "taxId",
36 "documentType",
37 "documentNumber",
38 "pep",
39 ];
40
41 const initialValues: Values = {
42 dateOfBirth: "",
43 nationality: "",
44 countryOfResidence: "",
45 taxId: "",
46 documentType: "",
47 documentNumber: "",
48 pep: "",
49 };
50
51 const requiredMessages: Record<FieldName, string> = {
52 dateOfBirth: "Enter your date of birth.",
53 nationality: "Choose your nationality.",
54 countryOfResidence: "Choose your country of residence.",
55 taxId: "Enter your tax identification number.",
56 documentType: "Choose the type of identity document.",
57 documentNumber: "Enter the document number.",
58 pep: "Tell us whether you are a politically exposed person.",
59 };
60
61 const countryOptions = data.countries.map((country) => ({
62 label: country.name,
63 value: country.code,
64 }));
65
66 const documentTypeOptions = data.documentTypes.map((type) => ({
67 label: type.label,
68 value: type.value,
69 }));
70
71 const pepOptions = [
72 { label: "Yes", value: "yes" },
73 { label: "No", value: "no" },
74 ];
75
76 const stack = css({
77 display: "flex",
78 flexDirection: "column",
79 gap: "4",
80 });
81
82 const pageClass = css({ padding: "6", bg: "bg.canvas", minHeight: "full" });
83
84 export default function IdentityVerificationPage() {
85 const [values, setValues] = useState<Values>(initialValues);
86 const [errors, setErrors] = useState<Errors>({});
87 const [submitted, setSubmitted] = useState(false);
88
89 const setValue = (name: FieldName) => (value: string) => {
90 setValues((current) => ({ ...current, [name]: value }));
91 setErrors((current) => {
92 if (!current[name]) return current;
93 const next = { ...current };
94 delete next[name];
95 return next;
96 });
97 };
98
99 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
100 event.preventDefault();
101
102 const nextErrors: Errors = {};
103 fieldNames.forEach((name) => {
104 if (values[name].trim() === "") {
105 nextErrors[name] = requiredMessages[name];
106 }
107 });
108
109 setErrors(nextErrors);
110 if (Object.keys(nextErrors).length === 0) {
111 setSubmitted(true);
112 }
113 };
114
115 if (submitted) {
116 return (
117 <main className={`vektos ${pageClass}`}>
118 <Card className={css({ maxWidth: "md", marginInline: "auto" })}>
119 <CardHeader>
120 <CardTitle>Your details are being reviewed</CardTitle>
121 <CardDescription>
122 Thank you, {data.customer.firstName}. We will let you know at{" "}
123 {data.customer.email} once the identity check is complete.
124 </CardDescription>
125 </CardHeader>
126 </Card>
127 </main>
128 );
129 }
130
131 return (
132 <main className={`vektos ${pageClass}`}>
133 <Card className={css({ maxWidth: "lg", marginInline: "auto" })}>
134 <CardHeader>
135 <CardTitle>Verify your identity</CardTitle>
136 <CardDescription>
137 Complete the details below to finish opening your account. All fields are required.
138 </CardDescription>
139 </CardHeader>
140
141 <form noValidate onSubmit={handleSubmit}>
142 <CardBody>
143 <div className={stack}>
144 <FormField label="First name">
145 <Input value={data.customer.firstName} disabled readOnly />
146 </FormField>
147 <FormField label="Last name">
148 <Input value={data.customer.lastName} disabled readOnly />
149 </FormField>
150 <FormField label="Email">
151 <Input value={data.customer.email} disabled readOnly />
152 </FormField>
153
154 <FormField label="Date of birth" required error={errors.dateOfBirth}>
155 <Input
156 type="date"
157 value={values.dateOfBirth}
158 onChange={(event) => setValue("dateOfBirth")(event.currentTarget.value)}
159 />
160 </FormField>
161
162 <FormField label="Nationality" required error={errors.nationality}>
163 <Select
164 options={countryOptions}
165 placeholder="Choose a country"
166 value={values.nationality}
167 onValueChange={setValue("nationality")}
168 />
169 </FormField>
170
171 <FormField label="Country of residence" required error={errors.countryOfResidence}>
172 <Select
173 options={countryOptions}
174 placeholder="Choose a country"
175 value={values.countryOfResidence}
176 onValueChange={setValue("countryOfResidence")}
177 />
178 </FormField>
179
180 <FormField label="Tax identification number" required error={errors.taxId}>
181 <Input
182 value={values.taxId}
183 onChange={(event) => setValue("taxId")(event.currentTarget.value)}
184 />
185 </FormField>
186
187 <FormField label="Identity document type" required error={errors.documentType}>
188 <Select
189 options={documentTypeOptions}
190 placeholder="Choose a document type"
191 value={values.documentType}
192 onValueChange={setValue("documentType")}
193 />
194 </FormField>
195
196 <FormField label="Document number" required error={errors.documentNumber}>
197 <Input
198 value={values.documentNumber}
199 onChange={(event) => setValue("documentNumber")(event.currentTarget.value)}
200 />
201 </FormField>
202
203 <FormField label="Politically exposed person" required error={errors.pep}>
204 <Select
205 options={pepOptions}
206 placeholder="Choose an answer"
207 value={values.pep}
208 onValueChange={setValue("pep")}
209 />
210 </FormField>
211 </div>
212 </CardBody>
213
214 <CardFooter>
215 <Button type="submit">Continue</Button>
216 </CardFooter>
217 </form>
218 </Card>
219 </main>
220 );
221 }
222
3 write_file, check_code 16,300 4,980 $0.0041