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