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 read_file, docs-list 5,415 134 $0.0006 1 docs-show, docs-show, docs-show, docs-show, docs-show 6,359 230 $0.0008 2 write_file 10,426 3,915 $0.0030
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 emptyValues: Values = {
31 dateOfBirth: "",
32 nationality: "",
33 countryOfResidence: "",
34 taxId: "",
35 documentType: "",
36 documentNumber: "",
37 politicallyExposed: "",
38 };
39
40 const labels: Record<FieldKey, string> = {
41 dateOfBirth: "Date of birth",
42 nationality: "Nationality",
43 countryOfResidence: "Country of residence",
44 taxId: "Tax identification number",
45 documentType: "Type of identity document",
46 documentNumber: "Document number",
47 politicallyExposed: "Politically exposed person",
48 };
49
50 const countryOptions = data.countries.map((country) => ({
51 label: country.name,
52 value: country.code,
53 }));
54
55 const documentTypeOptions = data.documentTypes.map((type) => ({
56 label: type.label,
57 value: type.value,
58 }));
59
60 const pepOptions = [
61 { label: "Yes", value: "yes" },
62 { label: "No", value: "no" },
63 ];
64
65 const { firstName, lastName, email } = data.customer;
66
67 export default function IdentityVerificationPage() {
68 const [values, setValues] = useState<Values>(emptyValues);
69 const [errors, setErrors] = useState<Partial<Record<FieldKey, string>>>({});
70 const [submitted, setSubmitted] = useState(false);
71
72 const update = (key: FieldKey, value: string) => {
73 setValues((current) => ({ ...current, [key]: value }));
74 setErrors((current) => {
75 if (!current[key]) return current;
76 const next = { ...current };
77 delete next[key];
78 return next;
79 });
80 };
81
82 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
83 event.preventDefault();
84
85 const nextErrors: Partial<Record<FieldKey, string>> = {};
86 (Object.keys(values) as FieldKey[]).forEach((key) => {
87 if (values[key].trim() === "") {
88 nextErrors[key] = `${labels[key]} is required.`;
89 }
90 });
91
92 setErrors(nextErrors);
93 if (Object.keys(nextErrors).length === 0) {
94 setSubmitted(true);
95 }
96 };
97
98 if (submitted) {
99 return (
100 <main className={css({ maxWidth: "560px", margin: "0 auto", padding: "6" })}>
101 <Card>
102 <CardHeader>
103 <CardTitle>Identity verification</CardTitle>
104 <CardDescription>Your details are being reviewed.</CardDescription>
105 </CardHeader>
106 <CardBody>
107 <p>
108 Thank you, {firstName}. We are reviewing your identity details and will
109 contact you at {email} once the check is complete.
110 </p>
111 </CardBody>
112 </Card>
113 </main>
114 );
115 }
116
117 return (
118 <main className={css({ maxWidth: "560px", margin: "0 auto", padding: "6" })}>
119 <Card>
120 <CardHeader>
121 <CardTitle>Identity verification</CardTitle>
122 <CardDescription>
123 Confirm your identity to finish opening your account.
124 </CardDescription>
125 </CardHeader>
126 <form noValidate onSubmit={handleSubmit}>
127 <CardBody>
128 <div className={css({ marginBlockEnd: "6" })}>
129 <p className={css({ fontWeight: "semibold" })}>
130 {firstName} {lastName}
131 </p>
132 <p>{email}</p>
133 </div>
134
135 <div className={css({ display: "grid", gap: "4" })}>
136 <FormField
137 label={labels.dateOfBirth}
138 required
139 error={errors.dateOfBirth}
140 >
141 <Input
142 type="date"
143 value={values.dateOfBirth}
144 onChange={(event) => update("dateOfBirth", event.target.value)}
145 />
146 </FormField>
147
148 <FormField
149 label={labels.nationality}
150 required
151 error={errors.nationality}
152 >
153 <Select
154 placeholder="Select a country"
155 options={countryOptions}
156 value={values.nationality}
157 onValueChange={(value) => update("nationality", value)}
158 />
159 </FormField>
160
161 <FormField
162 label={labels.countryOfResidence}
163 required
164 error={errors.countryOfResidence}
165 >
166 <Select
167 placeholder="Select a country"
168 options={countryOptions}
169 value={values.countryOfResidence}
170 onValueChange={(value) => update("countryOfResidence", value)}
171 />
172 </FormField>
173
174 <FormField label={labels.taxId} required error={errors.taxId}>
175 <Input
176 value={values.taxId}
177 onChange={(event) => update("taxId", event.target.value)}
178 />
179 </FormField>
180
181 <FormField
182 label={labels.documentType}
183 required
184 error={errors.documentType}
185 >
186 <Select
187 placeholder="Select a document type"
188 options={documentTypeOptions}
189 value={values.documentType}
190 onValueChange={(value) => update("documentType", value)}
191 />
192 </FormField>
193
194 <FormField
195 label={labels.documentNumber}
196 required
197 error={errors.documentNumber}
198 >
199 <Input
200 value={values.documentNumber}
201 onChange={(event) => update("documentNumber", event.target.value)}
202 />
203 </FormField>
204
205 <FormField
206 label={labels.politicallyExposed}
207 required
208 error={errors.politicallyExposed}
209 >
210 <Select
211 placeholder="Select an answer"
212 options={pepOptions}
213 value={values.politicallyExposed}
214 onValueChange={(value) => update("politicallyExposed", value)}
215 />
216 </FormField>
217 </div>
218 </CardBody>
219 <CardFooter>
220 <Button type="submit" variant="solid">
221 Continue
222 </Button>
223 </CardFooter>
224 </form>
225 </Card>
226 </main>
227 );
228 }
229
No overload matches this call.