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 2 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, list_files 1,581 157 $0.0002 1 get_component, get_component, get_component, get_component, get_component, list_tokens 4,407 254 $0.0006 2 write_file 9,566 5,233 $0.0036
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 const FIELDS = [
20 "dateOfBirth",
21 "nationality",
22 "countryOfResidence",
23 "taxId",
24 "documentType",
25 "documentNumber",
26 "politicallyExposed",
27 ] as const;
28
29 type FieldName = (typeof FIELDS)[number];
30 type FieldErrors = Partial<Record<FieldName, string>>;
31
32 const ERROR_MESSAGES: Record<FieldName, string> = {
33 dateOfBirth: "Enter your date of birth.",
34 nationality: "Choose your nationality.",
35 countryOfResidence: "Choose your country of residence.",
36 taxId: "Enter your tax identification number.",
37 documentType: "Choose the type of identity document.",
38 documentNumber: "Enter your document number.",
39 politicallyExposed: "Answer whether you are a politically exposed person.",
40 };
41
42 const countryOptions = data.countries.map((country) => ({
43 label: country.name,
44 value: country.code,
45 }));
46
47 const documentOptions = data.documentTypes.map((type) => ({
48 label: type.label,
49 value: type.value,
50 }));
51
52 const pepOptions = [
53 { label: "Yes", value: "yes" },
54 { label: "No", value: "no" },
55 ];
56
57 const pageStyles = css({
58 minHeight: "100vh",
59 bg: "bg.canvas",
60 color: "fg.default",
61 display: "flex",
62 justifyContent: "center",
63 alignItems: "flex-start",
64 padding: "6",
65 });
66
67 const containerStyles = css({ width: "full", maxWidth: "lg" });
68
69 const summaryGridStyles = css({
70 display: "grid",
71 gridTemplateColumns: { base: "1fr", md: "1fr 1fr" },
72 gap: "4",
73 });
74
75 const fieldsGridStyles = css({
76 display: "grid",
77 gridTemplateColumns: { base: "1fr", md: "1fr 1fr" },
78 gap: "4",
79 });
80
81 const sectionTitleStyles = css({
82 fontSize: "sm",
83 fontWeight: "semibold",
84 color: "fg.default",
85 marginBlockStart: "6",
86 marginBlockEnd: "3",
87 });
88
89 const firstSectionTitleStyles = css({
90 fontSize: "sm",
91 fontWeight: "semibold",
92 color: "fg.default",
93 marginBlockStart: "6",
94 marginBlockEnd: "3",
95 });
96
97 export default function IdentityVerificationPage() {
98 const [errors, setErrors] = useState<FieldErrors>({});
99 const [submitted, setSubmitted] = useState(false);
100
101 function handleSubmit(event: FormEvent<HTMLFormElement>) {
102 event.preventDefault();
103 const form = new FormData(event.currentTarget);
104 const nextErrors: FieldErrors = {};
105
106 for (const field of FIELDS) {
107 const value = form.get(field);
108 if (typeof value !== "string" || value.trim() === "") {
109 nextErrors[field] = ERROR_MESSAGES[field];
110 }
111 }
112
113 setErrors(nextErrors);
114 if (Object.keys(nextErrors).length === 0) {
115 setSubmitted(true);
116 }
117 }
118
119 return (
120 <div className={`vektos ${pageStyles}`}>
121 <div className={containerStyles}>
122 {submitted ? (
123 <Card>
124 <CardHeader>
125 <CardTitle>Your details are being reviewed</CardTitle>
126 <CardDescription>
127 Thanks, {data.customer.firstName}. We are checking your identity
128 details and will let you know once the review is complete.
129 </CardDescription>
130 </CardHeader>
131 </Card>
132 ) : (
133 <Card>
134 <CardHeader>
135 <CardTitle>Identity verification</CardTitle>
136 <CardDescription>
137 Confirm your identity to finish opening your account. All fields
138 are required.
139 </CardDescription>
140 </CardHeader>
141
142 <form noValidate onSubmit={handleSubmit}>
143 <CardBody>
144 <div className={summaryGridStyles}>
145 <FormField label="Full name">
146 <Input
147 disabled
148 defaultValue={`${data.customer.firstName} ${data.customer.lastName}`}
149 />
150 </FormField>
151 <FormField label="Email">
152 <Input disabled defaultValue={data.customer.email} />
153 </FormField>
154 </div>
155
156 <h3 className={firstSectionTitleStyles}>Personal details</h3>
157 <div className={fieldsGridStyles}>
158 <FormField label="Date of birth" required error={errors.dateOfBirth}>
159 <Input type="date" name="dateOfBirth" required />
160 </FormField>
161 <FormField label="Nationality" required error={errors.nationality}>
162 <Select
163 name="nationality"
164 placeholder="Choose a country"
165 options={countryOptions}
166 />
167 </FormField>
168 <FormField
169 label="Country of residence"
170 required
171 error={errors.countryOfResidence}
172 >
173 <Select
174 name="countryOfResidence"
175 placeholder="Choose a country"
176 options={countryOptions}
177 />
178 </FormField>
179 <FormField label="Tax identification number" required error={errors.taxId}>
180 <Input name="taxId" required />
181 </FormField>
182 </div>
183
184 <h3 className={sectionTitleStyles}>Identity document</h3>
185 <div className={fieldsGridStyles}>
186 <FormField label="Document type" required error={errors.documentType}>
187 <Select
188 name="documentType"
189 placeholder="Choose a document type"
190 options={documentOptions}
191 />
192 </FormField>
193 <FormField label="Document number" required error={errors.documentNumber}>
194 <Input name="documentNumber" required />
195 </FormField>
196 </div>
197
198 <h3 className={sectionTitleStyles}>Political exposure</h3>
199 <div className={fieldsGridStyles}>
200 <FormField
201 label="Are you a politically exposed person?"
202 required
203 error={errors.politicallyExposed}
204 >
205 <Select
206 name="politicallyExposed"
207 placeholder="Choose an answer"
208 options={pepOptions}
209 />
210 </FormField>
211 </div>
212 </CardBody>
213
214 <CardFooter>
215 <Button type="submit">Submit for review</Button>
216 </CardFooter>
217 </form>
218 </Card>
219 )}
220 </div>
221 </div>
222 );
223 }
224
3 write_file 14,820 2,658 $0.0028