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 None. The run followed every rule that was checked.
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,773 130 $0.0002 1 get_component, get_component, get_component, get_component, get_component 4,542 229 $0.0006 2 list_tokens 7,933 381 $0.0010
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 | "residenceCountry"
23 | "taxId"
24 | "documentType"
25 | "documentNumber"
26 | "pep";
27
28 type Values = Record<FieldKey, string>;
29 type Errors = Partial<Record<FieldKey, string>>;
30
31 const initialValues: Values = {
32 dateOfBirth: "",
33 nationality: "",
34 residenceCountry: "",
35 taxId: "",
36 documentType: "",
37 documentNumber: "",
38 pep: "",
39 };
40
41 const fieldOrder: FieldKey[] = [
42 "dateOfBirth",
43 "nationality",
44 "residenceCountry",
45 "taxId",
46 "documentType",
47 "documentNumber",
48 "pep",
49 ];
50
51 const errorMessages: Record<FieldKey, string> = {
52 dateOfBirth: "Enter your date of birth.",
53 nationality: "Choose your nationality.",
54 residenceCountry: "Choose your country of residence.",
55 taxId: "Enter your tax identification number.",
56 documentType: "Choose the type of identity document.",
57 documentNumber: "Enter the document number.",
58 pep: "Tell us whether you are a politically exposed person.",
59 };
60
61 const countryOptions = data.countries.map((country) => ({
62 label: country.name,
63 value: country.code,
64 }));
65
66 const documentOptions = data.documentTypes.map((type) => ({
67 label: type.label,
68 value: type.value,
69 }));
70
71 const pepOptions = [
72 { label: "No", value: "no" },
73 { label: "Yes", value: "yes" },
74 ];
75
76 const pageStyles = css({
77 bg: "bg.canvas",
78 color: "fg.default",
79 py: "8",
80 px: "4",
81 });
82
83 const columnStyles = css({
84 display: "flex",
85 flexDirection: "column",
86 gap: "6",
87 width: "full",
88 maxWidth: "lg",
89 marginInline: "auto",
90 });
91
92 const summaryStyles = css({
93 display: "grid",
94 gridTemplateColumns: "max-content 1fr",
95 columnGap: "6",
96 rowGap: "2",
97 margin: "0",
98 fontSize: "sm",
99 });
100
101 const summaryTermStyles = css({
102 color: "fg.muted",
103 });
104
105 const summaryValueStyles = css({
106 margin: "0",
107 fontWeight: "medium",
108 });
109
110 const formStyles = css({
111 display: "flex",
112 flexDirection: "column",
113 gap: "4",
114 });
115
116 const headingStyles = css({
117 fontSize: "lg",
118 fontWeight: "semibold",
119 lineHeight: "tight",
120 });
121
122 export default function IdentityVerificationPage() {
123 const [values, setValues] = useState<Values>(initialValues);
124 const [errors, setErrors] = useState<Errors>({});
125 const [submitted, setSubmitted] = useState(false);
126
127 const { firstName, lastName, email } = data.customer;
128
129 function update(key: FieldKey, value: string) {
130 setValues((current) => ({ ...current, [key]: value }));
131 setErrors((current) => ({ ...current, [key]: undefined }));
132 }
133
134 function handleSubmit(event: FormEvent<HTMLFormElement>) {
135 event.preventDefault();
136
137 const nextErrors: Errors = {};
138 for (const key of fieldOrder) {
139 if (values[key].trim() === "") {
140 nextErrors[key] = errorMessages[key];
141 }
142 }
143
144 setErrors(nextErrors);
145
146 if (Object.keys(nextErrors).length === 0) {
147 setSubmitted(true);
148 }
149 }
150
151 return (
152 <main className={`vektos ${pageStyles}`}>
153 <div className={columnStyles}>
154 <h1 className={headingStyles}>Verify your identity</h1>
155
156 <Card>
157 <CardHeader>
158 <CardTitle>Account holder</CardTitle>
159 <CardDescription>These details come from your application and cannot be changed here.</CardDescription>
160 </CardHeader>
161 <CardBody>
162 <dl className={summaryStyles}>
163 <dt className={summaryTermStyles}>Full name</dt>
164 <dd className={summaryValueStyles}>
165 {firstName} {lastName}
166 </dd>
167 <dt className={summaryTermStyles}>Email</dt>
168 <dd className={summaryValueStyles}>{email}</dd>
169 </dl>
170 </CardBody>
171 </Card>
172
173 {submitted ? (
174 <Card>
175 <CardHeader>
176 <CardTitle>Your details are being reviewed</CardTitle>
177 <CardDescription>
178 Thank you, {firstName}. We are checking the identity details you provided. You will hear from us once
179 the review is complete.
180 </CardDescription>
181 </CardHeader>
182 </Card>
183 ) : (
184 <Card>
185 <CardHeader>
186 <CardTitle>Identity details</CardTitle>
187 <CardDescription>All fields are required.</CardDescription>
188 </CardHeader>
189 <form noValidate onSubmit={handleSubmit}>
190 <CardBody>
191 <div className={formStyles}>
192 <FormField label="Date of birth" error={errors.dateOfBirth}>
193 <Input
194 type="date"
195 name="dateOfBirth"
196 value={values.dateOfBirth}
197 onChange={(event) => update("dateOfBirth", event.target.value)}
198 />
199 </FormField>
200
201 <FormField label="Nationality" error={errors.nationality}>
202 <Select
203 name="nationality"
204 placeholder="Choose a country"
205 options={countryOptions}
206 value={values.nationality}
207 onValueChange={(value) => update("nationality", value)}
208 />
209 </FormField>
210
211 <FormField label="Country of residence" error={errors.residenceCountry}>
212 <Select
213 name="residenceCountry"
214 placeholder="Choose a country"
215 options={countryOptions}
216 value={values.residenceCountry}
217 onValueChange={(value) => update("residenceCountry", value)}
218 />
219 </FormField>
220
221 <FormField label="Tax identification number" error={errors.taxId}>
222 <Input
223 name="taxId"
224 autoComplete="off"
225 value={values.taxId}
226 onChange={(event) => update("taxId", event.target.value)}
227 />
228 </FormField>
229
230 <FormField label="Type of identity document" error={errors.documentType}>
231 <Select
232 name="documentType"
233 placeholder="Choose a document type"
234 options={documentOptions}
235 value={values.documentType}
236 onValueChange={(value) => update("documentType", value)}
237 />
238 </FormField>
239
240 <FormField label="Document number" error={errors.documentNumber}>
241 <Input
242 name="documentNumber"
243 autoComplete="off"
244 value={values.documentNumber}
245 onChange={(event) => update("documentNumber", event.target.value)}
246 />
247 </FormField>
248
249 <FormField label="Politically exposed person" error={errors.pep}>
250 <Select
251 name="pep"
252 placeholder="Choose an answer"
253 options={pepOptions}
254 value={values.pep}
255 onValueChange={(value) => update("pep", value)}
256 />
257 </FormField>
258 </div>
259 </CardBody>
260 <CardFooter>
261 <Button type="submit">Submit</Button>
262 </CardFooter>
263 </form>
264 </Card>
265 )}
266 </div>
267 </main>
268 );
269 }
270
4 check_code 14,632 2,918 $0.0029
5 write_file 17,588 2,860 $0.0032