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 5 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,581 131 $0.0002 1 get_component, get_component, get_component, get_component, get_component, list_tokens 4,351 254 $0.0006 2 write_file 9,510 5,738 $0.0038
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 fieldKeys = Object.keys({
31 dateOfBirth: "",
32 nationality: "",
33 countryOfResidence: "",
34 taxId: "",
35 documentType: "",
36 documentNumber: "",
37 politicallyExposed: "",
38 } satisfies Values) as FieldKey[];
39
40 const emptyValues: Values = {
41 dateOfBirth: "",
42 nationality: "",
43 countryOfResidence: "",
44 taxId: "",
45 documentType: "",
46 documentNumber: "",
47 politicallyExposed: "",
48 };
49
50 const requiredMessages: Record<FieldKey, string> = {
51 dateOfBirth: "Enter your date of birth.",
52 nationality: "Choose your nationality.",
53 countryOfResidence: "Choose your country of residence.",
54 taxId: "Enter your tax identification number.",
55 documentType: "Choose the type of identity document.",
56 documentNumber: "Enter the document number.",
57 politicallyExposed: "Answer whether you are a politically exposed person.",
58 };
59
60 const countryOptions = data.countries.map((country) => ({
61 label: country.name,
62 value: country.code,
63 }));
64
65 const documentTypeOptions = data.documentTypes.map((type) => ({
66 label: type.label,
67 value: type.value,
68 }));
69
70 const pepOptions = [
71 { label: "No", value: "no" },
72 { label: "Yes", value: "yes" },
73 ];
74
75 const fullName = `${data.customer.firstName} ${data.customer.lastName}`;
76
77 export default function IdentityVerificationPage() {
78 const [values, setValues] = useState<Values>(emptyValues);
79 const [errors, setErrors] = useState<Partial<Record<FieldKey, string>>>({});
80 const [submitted, setSubmitted] = useState(false);
81
82 function update(key: FieldKey, value: string) {
83 setValues((current) => ({ ...current, [key]: value }));
84 setErrors((current) => ({ ...current, [key]: undefined }));
85 }
86
87 function handleSubmit(event: FormEvent<HTMLFormElement>) {
88 event.preventDefault();
89
90 const nextErrors: Partial<Record<FieldKey, string>> = {};
91 for (const key of fieldKeys) {
92 if (values[key].trim() === "") {
93 nextErrors[key] = requiredMessages[key];
94 }
95 }
96
97 setErrors(nextErrors);
98 if (Object.keys(nextErrors).length === 0) {
99 setSubmitted(true);
100 }
101 }
102
103 return (
104 <div
105 className={css({
106 minHeight: "100vh",
107 bg: "bg.canvas",
108 color: "fg.default",
109 py: "8",
110 px: "4",
111 })}
112 >
113 <main className={css({ maxWidth: "lg", mx: "auto" })}>
114 {submitted ? (
115 <Card>
116 <CardHeader>
117 <CardTitle>Details submitted</CardTitle>
118 <CardDescription>Identity verification</CardDescription>
119 </CardHeader>
120 <CardBody>
121 <p role="status" className={css({ fontSize: "md", lineHeight: "normal" })}>
122 Your identity details are being reviewed. We will let you know once the
123 review is complete.
124 </p>
125 </CardBody>
126 </Card>
127 ) : (
128 <Card>
129 <CardHeader>
130 <CardTitle>Identity verification</CardTitle>
131 <CardDescription>
132 Confirm your details to finish opening your account. Fields marked as
133 required must be filled in.
134 </CardDescription>
135 </CardHeader>
136
137 <CardBody>
138 <dl
139 className={css({
140 display: "grid",
141 gridTemplateColumns: "max-content 1fr",
142 columnGap: "4",
143 rowGap: "2",
144 fontSize: "sm",
145 mb: "6",
146 })}
147 >
148 <dt className={css({ color: "fg.muted" })}>Full name</dt>
149 <dd className={css({ margin: "0", fontWeight: "medium" })}>{fullName}</dd>
150 <dt className={css({ color: "fg.muted" })}>Email</dt>
151 <dd className={css({ margin: "0", fontWeight: "medium" })}>
152 {data.customer.email}
153 </dd>
154 </dl>
155
156 <form
157 noValidate
158 onSubmit={handleSubmit}
159 className={css({ display: "grid", gap: "4" })}
160 >
161 <FormField label="Date of birth" error={errors.dateOfBirth}>
162 <Input
163 type="date"
164 name="dateOfBirth"
165 required
166 value={values.dateOfBirth}
167 onChange={(event) => update("dateOfBirth", event.target.value)}
168 />
169 </FormField>
170
171 <FormField label="Nationality" error={errors.nationality}>
172 <Select
173 name="nationality"
174 placeholder="Choose a country"
175 options={countryOptions}
176 value={values.nationality}
177 onValueChange={(value) => update("nationality", value)}
178 />
179 </FormField>
180
181 <FormField label="Country of residence" error={errors.countryOfResidence}>
182 <Select
183 name="countryOfResidence"
184 placeholder="Choose a country"
185 options={countryOptions}
186 value={values.countryOfResidence}
187 onValueChange={(value) => update("countryOfResidence", value)}
188 />
189 </FormField>
190
191 <FormField label="Tax identification number" error={errors.taxId}>
192 <Input
193 name="taxId"
194 autoComplete="off"
195 required
196 value={values.taxId}
197 onChange={(event) => update("taxId", event.target.value)}
198 />
199 </FormField>
200
201 <FormField label="Type of identity document" error={errors.documentType}>
202 <Select
203 name="documentType"
204 placeholder="Choose a document type"
205 options={documentTypeOptions}
206 value={values.documentType}
207 onValueChange={(value) => update("documentType", value)}
208 />
209 </FormField>
210
211 <FormField label="Document number" error={errors.documentNumber}>
212 <Input
213 name="documentNumber"
214 autoComplete="off"
215 required
216 value={values.documentNumber}
217 onChange={(event) => update("documentNumber", event.target.value)}
218 />
219 </FormField>
220
221 <FormField
222 label="Politically exposed person"
223 helperText="Do you hold, or have you recently held, a prominent public function?"
224 error={errors.politicallyExposed}
225 >
226 <Select
227 name="politicallyExposed"
228 placeholder="Choose an answer"
229 options={pepOptions}
230 value={values.politicallyExposed}
231 onValueChange={(value) => update("politicallyExposed", value)}
232 />
233 </FormField>
234
235 <CardFooter>
236 <Button type="submit">Submit details</Button>
237 </CardFooter>
238 </form>
239 </CardBody>
240 </Card>
241 )}
242 </main>
243 </div>
244 );
245 }
246
raw-values/raw-length 1 design-system typecheck/TS2769 0 quality