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_files 1,324 47 $0.0005 1 read_file, list_components 1,376 61 $0.0005 2 get_component, get_component, get_component, get_component, get_component 855 157 $0.0005
e02ef3974528
Output cap The provider's default 4 import type { FormEvent } from "react";
5 import {
6 Badge,
7 Button,
8 Card,
9 CardBody,
10 CardDescription,
11 CardFooter,
12 CardHeader,
13 CardTitle,
14 FormField,
15 Input,
16 Select,
17 } from "@vektos/ds";
18 import { css } from "styled-system/css";
19 import data from "./fixture.json";
20
21 const customer = data.customer;
22 const fullName = `${customer.firstName} ${customer.lastName}`;
23
24 const countryOptions = data.countries.map((country) => ({
25 value: country.code,
26 label: country.name,
27 }));
28
29 const documentTypeOptions = data.documentTypes.map((documentType) => ({
30 value: documentType.value,
31 label: documentType.label,
32 }));
33
34 const exposedPersonOptions = [
35 { value: "yes", label: "Yes" },
36 { value: "no", label: "No" },
37 ];
38
39 type FieldName =
40 | "dateOfBirth"
41 | "nationality"
42 | "countryOfResidence"
43 | "taxId"
44 | "documentType"
45 | "documentNumber"
46 | "politicallyExposed";
47
48 type FormValues = Record<FieldName, string>;
49 type FormErrors = Partial<Record<FieldName, string>>;
50
51 const emptyValues: FormValues = {
52 dateOfBirth: "",
53 nationality: "",
54 countryOfResidence: "",
55 taxId: "",
56 documentType: "",
57 documentNumber: "",
58 politicallyExposed: "",
59 };
60
61 const requiredMessages: Record<FieldName, string> = {
62 dateOfBirth: "Enter the date of birth.",
63 nationality: "Choose a nationality.",
64 countryOfResidence: "Choose a country of residence.",
65 taxId: "Enter the tax identification number.",
66 documentType: "Choose a type of identity document.",
67 documentNumber: "Enter the document number.",
68 politicallyExposed: "Say whether the customer is a politically exposed person.",
69 };
70
71 const fieldNames: FieldName[] = [
72 "dateOfBirth",
73 "nationality",
74 "countryOfResidence",
75 "taxId",
76 "documentType",
77 "documentNumber",
78 "politicallyExposed",
79 ];
80
81 const stack = css({
82 display: "flex",
83 flexDirection: "column",
84 gap: "4",
85 });
86
87 const groupLabel = css({
88 fontSize: "sm",
89 fontWeight: "semibold",
90 color: "fg.muted",
91 });
92
93 export default function IdentityVerificationPage() {
94 const [values, setValues] = useState<FormValues>(emptyValues);
95 const [errors, setErrors] = useState<FormErrors>({});
96 const [submitted, setSubmitted] = useState(false);
97
98 const setField = (field: FieldName, value: string) => {
99 setValues((previous) => ({ ...previous, [field]: value }));
100
101 if (errors[field] !== undefined && value.trim() !== "") {
102 setErrors((previous) => ({ ...previous, [field]: undefined }));
103 }
104 };
105
106 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
107 event.preventDefault();
108
109 const nextErrors: FormErrors = {};
110
111 for (const field of fieldNames) {
112 if (values[field].trim() === "") {
113 nextErrors[field] = requiredMessages[field];
114 }
115 }
116
117 setErrors(nextErrors);
118
119 if (Object.keys(nextErrors).length === 0) {
120 setSubmitted(true);
121 }
122 };
123
124 return (
125 <div
126 className={css({
127 minHeight: "full",
128 bg: "bg.canvas",
129 color: "fg.default",
130 p: "6",
131 })}
132 >
133 <div className={css({ maxWidth: "lg", marginInline: "auto" })}>
134 <Card>
135 <CardHeader>
136 <CardTitle>Identity verification</CardTitle>
137 <CardDescription>
138 Confirm who the customer is before the account is opened.
139 </CardDescription>
140 </CardHeader>
141
142 {submitted ? (
143 <CardBody>
144 <div
145 className={css({
146 display: "flex",
147 flexDirection: "column",
148 alignItems: "flex-start",
149 gap: "3",
150 })}
151 >
152 <Badge tone="warning">Pending review</Badge>
153 <p className={css({ fontSize: "md", color: "fg.default" })}>
154 The details for {fullName} are being reviewed. We will email{" "}
155 {customer.email} once the identity check is complete.
156 </p>
157 </div>
158 </CardBody>
159 ) : (
160 <form onSubmit={handleSubmit} noValidate>
161 <CardBody>
162 <div className={stack}>
163 <div className={stack}>
164 <p className={groupLabel}>Customer</p>
165
166 <FormField
167 label="Full name"
168 helperText="Taken from the application. It cannot be edited here."
169 >
170 <Input value={fullName} readOnly tabIndex={-1} />
171 </FormField>
172
173 <FormField
174 label="Email address"
175 helperText="Taken from the application. It cannot be edited here."
176 >
177 <Input value={customer.email} readOnly tabIndex={-1} />
178 </FormField>
179 </div>
180
181 <p className={groupLabel}>Verification details</p>
182
183 <FormField label="Date of birth" error={errors.dateOfBirth}>
184 <Input
185 type="date"
186 value={values.dateOfBirth}
187 onChange={(event) => setField("dateOfBirth", event.target.value)}
188 />
189 </FormField>
190
191 <FormField label="Nationality" error={errors.nationality}>
192 <Select
193 placeholder="Choose a nationality"
194 options={countryOptions}
195 value={values.nationality}
196 onValueChange={(value) => setField("nationality", value)}
197 />
198 </FormField>
199
200 <FormField
201 label="Country of residence"
202 error={errors.countryOfResidence}
203 >
204 <Select
205 placeholder="Choose a country"
206 options={countryOptions}
207 value={values.countryOfResidence}
208 onValueChange={(value) => setField("countryOfResidence", value)}
209 />
210 </FormField>
211
212 <FormField label="Tax identification number" error={errors.taxId}>
213 <Input
214 value={values.taxId}
215 onChange={(event) => setField("taxId", event.target.value)}
216 />
217 </FormField>
218
219 <FormField
220 label="Type of identity document"
221 error={errors.documentType}
222 >
223 <Select
224 placeholder="Choose a document type"
225 options={documentTypeOptions}
226 value={values.documentType}
227 onValueChange={(value) => setField("documentType", value)}
228 />
229 </FormField>
230
231 <FormField label="Document number" error={errors.documentNumber}>
232 <Input
233 value={values.documentNumber}
234 onChange={(event) =>
235 setField("documentNumber", event.target.value)
236 }
237 />
238 </FormField>
239
240 <FormField
241 label="Politically exposed person"
242 helperText="A person with a prominent public function, or a close associate of one."
243 error={errors.politicallyExposed}
244 >
245 <Select
246 placeholder="Choose an answer"
247 options={exposedPersonOptions}
248 value={values.politicallyExposed}
249 onValueChange={(value) => setField("politicallyExposed", value)}
250 />
251 </FormField>
252 </div>
253 </CardBody>
254
255 <CardFooter>
256 <Button type="submit" variant="solid" size="md">
257 Submit for review
258 </Button>
259 </CardFooter>
260 </form>
261 )}
262 </Card>
263 </div>
264 </div>
265 );
266 }
267
list_tokens, list_tokens, list_tokens, list_tokens
4 write_file 1,475 4,345 $0.0057
5 write_file 4,561 1,823 $0.0036
6 check_code 2,053 1,719 $0.0028
7 write_file 1,775 1,852 $0.0028
8 check_code 2,112 1,754 $0.0028