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 1 rule. “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, list_files 5,415 160 $0.0006 1 docs-show, docs-show, docs-show, docs-show, docs-show 6,415 230 $0.0008 2 write_file 10,482 4,036 $0.0031
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 FormValues = Record<FieldKey, string>;
28 type FormErrors = Partial<Record<FieldKey, string>>;
29
30 const initialValues: FormValues = {
31 dateOfBirth: "",
32 nationality: "",
33 countryOfResidence: "",
34 taxId: "",
35 documentType: "",
36 documentNumber: "",
37 pep: "",
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 requiredMessages: Record<FieldKey, string> = {
56 dateOfBirth: "Enter your date of birth.",
57 nationality: "Select your nationality.",
58 countryOfResidence: "Select your country of residence.",
59 taxId: "Enter your tax identification number.",
60 documentType: "Select the type of identity document.",
61 documentNumber: "Enter your document number.",
62 pep: "Indicate whether you are a politically exposed person.",
63 };
64
65 const fieldOrder: FieldKey[] = [
66 "dateOfBirth",
67 "nationality",
68 "countryOfResidence",
69 "taxId",
70 "documentType",
71 "documentNumber",
72 "pep",
73 ];
74
75 export default function IdentityVerificationPage() {
76 const [values, setValues] = useState<FormValues>(initialValues);
77 const [errors, setErrors] = useState<FormErrors>({});
78 const [submitted, setSubmitted] = useState(false);
79
80 const updateField = (key: FieldKey, value: string) => {
81 setValues((prev) => ({ ...prev, [key]: value }));
82 setErrors((prev) => {
83 if (!prev[key]) return prev;
84 const next = { ...prev };
85 delete next[key];
86 return next;
87 });
88 };
89
90 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
91 event.preventDefault();
92
93 const nextErrors: FormErrors = {};
94 for (const key of fieldOrder) {
95 if (values[key].trim() === "") {
96 nextErrors[key] = requiredMessages[key];
97 }
98 }
99
100 setErrors(nextErrors);
101 if (Object.keys(nextErrors).length === 0) {
102 setSubmitted(true);
103 }
104 };
105
106 const { customer } = data;
107
108 if (submitted) {
109 return (
110 <main className={css({ maxWidth: "2xl", marginInline: "auto", padding: "6" })}>
111 <Card>
112 <CardHeader>
113 <CardTitle>Identity verification submitted</CardTitle>
114 <CardDescription>
115 Your details are being reviewed. We will let you know once the review is complete.
116 </CardDescription>
117 </CardHeader>
118 </Card>
119 </main>
120 );
121 }
122
123 return (
124 <main className={css({ maxWidth: "2xl", marginInline: "auto", padding: "6" })}>
125 <Card>
126 <CardHeader>
127 <CardTitle>Identity verification</CardTitle>
128 <CardDescription>
129 Confirm your identity to finish opening your account. Fields marked as required must be
130 completed.
131 </CardDescription>
132 </CardHeader>
133 <CardBody>
134 <dl
135 className={css({
136 display: "grid",
137 gridTemplateColumns: "max-content 1fr",
138 gap: "2",
139 marginBlockEnd: "6",
140 })}
141 >
142 <dt className={css({ color: "fg.muted" })}>Full name</dt>
143 <dd className={css({ fontWeight: "semibold" })}>
144 {customer.firstName} {customer.lastName}
145 </dd>
146 <dt className={css({ color: "fg.muted" })}>Email</dt>
147 <dd className={css({ fontWeight: "semibold" })}>{customer.email}</dd>
148 </dl>
149
150 <form
151 noValidate
152 onSubmit={handleSubmit}
153 className={css({ display: "flex", flexDirection: "column", gap: "5" })}
154 >
155 <FormField label="Date of birth" required error={errors.dateOfBirth}>
156 <Input
157 type="date"
158 name="dateOfBirth"
159 value={values.dateOfBirth}
160 onChange={(event) => updateField("dateOfBirth", event.target.value)}
161 />
162 </FormField>
163
164 <FormField label="Nationality" required error={errors.nationality}>
165 <Select
166 name="nationality"
167 placeholder="Select a country"
168 options={countryOptions}
169 value={values.nationality}
170 onValueChange={(value) => updateField("nationality", value)}
171 />
172 </FormField>
173
174 <FormField label="Country of residence" required error={errors.countryOfResidence}>
175 <Select
176 name="countryOfResidence"
177 placeholder="Select a country"
178 options={countryOptions}
179 value={values.countryOfResidence}
180 onValueChange={(value) => updateField("countryOfResidence", value)}
181 />
182 </FormField>
183
184 <FormField label="Tax identification number" required error={errors.taxId}>
185 <Input
186 name="taxId"
187 value={values.taxId}
188 onChange={(event) => updateField("taxId", event.target.value)}
189 />
190 </FormField>
191
192 <FormField label="Identity document type" required error={errors.documentType}>
193 <Select
194 name="documentType"
195 placeholder="Select a document type"
196 options={documentTypeOptions}
197 value={values.documentType}
198 onValueChange={(value) => updateField("documentType", value)}
199 />
200 </FormField>
201
202 <FormField label="Document number" required error={errors.documentNumber}>
203 <Input
204 name="documentNumber"
205 value={values.documentNumber}
206 onChange={(event) => updateField("documentNumber", event.target.value)}
207 />
208 </FormField>
209
210 <FormField
211 label="Politically exposed person"
212 required
213 error={errors.pep}
214 helperText="Are you a politically exposed person (PEP)?"
215 >
216 <Select
217 name="pep"
218 placeholder="Select an answer"
219 options={pepOptions}
220 value={values.pep}
221 onValueChange={(value) => updateField("pep", value)}
222 />
223 </FormField>
224
225 <div className={css({ display: "flex", justifyContent: "flex-end" })}>
226 <Button type="submit" variant="solid" size="md">
227 Submit for review
228 </Button>
229 </div>
230 </form>
231 </CardBody>
232 </Card>
233 </main>
234 );
235 }
236