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 4 counted, under 3 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
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,581 157 $0.0002 1 get_component, get_component, get_component, get_component, get_component, list_tokens 4,407 254 $0.0006 2 write_file 9,566 5,166 $0.0035
Output cap The provider's default 4 import {
5 Button,
6 Card,
7 CardBody,
8 CardDescription,
9 CardHeader,
10 CardTitle,
11 FormField,
12 Input,
13 Select,
14 } from "@vektos/ds";
15 import { css } from "styled-system/css";
16 import data from "./fixture.json";
17
18 type FieldKey =
19 | "dateOfBirth"
20 | "nationality"
21 | "countryOfResidence"
22 | "taxId"
23 | "documentType"
24 | "documentNumber"
25 | "pep";
26
27 type Values = Record<FieldKey, string>;
28 type Errors = Partial<Record<FieldKey, string>>;
29
30 const initialValues: Values = {
31 dateOfBirth: "",
32 nationality: "",
33 countryOfResidence: "",
34 taxId: "",
35 documentType: "",
36 documentNumber: "",
37 pep: "",
38 };
39
40 const requiredMessages: Record<FieldKey, string> = {
41 dateOfBirth: "Enter your date of birth.",
42 nationality: "Select your nationality.",
43 countryOfResidence: "Select your country of residence.",
44 taxId: "Enter your tax identification number.",
45 documentType: "Select the type of identity document.",
46 documentNumber: "Enter the document number.",
47 pep: "Tell us 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 documentTypeOptions = 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 fieldFirst: FieldKey[] = [
66 "dateOfBirth",
67 "nationality",
68 "countryOfResidence",
69 "taxId",
70 "documentType",
71 "documentNumber",
72 "pep",
73 ];
74
75 const detailsGrid = css({
76 display: "grid",
77 gridTemplateColumns: "1fr",
78 gap: "4",
79 md: { gridTemplateColumns: "1fr 1fr" },
80 });
81
82 const personalDetails = css({
83 display: "grid",
84 gridTemplateColumns: "1fr",
85 gap: "4",
86 marginBlockEnd: "6",
87 md: { gridTemplateColumns: "1fr 1fr" },
88 });
89
90 const detailLabel = css({
91 fontSize: "sm",
92 color: "fg.muted",
93 });
94
95 const detailValue = css({
96 fontSize: "md",
97 fontWeight: "medium",
98 color: "fg.default",
99 });
100
101 const pageStyle = css({
102 minHeight: "100vh",
103 bg: "bg.canvas",
104 color: "fg.default",
105 display: "flex",
106 justifyContent: "center",
107 alignItems: "flex-start",
108 px: "4",
109 py: "8",
110 });
111
112 const cardStyle = css({
113 width: "full",
114 maxWidth: "lg",
115 });
116
117 export default function IdentityVerificationPage() {
118 const [values, setValues] = useState<Values>(initialValues);
119 const [errors, setErrors] = useState<Errors>({});
120 const [submitted, setSubmitted] = useState(false);
121
122 const { firstName, lastName, email } = data.customer;
123
124 function update(key: FieldKey, value: string) {
125 setValues((current) => ({ ...current, [key]: value }));
126 setErrors((current) => ({ ...current, [key]: undefined }));
127 }
128
129 function handleSubmit(event: FormEvent<HTMLFormElement>) {
130 event.preventDefault();
131
132 const nextErrors: Errors = {};
133 for (const key of fieldFirst) {
134 if (values[key].trim() === "") {
135 nextErrors[key] = requiredMessages[key];
136 }
137 }
138
139 setErrors(nextErrors);
140 if (Object.keys(nextErrors).length === 0) {
141 setSubmitted(true);
142 }
143 }
144
145 return (
146 <div className={`vektos ${pageStyle}`}>
147 <div className={cardStyle}>
148 {submitted ? (
149 <Card>
150 <CardHeader>
151 <CardTitle>Details under review</CardTitle>
152 <CardDescription>Identity verification</CardDescription>
153 </CardHeader>
154 <CardBody>
155 <p role="status" className={css({ color: "fg.default" })}>
156 Thanks, {firstName}. We are reviewing your identity details and
157 will let you know once the check is complete.
158 </p>
159 </CardBody>
160 </Card>
161 ) : (
162 <Card>
163 <CardHeader>
164 <CardTitle>Verify your identity</CardTitle>
165 <CardDescription>
166 Confirm the details below to continue opening your account.
167 </CardDescription>
168 </CardHeader>
169 <CardBody>
170 <dl className={personalDetails}>
171 <div>
172 <dt className={detailLabel}>Full name</dt>
173 <dd className={detailValue}>
174 {firstName} {lastName}
175 </dd>
176 </div>
177 <div>
178 <dt className={detailLabel}>Email</dt>
179 <dd className={detailValue}>{email}</dd>
180 </div>
181 </dl>
182
183 <form
184 noValidate
185 onSubmit={handleSubmit}
186 className={css({ display: "grid", gap: "6" })}
187 >
188 <div className={detailsGrid}>
189 <FormField label="Date of birth" error={errors.dateOfBirth}>
190 <Input
191 type="date"
192 name="dateOfBirth"
193 value={values.dateOfBirth}
194 onChange={(event) =>
195 update("dateOfBirth", event.target.value)
196 }
197 />
198 </FormField>
199
200 <FormField label="Nationality" error={errors.nationality}>
201 <Select
202 name="nationality"
203 placeholder="Choose a country"
204 options={countryOptions}
205 value={values.nationality}
206 onValueChange={(value) => update("nationality", value)}
207 />
208 </FormField>
209
210 <FormField
211 label="Country of residence"
212 error={errors.countryOfResidence}
213 >
214 <Select
215 name="countryOfResidence"
216 placeholder="Choose a country"
217 options={countryOptions}
218 value={values.countryOfResidence}
219 onValueChange={(value) =>
220 update("countryOfResidence", value)
221 }
222 />
223 </FormField>
224
225 <FormField
226 label="Tax identification number"
227 error={errors.taxId}
228 >
229 <Input
230 name="taxId"
231 autoComplete="off"
232 value={values.taxId}
233 onChange={(event) => update("taxId", event.target.value)}
234 />
235 </FormField>
236
237 <FormField
238 label="Identity document type"
239 error={errors.documentType}
240 >
241 <Select
242 name="documentType"
243 placeholder="Choose a document type"
244 options={documentTypeOptions}
245 value={values.documentType}
246 onValueChange={(value) => update("documentType", value)}
247 />
248 </FormField>
249
250 <FormField
251 label="Document number"
252 error={errors.documentNumber}
253 >
254 <Input
255 name="documentNumber"
256 autoComplete="off"
257 value={values.documentNumber}
258 onChange={(event) =>
259 update("documentNumber", event.target.value)
260 }
261 />
262 </FormField>
263 </div>
264
265 <FormField
266 label="Are you a politically exposed person?"
267 helperText="A politically exposed person holds, or has recently held, a prominent public role."
268 error={errors.pep}
269 >
270 <Select
271 name="pep"
272 placeholder="Choose an answer"
273 options={pepOptions}
274 value={values.pep}
275 onValueChange={(value) => update("pep", value)}
276 />
277 </FormField>
278
279 <div
280 className={css({
281 display: "flex",
282 justifyContent: "flex-end",
283 })}
284 >
285 <Button type="submit">Submit details</Button>
286 </div>
287 </form>
288 </CardBody>
289 </Card>
290 )}
291 </div>
292 </div>
293 );
294 }
295