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 9 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 list_files, read_file 3,757 65 $0.0012 1 docs-list 4,094 51 $0.0013 2 docs-show, docs-show 958 68 $0.0004 3
e02ef3974528
Output cap The provider's default 4 import { css } from "styled-system/css";
5 import {
6 Badge,
7 Button,
8 Card,
9 CardBody,
10 CardDescription,
11 CardFooter,
12 CardHeader,
13 CardTitle,
14 FormField,
15 Input,
16 Select,
17 } from "@vektos/ds";
18 import data from "./fixture.json";
19
20 type FieldName =
21 | "dateOfBirth"
22 | "nationality"
23 | "countryOfResidence"
24 | "taxId"
25 | "documentType"
26 | "documentNumber"
27 | "pep";
28
29 type FormValues = Record<FieldName, string>;
30 type FormErrors = Partial<Record<FieldName, string>>;
31
32 const emptyValues: FormValues = {
33 dateOfBirth: "",
34 nationality: "",
35 countryOfResidence: "",
36 taxId: "",
37 documentType: "",
38 documentNumber: "",
39 pep: "",
40 };
41
42 const errorMessages: Record<FieldName, string> = {
43 dateOfBirth: "Enter the date of birth.",
44 nationality: "Choose a nationality.",
45 countryOfResidence: "Choose a country of residence.",
46 taxId: "Enter the tax identification number.",
47 documentType: "Choose the type of identity document.",
48 documentNumber: "Enter the document number.",
49 pep: "Say whether the customer is a politically exposed person.",
50 };
51
52 const countryOptions = data.countries.map((country) => ({
53 label: country.name,
54 value: country.code,
55 }));
56
57 const documentTypeOptions = data.documentTypes.map((documentType) => ({
58 label: documentType.label,
59 value: documentType.value,
60 }));
61
62 const pepOptions = [
63 { label: "Yes", value: "yes" },
64 { label: "No", value: "no" },
65 ];
66
67 const { firstName, lastName, email } = data.customer;
68 const fullName = `${firstName} ${lastName}`;
69 const formId = "identity-verification";
70
71 export default function Page() {
72 const [values, setValues] = useState<FormValues>(emptyValues);
73 const [errors, setErrors] = useState<FormErrors>({});
74 const [submitted, setSubmitted] = useState(false);
75
76 const update = (field: FieldName, value: string) => {
77 setValues((previous) => ({ ...previous, [field]: value }));
78 setErrors((previous) => {
79 if (!previous[field]) return previous;
80 const next = { ...previous };
81 delete next[field];
82 return next;
83 });
84 };
85
86 const selected = (field: FieldName) => values[field] || undefined;
87
88 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
89 event.preventDefault();
90
91 const nextErrors: FormErrors = {};
92 for (const field of Object.keys(emptyValues) as FieldName[]) {
93 if (values[field].trim() === "") nextErrors[field] = errorMessages[field];
94 }
95
96 setErrors(nextErrors);
97 if (Object.keys(nextErrors).length === 0) setSubmitted(true);
98 };
99
100 return (
101 <div
102 className={`vektos ${css({
103 color: "fg.default",
104 minHeight: "100vh",
105 p: { base: "4", sm: "8" },
106 })}`}
107 >
108 <div className={css({ maxWidth: "720px", mx: "auto" })}>
109 <Card>
110 <CardHeader>
111 <CardTitle>Identity verification</CardTitle>
112 <CardDescription>
113 Step 2 of 3. We check these details before the account is opened.
114 </CardDescription>
115 </CardHeader>
116
117 {submitted ? (
118 <CardBody>
119 <div className={css({ display: "grid", gap: "4" })}>
120 <div>
121 <Badge tone="warning">In review</Badge>
122 </div>
123 <p className={css({ fontSize: "lg", fontWeight: "semibold" })}>
124 Your details are being reviewed
125 </p>
126 <p className={css({ color: "fg.muted" })}>
127 Thanks, {firstName}. We are checking the identity details you sent for{" "}
128 {email}. This usually takes one business day, and we will email you as
129 soon as the account is ready.
130 </p>
131 </div>
132 </CardBody>
133 ) : (
134 <>
135 <CardBody>
136 <div className={css({ display: "grid", gap: "6" })}>
137 <section className={css({ display: "grid", gap: "2" })}>
138 <p
139 className={css({
140 fontSize: "sm",
141 fontWeight: "semibold",
142 color: "fg.muted",
143 })}
144 >
145 Customer
146 </p>
147 <dl
148 className={css({
149 display: "grid",
150 gap: "4",
151 gridTemplateColumns: {
152 base: "1fr",
153 sm: "repeat(2, minmax(0, 1fr))",
154 },
155 })}
156 >
157 <div className={css({ display: "grid", gap: "1" })}>
158 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>
159 Full name
160 </dt>
161 <dd className={css({ fontWeight: "medium" })}>{fullName}</dd>
162 </div>
163 <div className={css({ display: "grid", gap: "1" })}>
164 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>
165 Email
166 </dt>
167 <dd className={css({ fontWeight: "medium" })}>{email}</dd>
168 </div>
169 </dl>
170 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
171 Taken from the application. Contact us if either of these is wrong.
172 </p>
173 </section>
174
175 <form
176 id={formId}
177 noValidate
178 onSubmit={handleSubmit}
179 className={css({
180 display: "grid",
181 gap: "4",
182 gridTemplateColumns: {
183 base: "1fr",
184 sm: "repeat(2, minmax(0, 1fr))",
185 },
186 })}
187 >
188 <FormField label="Date of birth" error={errors.dateOfBirth} required>
189 <Input
190 type="date"
191 name="dateOfBirth"
192 autoComplete="bday"
193 value={values.dateOfBirth}
194 onChange={(event) => update("dateOfBirth", event.target.value)}
195 />
196 </FormField>
197
198 <FormField label="Nationality" error={errors.nationality} required>
199 <Select
200 name="nationality"
201 placeholder="Choose a nationality"
202 options={countryOptions}
203 value={selected("nationality")}
204 onValueChange={(value) => update("nationality", value)}
205 />
206 </FormField>
207
208 <FormField
209 label="Country of residence"
210 error={errors.countryOfResidence}
211 required
212 >
213 <Select
214 name="countryOfResidence"
215 placeholder="Choose a country"
216 options={countryOptions}
217 value={selected("countryOfResidence")}
218 onValueChange={(value) => update("countryOfResidence", value)}
219 />
220 </FormField>
221
222 <FormField
223 label="Tax identification number"
224 helperText="TIN or national tax code."
225 error={errors.taxId}
226 required
227 >
228 <Input
229 name="taxId"
230 autoComplete="off"
231 value={values.taxId}
232 onChange={(event) => update("taxId", event.target.value)}
233 />
234 </FormField>
235
236 <FormField
237 label="Identity document"
238 error={errors.documentType}
239 required
240 >
241 <Select
242 name="documentType"
243 placeholder="Choose a document type"
244 options={documentTypeOptions}
245 value={selected("documentType")}
246 onValueChange={(value) => update("documentType", value)}
247 />
248 </FormField>
249
250 <FormField
251 label="Document number"
252 helperText="As printed on the document."
253 error={errors.documentNumber}
254 required
255 >
256 <Input
257 name="documentNumber"
258 autoComplete="off"
259 value={values.documentNumber}
260 onChange={(event) => update("documentNumber", event.target.value)}
261 />
262 </FormField>
263
264 <FormField
265 label="Politically exposed person"
266 helperText="A person with a prominent public role, or a close associate of one."
267 error={errors.pep}
268 required
269 >
270 <Select
271 name="pep"
272 placeholder="Choose yes or no"
273 options={pepOptions}
274 value={selected("pep")}
275 onValueChange={(value) => update("pep", value)}
276 />
277 </FormField>
278 </form>
279 </div>
280 </CardBody>
281
282 <CardFooter>
283 <Button type="submit" form={formId}>
284 Submit for review
285 </Button>
286 </CardFooter>
287 </>
288 )}
289 </Card>
290 </div>
291 </div>
292 );
293 }
294
raw-values/raw-length 2 design-system typecheck/TS2769 2 quality 4 docs-show, docs-show 1,565 154 $0.0007
6 docs-show-story, docs-show-story 876 449 $0.0009
7 write_file 802 5,273 $0.0066
8 write_file 5,328 2,388 $0.0045
9 get-storybook-story-instructions, stories-changed 2,617 265 $0.0012
10 stories-find-by-component 2,246 419 $0.0013
11 docs-show-story 654 701 $0.0012
12 write_file 965 2,166 $0.0030
13 stories-preview 2,384 191 $0.0011