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 6 counted, under 4 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 read_file, docs-list, read_file 5,415 180 $0.0006 1 docs-show, docs-show, docs-show, docs-show, docs-show 6,443 230 $0.0008 2 write_file 10,510 3,063 $0.0026
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 | "politicallyExposed";
27
28 type FormValues = Record<FieldName, string>;
29
30 const emptyValues: FormValues = {
31 dateOfBirth: "",
32 nationality: "",
33 countryOfResidence: "",
34 taxId: "",
35 documentType: "",
36 documentNumber: "",
37 politicallyExposed: "",
38 };
39
40 const countryOptions = data.countries.map((country) => ({
41 label: country.name,
42 value: country.code,
43 }));
44
45 const documentTypeOptions = data.documentTypes.map((type) => ({
46 label: type.label,
47 value: type.value,
48 }));
49
50 const pepOptions = [
51 { label: "No", value: "no" },
52 { label: "Yes", value: "yes" },
53 ];
54
55 const requiredMessage = "This field is required.";
56
57 export default function IdentityVerificationPage() {
58 const [values, setValues] = useState<FormValues>(emptyValues);
59 const [errors, setErrors] = useState<Partial<Record<FieldName, string>>>({});
60 const [submitted, setSubmitted] = useState(false);
61
62 const setField = (name: FieldName, value: string) => {
63 setValues((prev) => ({ ...prev, [name]: value }));
64 if (errors[name]) {
65 setErrors((prev) => {
66 const next = { ...prev };
67 delete next[name];
68 return next;
69 });
70 }
71 };
72
73 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
74 event.preventDefault();
75
76 const nextErrors: Partial<Record<FieldName, string>> = {};
77 (Object.keys(values) as FieldName[]).forEach((name) => {
78 if (values[name].trim() === "") {
79 nextErrors[name] = requiredMessage;
80 }
81 });
82
83 setErrors(nextErrors);
84 if (Object.keys(nextErrors).length === 0) {
85 setSubmitted(true);
86 }
87 };
88
89 const { firstName, lastName, email } = data.customer;
90
91 return (
92 <main
93 className={css({
94 minHeight: "100vh",
95 display: "flex",
96 justifyContent: "center",
97 alignItems: "flex-start",
98 padding: "8",
99 })}
100 >
101 <div className={css({ width: "100%", maxWidth: "2xl" })}>
102 <Card>
103 <CardHeader>
104 <CardTitle>Identity verification</CardTitle>
105 <CardDescription>
106 Confirm your details to finish opening your account.
107 </CardDescription>
108 </CardHeader>
109
110 {submitted ? (
111 <CardBody>
112 <p
113 role="status"
114 className={css({ fontSize: "lg", fontWeight: "semibold" })}
115 >
116 Your details are being reviewed.
117 </p>
118 <p className={css({ marginBlockStart: "2", color: "fg.muted" })}>
119 We will let you know once the review is complete.
120 </p>
121 </CardBody>
122 ) : (
123 <form noValidate onSubmit={handleSubmit}>
124 <CardBody>
125 <dl
126 className={css({
127 display: "grid",
128 gridTemplateColumns: "max-content 1fr",
129 gap: "2",
130 marginBlockEnd: "6",
131 })}
132 >
133 <dt className={css({ color: "fg.muted" })}>Full name</dt>
134 <dd>
135 {firstName} {lastName}
136 </dd>
137 <dt className={css({ color: "fg.muted" })}>Email</dt>
138 <dd>{email}</dd>
139 </dl>
140
141 <div
142 className={css({
143 display: "grid",
144 gridTemplateColumns: { base: "1fr", md: "1fr 1fr" },
145 gap: "4",
146 })}
147 >
148 <FormField
149 label="Date of birth"
150 required
151 error={errors.dateOfBirth}
152 >
153 <Input
154 type="date"
155 name="dateOfBirth"
156 value={values.dateOfBirth}
157 onChange={(event) =>
158 setField("dateOfBirth", event.currentTarget.value)
159 }
160 />
161 </FormField>
162
163 <FormField
164 label="Tax identification number"
165 required
166 error={errors.taxId}
167 >
168 <Input
169 name="taxId"
170 value={values.taxId}
171 onChange={(event) =>
172 setField("taxId", event.currentTarget.value)
173 }
174 />
175 </FormField>
176
177 <FormField
178 label="Nationality"
179 required
180 error={errors.nationality}
181 >
182 <Select
183 name="nationality"
184 placeholder="Select a country"
185 options={countryOptions}
186 value={values.nationality}
187 onValueChange={(value) => setField("nationality", value)}
188 />
189 </FormField>
190
191 <FormField
192 label="Country of residence"
193 required
194 error={errors.countryOfResidence}
195 >
196 <Select
197 name="countryOfResidence"
198 placeholder="Select a country"
199 options={countryOptions}
200 value={values.countryOfResidence}
201 onValueChange={(value) =>
202 setField("countryOfResidence", value)
203 }
204 />
205 </FormField>
206
207 <FormField
208 label="Identity document type"
209 required
210 error={errors.documentType}
211 >
212 <Select
213 name="documentType"
214 placeholder="Select a document type"
215 options={documentTypeOptions}
216 value={values.documentType}
217 onValueChange={(value) =>
218 setField("documentType", value)
219 }
220 />
221 </FormField>
222
223 <FormField
224 label="Document number"
225 required
226 error={errors.documentNumber}
227 >
228 <Input
229 name="documentNumber"
230 value={values.documentNumber}
231 onChange={(event) =>
232 setField("documentNumber", event.currentTarget.value)
233 }
234 />
235 </FormField>
236
237 <FormField
238 label="Politically exposed person?"
239 required
240 error={errors.politicallyExposed}
241 >
242 <Select
243 name="politicallyExposed"
244 placeholder="Select an answer"
245 options={pepOptions}
246 value={values.politicallyExposed}
247 onValueChange={(value) =>
248 setField("politicallyExposed", value)
249 }
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 </main>
265 );
266 }
267
lint/typescript(no-unsafe-type-assertion) 1 quality raw-values/raw-length 1 design-system