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 23 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 692 15 $0.0001 1 list_files, list_components, list_tokens 3 56 $0.0003 2 read_file 3 19 $0.0002 3
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 FormValues = {
20 dateOfBirth: string;
21 nationality: string;
22 residence: string;
23 taxId: string;
24 documentType: string;
25 documentNumber: string;
26 pep: string;
27 };
28
29 const initialValues: FormValues = {
30 dateOfBirth: "",
31 nationality: "",
32 residence: "",
33 taxId: "",
34 documentType: "",
35 documentNumber: "",
36 pep: "",
37 };
38
39 const countries = data.countries.map((country) => ({ label: country.name, value: country.code }));
40 const documentTypes = data.documentTypes.map((document) => ({ label: document.label, value: document.value }));
41 const requiredError = "Please complete this field.";
42
43 export default function IdentityVerificationPage() {
44 const [values, setValues] = useState<FormValues>(initialValues);
45 const [submitted, setSubmitted] = useState(false);
46 const [reviewing, setReviewing] = useState(false);
47
48 const update = (field: keyof FormValues, value: string) => {
49 setValues((current) => ({ ...current, [field]: value }));
50 };
51
52 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
53 event.preventDefault();
54 setSubmitted(true);
55 if (Object.values(values).every((value) => value.trim().length > 0)) setReviewing(true);
56 };
57
58 const errorFor = (field: keyof FormValues) =>
59 submitted && !values[field].trim() ? requiredError : undefined;
60
61 return (
62 <main className={`vektos ${css({ minHeight: "full", bg: "bg.canvas", color: "fg.default" })}`}>
63 <div
64 className={css({
65 width: "full",
66 maxWidth: "sizes.3xl",
67 mx: "auto",
68 px: "4",
69 py: "8",
70 md: { px: "8", py: "8" },
71 })}
72 >
73 <div className={css({ mb: "6", display: "flex", alignItems: "center", gap: "2" })}>
74 <span aria-hidden="true" className={css({ width: "2", height: "2", rounded: "full", bg: "accent.default" })} />
75 <span className={css({ color: "fg.muted", fontSize: "sm", fontWeight: "medium" })}>
76 ACCOUNT OPENING <span aria-hidden="true">/</span> STEP 2 OF 3
77 </span>
78 </div>
79
80 <div className={css({ maxWidth: "sizes.2xl", mx: "auto" })}>
81 {reviewing ? (
82 <Card>
83 <CardBody>
84 <div
85 aria-hidden="true"
86 className={css({
87 width: "12",
88 height: "12",
89 mb: "6",
90 display: "grid",
91 placeItems: "center",
92 rounded: "full",
93 bg: "success.subtle",
94 color: "success.text",
95 fontSize: "lg",
96 fontWeight: "semibold",
97 })}
98 >
99 ✓
100 </div>
101 <h1 className={css({ mb: "2", fontSize: "lg", fontWeight: "semibold" })}>Your details are being reviewed</h1>
102 <p className={css({ color: "fg.muted", lineHeight: "relaxed" })}>
103 We’ve received your identity information. We’ll let you know when the review is complete.
104 </p>
105 </CardBody>
106 </Card>
107 ) : (
108 <>
109 <header className={css({ mb: "6" })}>
110 <p className={css({ mb: "2", color: "accent.default", fontSize: "sm", fontWeight: "semibold" })}>
111 VERIFY YOUR IDENTITY
112 </p>
113 <h1 className={css({ mb: "2", fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
114 A few details about you
115 </h1>
116 <p className={css({ color: "fg.muted", lineHeight: "relaxed" })}>
117 We’re required to collect these details to verify your identity and open your account.
118 </p>
119 </header>
120
121 <Card>
122 <CardHeader>
123 <CardTitle>Your personal details</CardTitle>
124 <CardDescription>Enter your details exactly as they appear on your identity document.</CardDescription>
125 </CardHeader>
126 <CardBody>
127 <section
128 aria-label="Known customer details"
129 className={css({
130 mb: "6",
131 display: "grid",
132 gridTemplateColumns: "1fr",
133 gap: "4",
134 rounded: "md",
135 bg: "bg.subtle",
136 p: "4",
137 sm: { gridTemplateColumns: "1fr 1fr" },
138 })}
139 >
140 <div>
141 <p className={css({ mb: "1", color: "fg.muted", fontSize: "xs", fontWeight: "medium" })}>FULL NAME</p>
142 <p className={css({ fontWeight: "medium" })}>{data.customer.firstName} {data.customer.lastName}</p>
143 </div>
144 <div>
145 <p className={css({ mb: "1", color: "fg.muted", fontSize: "xs", fontWeight: "medium" })}>EMAIL ADDRESS</p>
146 <p className={css({ fontWeight: "medium", overflowWrap: "anywhere" })}>{data.customer.email}</p>
147 </div>
148 </section>
149
150 <form onSubmit={handleSubmit} noValidate>
151 <div className={css({ display: "grid", gridTemplateColumns: "1fr", gap: "4", sm: { gridTemplateColumns: "1fr 1fr" } })}>
152 <FormField label="Date of birth" error={errorFor("dateOfBirth")}>
153 <Input
154 type="date"
155 value={values.dateOfBirth}
156 onChange={(event) => update("dateOfBirth", event.currentTarget.value)}
157 aria-label="Date of birth"
158 aria-invalid={Boolean(errorFor("dateOfBirth"))}
159 />
160 </FormField>
161 <FormField label="Nationality" error={errorFor("nationality")}>
162 <Select options={countries} value={values.nationality} onValueChange={(value) => update("nationality", value)} placeholder="Select nationality" />
163 </FormField>
164 <FormField label="Country of residence" error={errorFor("residence")}>
165 <Select options={countries} value={values.residence} onValueChange={(value) => update("residence", value)} placeholder="Select country" />
166 </FormField>
167 <FormField label="Tax identification number" error={errorFor("taxId")}>
168 <Input
169 value={values.taxId}
170 onChange={(event) => update("taxId", event.currentTarget.value)}
171 placeholder="Enter your tax ID"
172 autoComplete="off"
173 aria-invalid={Boolean(errorFor("taxId"))}
174 />
175 </FormField>
176 <FormField label="Type of identity document" error={errorFor("documentType")}>
177 <Select options={documentTypes} value={values.documentType} onValueChange={(value) => update("documentType", value)} placeholder="Select document type" />
178 </FormField>
179 <FormField label="Document number" error={errorFor("documentNumber")}>
180 <Input
181 value={values.documentNumber}
182 onChange={(event) => update("documentNumber", event.currentTarget.value)}
183 placeholder="Enter document number"
184 autoComplete="off"
185 aria-invalid={Boolean(errorFor("documentNumber"))}
186 />
187 </FormField>
188 <div className={css({ sm: { gridColumn: "1 / -1" } })}>
189 <FormField
190 label="Are you a politically exposed person (PEP)?"
191 helperText="A PEP is someone entrusted with a prominent public function, or their close associate or family member."
192 error={errorFor("pep")}
193 >
194 <Select
195 options={[{ label: "Yes", value: "yes" }, { label: "No", value: "no" }]}
196 value={values.pep}
197 onValueChange={(value) => update("pep", value)}
198 placeholder="Select yes or no"
199 />
200 </FormField>
201 </div>
202 </div>
203 <CardFooter className={css({ mt: "6", px: "0", pb: "0" })}>
204 <Button type="submit" variant="solid" size="md">Submit for review</Button>
205 </CardFooter>
206 </form>
207 </CardBody>
208 </Card>
209 <p className={css({ mt: "4", textAlign: "center", color: "fg.muted", fontSize: "sm" })}>
210 Your information is encrypted and handled securely.
211 </p>
212 </>
213 )}
214 </div>
215 </div>
216 </main>
217 );
218 }
219
Use the logical property "marginBlockEnd" instead of the physical "marginBottom".
page.tsx:145:43 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:203:50 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:203:68 Use the logical property "paddingBlockEnd" instead of the physical "paddingBottom". page.tsx:209:35 Use the logical property "marginBlockStart" instead of the physical "marginTop". typecheck/TS2769 11 quality get_component, get_component, get_component, get_component, get_component