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 3 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 1,773 131 $0.0002 1 get_component, get_component, get_component, get_component, get_component, list_tokens 4,543 254 $0.0006 2 write_file, check_code 9,702 6,943 $0.0044
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 FieldName =
19 | "dateOfBirth"
20 | "nationality"
21 | "countryOfResidence"
22 | "taxId"
23 | "documentType"
24 | "documentNumber"
25 | "politicallyExposed";
26
27 type Values = Record<FieldName, string>;
28
29 const emptyValues: Values = {
30 dateOfBirth: "",
31 nationality: "",
32 countryOfResidence: "",
33 taxId: "",
34 documentType: "",
35 documentNumber: "",
36 politicallyExposed: "",
37 };
38
39 const requiredMessage = "This field is required.";
40
41 const countryOptions = data.countries.map((country) => ({
42 label: country.name,
43 value: country.code,
44 }));
45
46 const documentOptions = data.documentTypes.map((type) => ({
47 label: type.label,
48 value: type.value,
49 }));
50
51 const pepOptions = [
52 { label: "No", value: "no" },
53 { label: "Yes", value: "yes" },
54 ];
55
56 const stack = css({
57 display: "flex",
58 flexDirection: "column",
59 gap: "4",
60 });
61
62 const grid = css({
63 display: "grid",
64 gridTemplateColumns: "1fr",
65 gap: "4",
66 "@media (min-width: 40rem)": {
67 gridTemplateColumns: "1fr 1fr",
68 },
69 });
70
71 const details = css({
72 display: "grid",
73 gridTemplateColumns: "1fr",
74 gap: "3",
75 margin: "0",
76 "@media (min-width: 40rem)": {
77 gridTemplateColumns: "1fr 1fr",
78 },
79 });
80
81 const detailLabel = css({
82 fontSize: "sm",
83 color: "fg.muted",
84 });
85
86 const detailValue = css({
87 fontSize: "md",
88 color: "fg.default",
89 fontWeight: "medium",
90 });
91
92 const actions = css({
93 display: "flex",
94 justifyContent: "flex-end",
95 gap: "2",
96 marginBlockStart: "2",
97 });
98
99 const pageWrap = css({
100 minHeight: "100%",
101 bg: "bg.canvas",
102 color: "fg.default",
103 padding: "6",
104 });
105
106 const container = css({
107 maxWidth: "lg",
108 marginInline: "auto",
109 display: "flex",
110 flexDirection: "column",
111 gap: "4",
112 });
113
114 export default function IdentityVerificationPage() {
115 const [values, setValues] = useState<Values>(emptyValues);
116 const [errors, setErrors] = useState<Partial<Record<FieldName, string>>>({});
117 const [submitted, setSubmitted] = useState(false);
118
119 const setValue = (name: FieldName, value: string) => {
120 setValues((current) => ({ ...current, [name]: value }));
121 setErrors((current) => {
122 if (!current[name]) return current;
123 const next = { ...current };
124 delete next[name];
125 return next;
126 });
127 };
128
129 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
130 event.preventDefault();
131
132 const nextErrors: Partial<Record<FieldName, string>> = {};
133 (Object.keys(values) as FieldName[]).forEach((name) => {
134 if (values[name].trim() === "") {
135 nextErrors[name] = requiredMessage;
136 }
137 });
138
139 setErrors(nextErrors);
140 if (Object.keys(nextErrors).length === 0) {
141 setSubmitted(true);
142 }
143 };
144
145 const { firstName, lastName, email } = data.customer;
146
147 return (
148 <div className={`vektos ${pageWrap}`}>
149 <div className={container}>
150 <Card>
151 <CardHeader>
152 <CardTitle>Identity verification</CardTitle>
153 <CardDescription>
154 Step 2 of account opening. Confirm your details to continue.
155 </CardDescription>
156 </CardHeader>
157 <CardBody>
158 <dl className={details}>
159 <div>
160 <dt className={detailLabel}>Full name</dt>
161 <dd className={detailValue}>
162 {firstName} {lastName}
163 </dd>
164 </div>
165 <div>
166 <dt className={detailLabel}>Email</dt>
167 <dd className={detailValue}>{email}</dd>
168 </div>
169 </dl>
170 </CardBody>
171 </Card>
172
173 <Card>
174 {submitted ? (
175 <CardBody>
176 <div role="status" className={stack}>
177 <CardTitle>Thank you</CardTitle>
178 <p className={css({ color: "fg.muted", fontSize: "sm" })}>
179 Your identity details are being reviewed. We will let you know
180 once the check is complete.
181 </p>
182 </div>
183 </CardBody>
184 ) : (
185 <form noValidate onSubmit={handleSubmit}>
186 <CardBody>
187 <div className={stack}>
188 <div className={grid}>
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 setValue("dateOfBirth", event.currentTarget.value)
196 }
197 />
198 </FormField>
199
200 <FormField label="Tax identification number" error={errors.taxId}>
201 <Input
202 name="taxId"
203 autoComplete="off"
204 value={values.taxId}
205 onChange={(event) =>
206 setValue("taxId", event.currentTarget.value)
207 }
208 />
209 </FormField>
210
211 <FormField label="Nationality" error={errors.nationality}>
212 <Select
213 name="nationality"
214 placeholder="Choose a country"
215 options={countryOptions}
216 value={values.nationality}
217 onValueChange={(value) => setValue("nationality", value)}
218 />
219 </FormField>
220
221 <FormField
222 label="Country of residence"
223 error={errors.countryOfResidence}
224 >
225 <Select
226 name="countryOfResidence"
227 placeholder="Choose a country"
228 options={countryOptions}
229 value={values.countryOfResidence}
230 onValueChange={(value) =>
231 setValue("countryOfResidence", value)
232 }
233 />
234 </FormField>
235
236 <FormField label="Identity document type" error={errors.documentType}>
237 <Select
238 name="documentType"
239 placeholder="Choose a document type"
240 options={documentOptions}
241 value={values.documentType}
242 onValueChange={(value) => setValue("documentType", value)}
243 />
244 </FormField>
245
246 <FormField label="Document number" error={errors.documentNumber}>
247 <Input
248 name="documentNumber"
249 autoComplete="off"
250 value={values.documentNumber}
251 onChange={(event) =>
252 setValue("documentNumber", event.currentTarget.value)
253 }
254 />
255 </FormField>
256
257 <FormField
258 label="Politically exposed person"
259 helperText="A politically exposed person holds, or has recently held, a prominent public function."
260 error={errors.politicallyExposed}
261 >
262 <Select
263 name="politicallyExposed"
264 placeholder="Choose an answer"
265 options={pepOptions}
266 value={values.politicallyExposed}
267 onValueChange={(value) =>
268 setValue("politicallyExposed", value)
269 }
270 />
271 </FormField>
272 </div>
273
274 <div className={actions}>
275 <Button type="submit">Continue</Button>
276 </div>
277 </div>
278 </CardBody>
279 </form>
280 )}
281 </Card>
282 </div>
283 </div>
284 );
285 }
286