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, list_components, list_files 725 55 $0.0001 1 get_component 3 19 $0.0003 2 get_component, get_component, get_component, get_component, list_tokens 3 90 $0.0001
e02ef3974528
Output cap The provider's default 4 import {
5 Button,
6 Card,
7 CardBody,
8 CardDescription,
9 CardHeader,
10 CardTitle,
11 FormField,
12 Input,
13 Select,
14 } from "@vektos/ds";
15 import { css } from "styled-system/css";
16 import data from "./fixture.json";
17
18 type FormValues = {
19 dateOfBirth: string;
20 nationality: string;
21 countryOfResidence: string;
22 taxId: string;
23 documentType: string;
24 documentNumber: string;
25 politicallyExposed: string;
26 };
27
28 const emptyValues: FormValues = {
29 dateOfBirth: "",
30 nationality: "",
31 countryOfResidence: "",
32 taxId: "",
33 documentType: "",
34 documentNumber: "",
35 politicallyExposed: "",
36 };
37
38 const countryOptions = data.countries.map((country) => ({
39 label: country.name,
40 value: country.code,
41 }));
42
43 const documentOptions = data.documentTypes.map((document) => ({
44 label: document.label,
45 value: document.value,
46 }));
47
48 const yesNoOptions = [
49 { label: "No", value: "no" },
50 { label: "Yes", value: "yes" },
51 ];
52
53 export default function IdentityVerificationPage() {
54 const [values, setValues] = useState<FormValues>(emptyValues);
55 const [submitted, setSubmitted] = useState(false);
56 const [complete, setComplete] = useState(false);
57
58 const update = (field: keyof FormValues, value: string) => {
59 setValues((current) => ({ ...current, [field]: value }));
60 };
61
62 const errorFor = (field: keyof FormValues) =>
63 submitted && !values[field].trim() ? "This field is required." : undefined;
64
65 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
66 event.preventDefault();
67 setSubmitted(true);
68 if (Object.values(values).every((value) => value.trim().length > 0)) {
69 setComplete(true);
70 }
71 };
72
73 return (
74 <main className={css({ minH: "screen", bg: "bg.canvas", color: "fg.default", px: "4", py: "8" })}>
75 <div className={css({ maxW: "lg", mx: "auto" })}>
76 <div className={css({ display: "flex", alignItems: "center", gap: "2", marginBlockEnd: "6" })}>
77 <span aria-hidden="true" className={css({ display: "inline-block", w: "4", h: "4", rounded: "full", bg: "accent.default" })} />
78 <span className={css({ fontSize: "sm", fontWeight: "semibold", color: "fg.muted" })}>ACCOUNT OPENING</span>
79 <span className={css({ color: "fg.muted", px: "1" })}>/</span>
80 <span className={css({ fontSize: "sm", color: "fg.muted" })}>Identity verification</span>
81 </div>
82
83 <div className={css({ marginBlockEnd: "6" })}>
84 <p className={css({ marginBlockEnd: "2", fontSize: "sm", fontWeight: "semibold", color: "accent.default" })}>STEP 2 OF 3</p>
85 <h1 className={css({ marginBlockEnd: "2", fontSize: "lg", fontWeight: "semibold" })}>
86 Verify your identity
87 </h1>
88 <p className={css({ color: "fg.muted" })}>
89 Provide a few details to help us meet our regulatory requirements.
90 </p>
91 </div>
92
93 {complete ? (
94 <Card>
95 <CardBody>
96 <div className={css({ display: "flex", alignItems: "flex-start", gap: "4", py: "2" })}>
97 <span aria-hidden="true" className={css({ display: "flex", flexShrink: "0", alignItems: "center", justifyContent: "center", w: "8", h: "8", rounded: "full", bg: "success.subtle", color: "success.text", fontWeight: "semibold" })}>✓</span>
98 <div>
99 <h2 className={css({ marginBlockEnd: "2", fontSize: "md", fontWeight: "semibold" })}>Your details are being reviewed</h2>
100 <p className={css({ color: "fg.muted" })}>
101 We’ll let you know by email when your identity check is complete.
102 </p>
103 </div>
104 </div>
105 </CardBody>
106 </Card>
107 ) : (
108 <Card>
109 <CardHeader>
110 <CardTitle>Personal details</CardTitle>
111 <CardDescription>Enter your details exactly as they appear on your identity document.</CardDescription>
112 </CardHeader>
113 <CardBody>
114 <div className={css({ marginBlockEnd: "6", rounded: "md", borderWidth: "thin", borderColor: "border.default", bg: "bg.subtle", p: "4" })}>
115 <p className={css({ marginBlockEnd: "3", fontSize: "sm", fontWeight: "semibold" })}>Your account details</p>
116 <div className={css({ display: "flex", flexDirection: "column", gap: "3" })}>
117 <div>
118 <p className={css({ marginBlockEnd: "1", fontSize: "xs", color: "fg.muted" })}>Full name</p>
119 <p className={css({ fontSize: "sm", fontWeight: "medium" })}>{data.customer.firstName} {data.customer.lastName}</p>
120 </div>
121 <div>
122 <p className={css({ marginBlockEnd: "1", fontSize: "xs", color: "fg.muted" })}>Email address</p>
123 <p className={css({ fontSize: "sm", fontWeight: "medium" })}>{data.customer.email}</p>
124 </div>
125 </div>
126 </div>
127
128 <form onSubmit={handleSubmit} noValidate>
129 <div className={css({ display: "flex", flexDirection: "column", gap: "4" })}>
130 <FormField label="Date of birth" error={errorFor("dateOfBirth")}>
131 <Input type="date" value={values.dateOfBirth} onChange={(event) => update("dateOfBirth", event.currentTarget.value)} />
132 </FormField>
133
134 <FormField label="Nationality" error={errorFor("nationality")}>
135 <Select options={countryOptions} placeholder="Select nationality" value={values.nationality} onValueChange={(value) => update("nationality", value)} />
136 </FormField>
137
138 <FormField label="Country of residence" error={errorFor("countryOfResidence")}>
139 <Select options={countryOptions} placeholder="Select country" value={values.countryOfResidence} onValueChange={(value) => update("countryOfResidence", value)} />
140 </FormField>
141
142 <FormField label="Tax identification number" error={errorFor("taxId")}>
143 <Input autoComplete="off" value={values.taxId} onChange={(event) => update("taxId", event.currentTarget.value)} placeholder="Enter your tax ID" />
144 </FormField>
145
146 <FormField label="Type of identity document" error={errorFor("documentType")}>
147 <Select options={documentOptions} placeholder="Select document type" value={values.documentType} onValueChange={(value) => update("documentType", value)} />
148 </FormField>
149
150 <FormField label="Document number" error={errorFor("documentNumber")}>
151 <Input autoComplete="off" value={values.documentNumber} onChange={(event) => update("documentNumber", event.currentTarget.value)} placeholder="Enter document number" />
152 </FormField>
153
154 <FormField label="Are you a politically exposed person (PEP)?" error={errorFor("politicallyExposed")}>
155 <Select options={yesNoOptions} placeholder="Select yes or no" value={values.politicallyExposed} onValueChange={(value) => update("politicallyExposed", value)} />
156 </FormField>
157 </div>
158 <div className={css({ marginBlockStart: "6" })}>
159 <Button type="submit" size="md">Submit details</Button>
160 </div>
161 <p className={css({ marginBlockStart: "3", fontSize: "xs", color: "fg.muted" })}>
162 Your information is encrypted and used only for identity verification.
163 </p>
164 </form>
165 </CardBody>
166 </Card>
167 )}
168 </div>
169 </main>
170 );
171 }
172
11 write_file 3 2,201 $0.0013
12 check_code 3 2,184 $0.0015