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 158 $0.0003 1 get_component, get_component, get_component, get_component, get_component 4,639 229 $0.0006 2 list_tokens 8,030 408 $0.0010
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 FieldKey =
20 | "dateOfBirth"
21 | "nationality"
22 | "countryOfResidence"
23 | "taxId"
24 | "documentType"
25 | "documentNumber"
26 | "politicallyExposed";
27
28 type Values = Record<FieldKey, string>;
29
30 const emptyValues: Values = {
31 dateOfBirth: "",
32 nationality: "",
33 countryOfResidence: "",
34 taxId: "",
35 documentType: "",
36 documentNumber: "",
37 politicallyExposed: "",
38 };
39
40 const requiredMessages: Record<FieldKey, string> = {
41 dateOfBirth: "Enter your date of birth.",
42 nationality: "Choose your nationality.",
43 countryOfResidence: "Choose your country of residence.",
44 taxId: "Enter your tax identification number.",
45 documentType: "Choose the type of identity document.",
46 documentNumber: "Enter your document number.",
47 politicallyExposed: "Answer whether you are a politically exposed person.",
48 };
49
50 const countryOptions = data.countries.map((country) => ({
51 label: country.name,
52 value: country.code,
53 }));
54
55 const documentOptions = data.documentTypes.map((type) => ({
56 label: type.label,
57 value: type.value,
58 }));
59
60 const pepOptions = [
61 { label: "Yes", value: "yes" },
62 { label: "No", value: "no" },
63 ];
64
65 const fieldOrder: FieldKey[] = [
66 "dateOfBirth",
67 "nationality",
68 "countryOfResidence",
69 "taxId",
70 "documentType",
71 "documentNumber",
72 "politicallyExposed",
73 ];
74
75 export default function Page() {
76 const [values, setValues] = useState<Values>(emptyValues);
77 const [errors, setErrors] = useState<Partial<Record<FieldKey, string>>>({});
78 const [submitted, setSubmitted] = useState(false);
79
80 const fullName = `${data.customer.firstName} ${data.customer.lastName}`;
81
82 const updateField = (field: FieldKey, value: string) => {
83 setValues((current) => ({ ...current, [field]: value }));
84 setErrors((current) => {
85 if (!current[field]) return current;
86 const next = { ...current };
87 delete next[field];
88 return next;
89 });
90 };
91
92 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
93 event.preventDefault();
94
95 const nextErrors: Partial<Record<FieldKey, string>> = {};
96 for (const field of fieldOrder) {
97 if (values[field].trim() === "") {
98 nextErrors[field] = requiredMessages[field];
99 }
100 }
101
102 setErrors(nextErrors);
103 if (Object.keys(nextErrors).length === 0) {
104 setSubmitted(true);
105 }
106 };
107
108 if (submitted) {
109 return (
110 <div className={`vektos ${css({ bg: "bg.canvas", p: "6", minHeight: "full" })}`}>
111 <div className={css({ maxWidth: "md", mx: "auto" })}>
112 <Card>
113 <CardHeader>
114 <CardTitle>Identity verification submitted</CardTitle>
115 <CardDescription>Your details are being reviewed.</CardDescription>
116 </CardHeader>
117 <CardBody>
118 <p className={css({ color: "fg.default", fontSize: "md", lineHeight: "normal" })}>
119 Thank you, {data.customer.firstName}. We are checking the details you provided.
120 We will contact you at {data.customer.email} once the review is complete.
121 </p>
122 </CardBody>
123 </Card>
124 </div>
125 </div>
126 );
127 }
128
129 return (
130 <div className={`vektos ${css({ bg: "bg.canvas", p: "6", minHeight: "full" })}`}>
131 <div className={css({ maxWidth: "md", mx: "auto", display: "grid", gap: "6" })}>
132 <Card>
133 <CardHeader>
134 <CardTitle>Verify your identity</CardTitle>
135 <CardDescription>
136 Confirm the details below to complete your account opening.
137 </CardDescription>
138 </CardHeader>
139 <CardBody>
140 <div className={css({ display: "grid", gap: "4" })}>
141 <div className={css({ display: "grid", gap: "1" })}>
142 <span className={css({ fontSize: "sm", color: "fg.muted" })}>Full name</span>
143 <span className={css({ fontSize: "md", color: "fg.default", fontWeight: "medium" })}>
144 {fullName}
145 </span>
146 </div>
147 <div className={css({ display: "grid", gap: "1" })}>
148 <span className={css({ fontSize: "sm", color: "fg.muted" })}>Email</span>
149 <span className={css({ fontSize: "md", color: "fg.default", fontWeight: "medium" })}>
150 {data.customer.email}
151 </span>
152 </div>
153 </div>
154 </CardBody>
155 </Card>
156
157 <Card>
158 <form onSubmit={handleSubmit} noValidate>
159 <CardHeader>
160 <CardTitle>Identity details</CardTitle>
161 <CardDescription>All fields are required.</CardDescription>
162 </CardHeader>
163 <CardBody>
164 <div className={css({ display: "grid", gap: "4" })}>
165 <FormField label="Date of birth" error={errors.dateOfBirth}>
166 <Input
167 type="date"
168 name="dateOfBirth"
169 value={values.dateOfBirth}
170 onChange={(event) => updateField("dateOfBirth", event.target.value)}
171 />
172 </FormField>
173
174 <FormField label="Nationality" error={errors.nationality}>
175 <Select
176 name="nationality"
177 options={countryOptions}
178 placeholder="Choose a country"
179 value={values.nationality}
180 onValueChange={(value) => updateField("nationality", value)}
181 />
182 </FormField>
183
184 <FormField label="Country of residence" error={errors.countryOfResidence}>
185 <Select
186 name="countryOfResidence"
187 options={countryOptions}
188 placeholder="Choose a country"
189 value={values.countryOfResidence}
190 onValueChange={(value) => updateField("countryOfResidence", value)}
191 />
192 </FormField>
193
194 <FormField label="Tax identification number" error={errors.taxId}>
195 <Input
196 name="taxId"
197 value={values.taxId}
198 onChange={(event) => updateField("taxId", event.target.value)}
199 />
200 </FormField>
201
202 <FormField label="Identity document type" error={errors.documentType}>
203 <Select
204 name="documentType"
205 options={documentOptions}
206 placeholder="Choose a document type"
207 value={values.documentType}
208 onValueChange={(value) => updateField("documentType", value)}
209 />
210 </FormField>
211
212 <FormField label="Document number" error={errors.documentNumber}>
213 <Input
214 name="documentNumber"
215 value={values.documentNumber}
216 onChange={(event) => updateField("documentNumber", event.target.value)}
217 />
218 </FormField>
219
220 <FormField
221 label="Are you a politically exposed person?"
222 error={errors.politicallyExposed}
223 >
224 <Select
225 name="politicallyExposed"
226 options={pepOptions}
227 placeholder="Choose an answer"
228 value={values.politicallyExposed}
229 onValueChange={(value) => updateField("politicallyExposed", value)}
230 />
231 </FormField>
232 </div>
233 </CardBody>
234 <CardFooter>
235 <Button type="submit">Submit for review</Button>
236 </CardFooter>
237 </form>
238 </Card>
239 </div>
240 </div>
241 );
242 }
243
3 write_file, check_code 10,159 7,382 $0.0047
4 check_code 18,127 3,122 $0.0034
5 write_file 21,258 2,859 $0.0036