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_tokens, list_files 140 73 $0.0000 1 read_file 7,176 28 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 294 251 $0.0000
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Alert,
7 Button,
8 Card,
9 CardBody,
10 CardDescription,
11 CardHeader,
12 CardTitle,
13 Combobox,
14 DataList,
15 DatePicker,
16 FormField,
17 Heading,
18 Input,
19 RadioGroup,
20 Select,
21 Stack,
22 Text,
23 } from "@vektos/ds";
24
25 const countryOptions = data.countries.map((country) => ({
26 label: country.name,
27 value: country.code,
28 }));
29
30 const documentOptions = data.documentTypes.map((type) => ({
31 label: type.label,
32 value: type.value,
33 }));
34
35 const pepOptions = [
36 { label: "Yes", value: "yes" },
37 { label: "No", value: "no" },
38 ];
39
40 type Errors = {
41 dateOfBirth?: string;
42 nationality?: string;
43 countryOfResidence?: string;
44 taxId?: string;
45 documentType?: string;
46 documentNumber?: string;
47 pep?: string;
48 };
49
50 export default function Page() {
51 const [dateOfBirth, setDateOfBirth] = useState<string | null>(null);
52 const [nationality, setNationality] = useState<string | null>(null);
53 const [countryOfResidence, setCountryOfResidence] = useState<string | null>(null);
54 const [taxId, setTaxId] = useState("");
55 const [documentType, setDocumentType] = useState("");
56 const [documentNumber, setDocumentNumber] = useState("");
57 const [pep, setPep] = useState("");
58 const [errors, setErrors] = useState<Errors>({});
59 const [isSubmitted, setIsSubmitted] = useState(false);
60
61 const validate = () => {
62 const nextErrors: Errors = {};
63 if (!dateOfBirth) {
64 nextErrors.dateOfBirth = "Enter your date of birth.";
65 }
66 if (!nationality) {
67 nextErrors.nationality = "Select your nationality.";
68 }
69 if (!countryOfResidence) {
70 nextErrors.countryOfResidence = "Select your country of residence.";
71 }
72 if (!taxId.trim()) {
73 nextErrors.taxId = "Enter your tax identification number.";
74 }
75 if (!documentType) {
76 nextErrors.documentType = "Select a document type.";
77 }
78 if (!documentNumber.trim()) {
79 nextErrors.documentNumber = "Enter your document number.";
80 }
81 if (!pep) {
82 nextErrors.pep = "Select whether you are a politically exposed person.";
83 }
84 setErrors(nextErrors);
85 return Object.keys(nextErrors).length === 0;
86 };
87
88 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
89 event.preventDefault();
90 if (validate()) {
91 setIsSubmitted(true);
92 }
93 };
94
95 const fullName = `${data.customer.firstName} ${data.customer.lastName}`;
96
97 return (
98 <div className="vektos">
99 <Stack gap="6" marginBlock="8" marginInline="auto" maxWidth="md">
100 <Heading level={1}>Identity verification</Heading>
101 <Text tone="muted" size="sm">
102 Confirm your identity to continue opening your account.
103 </Text>
104
105 <Card>
106 <CardHeader>
107 <CardTitle>Customer details</CardTitle>
108 <CardDescription>Already on file and cannot be edited here.</CardDescription>
109 </CardHeader>
110 <CardBody>
111 <DataList
112 items={[
113 { label: "Full name", value: fullName },
114 { label: "Email", value: data.customer.email },
115 ]}
116 />
117 </CardBody>
118 </Card>
119
120 {isSubmitted ? (
121 <Alert tone="success" title="Details being reviewed">
122 Your identity details have been submitted and are being reviewed.
123 </Alert>
124 ) : (
125 <Card>
126 <CardHeader>
127 <CardTitle>Identity details</CardTitle>
128 </CardHeader>
129 <CardBody>
130 <form onSubmit={handleSubmit} noValidate>
131 <Stack gap="4">
132 <FormField label="Date of birth" required error={errors.dateOfBirth}>
133 <DatePicker
134 value={dateOfBirth}
135 onValueChange={setDateOfBirth}
136 />
137 </FormField>
138
139 <FormField
140 label="Nationality"
141 required
142 error={errors.nationality}
143 >
144 <Combobox
145 options={countryOptions}
146 value={nationality}
147 onValueChange={setNationality}
148 placeholder="Select a country"
149 />
150 </FormField>
151
152 <FormField
153 label="Country of residence"
154 required
155 error={errors.countryOfResidence}
156 >
157 <Combobox
158 options={countryOptions}
159 value={countryOfResidence}
160 onValueChange={setCountryOfResidence}
161 placeholder="Select a country"
162 />
163 </FormField>
164
165 <FormField
166 label="Tax identification number"
167 required
168 error={errors.taxId}
169 >
170 <Input
171 value={taxId}
172 onChange={(event) => setTaxId(event.target.value)}
173 />
174 </FormField>
175
176 <FormField
177 label="Type of identity document"
178 required
179 error={errors.documentType}
180 >
181 <Select
182 options={documentOptions}
183 value={documentType}
184 onValueChange={setDocumentType}
185 placeholder="Select a document"
186 />
187 </FormField>
188
189 <FormField
190 label="Document number"
191 required
192 error={errors.documentNumber}
193 >
194 <Input
195 value={documentNumber}
196 onChange={(event) => setDocumentNumber(event.target.value)}
197 />
198 </FormField>
199
200 <RadioGroup
201 label="Politically exposed person"
202 required
203 options={pepOptions}
204 value={pep}
205 onValueChange={setPep}
206 error={errors.pep}
207 orientation="horizontal"
208 />
209
210 <Stack flexDirection="row" gap="2" justifyContent="flex-end">
211 <Button type="submit" variant="solid">
212 Submit
213 </Button>
214 </Stack>
215 </Stack>
216 </form>
217 </CardBody>
218 </Card>
219 )}
220 </Stack>
221 </div>
222 );
223 }
224
3 get_component, get_component 9,671 668 $0.0000
4 read_file 2,487 703 $0.0000
9 write_file 304 2,398 $0.0000
10 check_code 2,470 1,358 $0.0000
11 write_file 1,466 1,374 $0.0000
12 check_code 1,456 1,336 $0.0000
13 write_file 27,575 4,584 $0.0000
14 check_code 4,663 1,345 $0.0000