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 56 counted, under 7 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 486 26 $0.0000 1 read_file 526 34 $0.0000 2 list_files 306 29 $0.0000 3
Output cap 20,000 tokens a step 4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type Values = {
8 dob: string;
9 nationality: string;
10 residence: string;
11 taxId: string;
12 docType: string;
13 docNumber: string;
14 pep: string;
15 };
16
17 const initial: Values = {
18 dob: "",
19 nationality: "",
20 residence: "",
21 taxId: "",
22 docType: "",
23 docNumber: "",
24 pep: "",
25 };
26
27 export default function IdentityVerificationPage() {
28 const { customer, countries, documentTypes } = data;
29 const [values, setValues] = useState<Values>(initial);
30 const [errors, setErrors] = useState<Partial<Record<keyof Values, string>>>({});
31 const [submitted, setSubmitted] = useState(false);
32
33 const setField = (field: keyof Values, value: string) => {
34 setValues((prev) => ({ ...prev, [field]: value }));
35 setErrors((prev) => ({ ...prev, [field]: undefined }));
36 };
37
38 const validate = () => {
39 const next: Partial<Record<keyof Values, string>> = {};
40 (Object.keys(values) as (keyof Values)[]).forEach((key) => {
41 if (!values[key].trim()) {
42 next[key] = "This field is required.";
43 }
44 });
45 return next;
46 };
47
48 const handleSubmit = (e: React.FormEvent) => {
49 e.preventDefault();
50 const next = validate();
51 setErrors(next);
52 if (Object.keys(next).length === 0) {
53 setSubmitted(true);
54 }
55 };
56
57 if (submitted) {
58 return (
59 <main className={css({ maxW: "640px", mx: "auto", p: "24px" })}>
60 <h1 className={css({ fontSize: "24px", fontWeight: "700", mb: "16px" })}>
61 Identity verification
62 </h1>
63 <p className={css({ color: "#15803d" })}>Your details are being reviewed.</p>
64 </main>
65 );
66 }
67
68 const fullName = `${customer.firstName} ${customer.lastName}`;
69
70 return (
71 <main className={css({ maxW: "640px", mx: "auto", p: "24px" })}>
72 <h1 className={css({ fontSize: "24px", fontWeight: "700", mb: "16px" })}>
73 Identity verification
74 </h1>
75
76 <form onSubmit={handleSubmit} className={css({ display: "flex", flexDirection: "column", gap: "16px" })}>
77 <div className={css({ display: "flex", flexDirection: "column", gap: "4px" })}>
78 <label htmlFor="fullName">Full name</label>
79 <input id="fullName" value={fullName} disabled readOnly aria-readonly="true" />
80 </div>
81
82 <div className={css({ display: "flex", flexDirection: "column", gap: "4px" })}>
83 <label htmlFor="email">Email</label>
84 <input id="email" value={customer.email} disabled readOnly aria-readonly="true" />
85 </div>
86
87 <div className={css({ display: "flex", flexDirection: "column", gap: "4px" })}>
88 <label htmlFor="dob">Date of birth</label>
89 <input
90 id="dob"
91 type="date"
92 value={values.dob}
93 aria-invalid={!!errors.dob}
94 onChange={(e) => setField("dob", e.target.value)}
95 />
96 {errors.dob && <span id="dob-error" className={css({ color: "#dc2626", fontSize: "14px" })}>{errors.dob}</span>}
97 </div>
98
99 <div className={css({ display: "flex", flexDirection: "column", gap: "4px" })}>
100 <label htmlFor="nationality">Nationality</label>
101 <select
102 id="nationality"
103 value={values.nationality}
104 aria-invalid={!!errors.nationality}
105 onChange={(e) => setField("nationality", e.target.value)}
106 >
107 <option value="">Select...</option>
108 {countries.map((c) => (
109 <option key={c.code} value={c.code}>
110 {c.name}
111 </option>
112 ))}
113 </select>
114 {errors.nationality && (
115 <span className={css({ color: "#dc2626", fontSize: "14px" })}>{errors.nationality}</span>
116 )}
117 </div>
118
119 <div className={css({ display: "flex", flexDirection: "column", gap: "4px" })}>
120 <label htmlFor="residence">Country of residence</label>
121 <select
122 id="residence"
123 value={values.residence}
124 aria-invalid={!!errors.residence}
125 onChange={(e) => setField("residence", e.target.value)}
126 >
127 <option value="">Select...</option>
128 {countries.map((c) => (
129 <option key={c.code} value={c.code}>
130 {c.name}
131 </option>
132 ))}
133 </select>
134 {errors.residence && (
135 <span className={css({ color: "#dc2626", fontSize: "14px" })}>{errors.residence}</span>
136 )}
137 </div>
138
139 <div className={css({ display: "flex", flexDirection: "column", gap: "4px" })}>
140 <label htmlFor="taxId">Tax identification number</label>
141 <input
142 id="taxId"
143 value={values.taxId}
144 aria-invalid={!!errors.taxId}
145 onChange={(e) => setField("taxId", e.target.value)}
146 />
147 {errors.taxId && <span className={css({ color: "#dc2626", fontSize: "14px" })}>{errors.taxId}</span>}
148 </div>
149
150 <div className={css({ display: "flex", flexDirection: "column", gap: "4px" })}>
151 <label htmlFor="docType">Type of identity document</label>
152 <select
153 id="docType"
154 value={values.docType}
155 aria-invalid={!!errors.docType}
156 onChange={(e) => setField("docType", e.target.value)}
157 >
158 <option value="">Select...</option>
159 {documentTypes.map((d) => (
160 <option key={d.value} value={d.value}>
161 {d.label}
162 </option>
163 ))}
164 </select>
165 {errors.docType && (
166 <span className={css({ color: "#dc2626", fontSize: "14px" })}>{errors.docType}</span>
167 )}
168 </div>
169
170 <div className={css({ display: "flex", flexDirection: "column", gap: "4px" })}>
171 <label htmlFor="docNumber">Document number</label>
172 <input
173 id="docNumber"
174 value={values.docNumber}
175 aria-invalid={!!errors.docNumber}
176 onChange={(e) => setField("docNumber", e.target.value)}
177 />
178 {errors.docNumber && (
179 <span className={css({ color: "#dc2626", fontSize: "14px" })}>{errors.docNumber}</span>
180 )}
181 </div>
182
183 <div className={css({ display: "flex", flexDirection: "column", gap: "4px" })}>
184 <label htmlFor="pep">Politically exposed person</label>
185 <select
186 id="pep"
187 value={values.pep}
188 aria-invalid={!!errors.pep}
189 onChange={(e) => setField("pep", e.target.value)}
190 >
191 <option value="">Select...</option>
192 <option value="yes">Yes</option>
193 <option value="no">No</option>
194 </select>
195 <div className={css({ display: "flex", gap: "12px" })}>
196 <label>
197 <input
198 type="radio"
199 name="pepRadio"
200 value="yes"
201 checked={values.pep === "yes"}
202 onChange={() => setField("pep", "yes")}
203 />{" "}
204 Yes
205 </label>
206 <label>
207 <input
208 type="radio"
209 name="pepRadio"
210 value="no"
211 checked={values.pep === "no"}
212 onChange={() => setField("pep", "no")}
213 />{" "}
214 No
215 </label>
216 </div>
217 {errors.pep && <span className={css({ color: "#dc2626", fontSize: "14px" })}>{errors.pep}</span>}
218 </div>
219
220 <button type="submit" className={css({ alignSelf: "flex-start", px: "16px", py: "8px", bg: "#2563eb", color: "#ffffff", borderRadius: "6px" })}>
221 Submit
222 </button>
223 </form>
224 </main>
225 );
226 }
227
`16px` is a raw length. Use a token.
components/native-element 12 design-system page.tsx:79:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:84:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:89:11 · <input> `<input>` has a design-system equivalent: use `DatePicker` from `@vektos/ds`. page.tsx:101:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:121:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:141:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:152:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:172:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:185:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:197:15 · <input> `<input>` has a design-system equivalent: use `RadioGroup` from `@vektos/ds`. page.tsx:207:15 · <input> `<input>` has a design-system equivalent: use `RadioGroup` from `@vektos/ds`. page.tsx:220:9 · <button> `<button>` has a design-system equivalent: use `Button` from `@vektos/ds`. Every run that broke components/native-element typecheck/TS2769 0 quality 8 read_file 1,218 100 $0.0000
10 write_file 122 6,475 $0.0000
11 write_file 7,005 2,515 $0.0000
12 write_file 2,568 2,555 $0.0000