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 11 counted, under 9 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 1,212 40 $0.0000 1 list_components 1,519 177 $0.0000 2 get_component 4,145 366 $0.0000 3
Output cap The provider's default 1
2
3 import { useState } from "react";
4 import {
5 FormField,
6 Input,
7 Select,
8 DatePicker,
9 RadioGroup,
10 RadioOption,
11 Button,
12 Stack,
13 } from "@vektos/ds";
14
15 import data from "./fixture.json";
16
17 interface Country {
18 code: string;
19 name: string;
20 }
21
22 interface DocType {
23 value: string;
24 label: string;
25 }
26
27 const {
28 customer: { firstName, lastName, email },
29 countries,
30 documentTypes,
31 } = data as {
32 customer: { firstName: string; lastName: string; email: string };
33 countries: Country[];
34 documentTypes: DocType[];
35 };
36
37 interface PageState {
38 dob: string;
39 nationality: string;
40 countryOfResidence: string;
41 tin: string;
42 docType: string;
43 docNumber: string;
44 pep: "yes" | "no" | null;
45 submitted: boolean;
46 errors: {
47 dob: string;
48 nationality: string;
49 countryOfResidence: string;
50 tin: string;
51 docType: string;
52 docNumber: string;
53 pep: string;
54 };
55 }
56
57 export default function Page() {
58 const [state, setState] = useState<PageState>({
59 dob: "",
60 nationality: "",
61 countryOfResidence: "",
62 tin: "",
63 docType: "",
64 docNumber: "",
65 pep: null,
66 submitted: false,
67 errors: {
68 dob: "",
69 nationality: "",
70 countryOfResidence: "",
71 tin: "",
72 docType: "",
73 docNumber: "",
74 pep: "",
75 },
76 });
77
78 const validate = (): boolean => {
79 const { dob, nationality, countryOfResidence, tin, docType, docNumber, pep } = state;
80 const newErrors = {
81 dob: "",
82 nationality: "",
83 countryOfResidence: "",
84 tin: "",
85 docType: "",
86 docNumber: "",
87 pep: "",
88 };
89 let valid = true;
90 if (!dob.trim()) { newErrors.dob = "Date of birth is required"; valid = false; }
91 if (!nationality.trim()) { newErrors.nationality = "Nationality is required"; valid = false; }
92 if (!countryOfResidence.trim()) { newErrors.countryOfResidence = "Country of residence is required"; valid = false; }
93 if (!tin.trim()) { newErrors.tin = "Tax identification number is required"; valid = false; }
94 if (!docType.trim()) { newErrors.docType = "Document type is required"; valid = false; }
95 if (!docNumber.trim()) { newErrors.docNumber = "Document number is required"; valid = false; }
96 if (!pep) { newErrors.pep = "Politically exposed person is required"; valid = false; }
97 setState((s) => ({ ...s, errors: newErrors }));
98 return valid;
99 };
100
101 const handleSubmit = (e: React.FormEvent) => {
102 e.preventDefault();
103 if (validate()) {
104 setState((s) => ({ ...s, submitted: true }));
105 }
106 };
107
108 if (state.submitted) {
109 return (
110 <Stack gap="md" align="center" justify="center" minH="100vh">
111 <p>Details are being reviewed.</p>
112 </Stack>
113 );
114 }
115
116 return (
117 <Stack gap="md" maxW="lg" marginX="auto" padding="md">
118 <h1>Identity verification</h1>
119 <p>
120 {firstName} {lastName} <a href={`mailto:${email}`}>{email}</a>
121 </p>
122
123 <form onSubmit={handleSubmit}>
124 {/* Date of birth */}
125 <FormField
126 label="Date of birth"
127 error={state.errors.dob}
128 >
129 <DatePicker
130 placeholder="YYYY-MM-DD"
131 value={state.dob || undefined}
132 onValueChange={(v) => setState((s) => ({ ...s, dob: v || "" }))}
133 />
134 </FormField>
135
136 {/* Nationality */}
137 <FormField
138 label="Nationality"
139 error={state.errors.nationality}
140 >
141 <Select
142 placeholder="Select nationality"
143 value={state.nationality || ""}
144 onValueChange={(v) => setState((s) => ({ ...s, nationality: v || "" }))}
145 options={countries.map((c) => ({ label: c.name, value: c.code }))}
146 />
147 </FormField>
148
149 {/* Country of residence */}
150 <FormField
151 label="Country of residence"
152 error={state.errors.countryOfResidence}
153 >
154 <Select
155 placeholder="Select country"
156 value={state.countryOfResidence || ""}
157 onValueChange={(v) => setState((s) => ({ ...s, countryOfResidence: v || "" }))}
158 options={countries.map((c) => ({ label: c.name, value: c.code }))}
159 />
160 </FormField>
161
162 {/* Tax identification number */}
163 <FormField
164 label="Tax identification number"
165 error={state.errors.tin}
166 >
167 <Input
168 placeholder="Enter TIN"
169 value={state.tin || ""}
170 onChange={(e) =>
171 setState((s) => ({ ...s, tin: e.target.value }))
172 }
173 />
174 </FormField>
175
176 {/* Type of identity document */}
177 <FormField
178 label="Type of identity document"
179 error={state.errors.docType}
180 >
181 <Select
182 placeholder="Select document type"
183 value={state.docType || ""}
184 onValueChange={(v) =>
185 setState((s) => ({ ...s, docType: v || "" }))
186 }
187 options={documentTypes.map((d) => ({
188 label: d.label,
189 value: d.value,
190 }))}
191 />
192 </FormField>
193
194 {/* Document number */}
195 <FormField
196 label="Document number"
197 error={state.errors.docNumber}
198 >
199 <Input
200 placeholder="Enter document number"
201 value={state.docNumber || ""}
202 onChange={(e) =>
203 setState((s) => ({ ...s, docNumber: e.target.value }))
204 }
205 />
206 </FormField>
207
208 {/* Politically exposed person */}
209 <RadioGroup
210 label="Are you a politically exposed person?"
211 value={state.pep || ""}
212 onValueChange={(v) =>
213 setState((s) => ({ ...s, pep: v === "yes" ? "yes" : v === "no" ? "no" : null }))
214 }
215 options={[
216 { label: "Yes", value: "yes" },
217 { label: "No", value: "no" },
218 ]}
219 required
220 />
221
222 <Button type="submit" variant="solid" size="md">
223 Continue
224 </Button>
225 </form>
226 </Stack>
227 );
228 }
React does not recognize the `%s` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `%s` instead. If you accidentally passed it from a parent component, remove it from the DOM element. marginX marginx
page.tsx:1:1 React does not recognize the `%s` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `%s` instead. If you accidentally passed it from a parent component, remove it from the DOM element. maxW maxw lint/eslint(no-unused-vars) 1 quality raw-values/raw-length 1 design-system typecheck/TS2375 1 quality page.tsx:129:12 Type '{ placeholder: string; value: string | undefined; onValueChange: (v: string | null) => void; }' is not assignable to type 'DatePickerProps' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties. Every run that broke typecheck/TS2375 4 get_component 1,503 28 $0.0000
5 get_component 2,275 30 $0.0000
6 get_component 1,084 30 $0.0000
7 get_component 2,143 28 $0.0000
8 write_file 557 2,179 $0.0000